Firebase 匿名認証でログインしたユーザーか判別する方法

はじめに

結構便利なFirebaseの匿名認証。

匿名認証を活用したい場面としてはこちらの記事の通りで、ログイン機能を持たせる必要がないアプリでも、データベースのセキュリティは安全に保つ必要がある。

JavaScript を使用して Firebase 匿名認証を行う | Firebase

アプリに登録していないユーザーが、セキュリティ ルールで保護されているデータを使用できるようになります。

しかし、アプリによっては匿名認証でログインしたユーザーと、普通にメアドとかでログインしたユーザーが混在する場合がある。

色々と検索してみたが、Firebase側で「匿名認証ユーザー or 認証ユーザー」を判別する関数が用意されていないっぽい（知っている人いたら教えてください！！）ので、無理やり判別してみた。。

環境

Ionic + Angular

プロジェクトにAngularFireが入っていること

匿名認証でログインした場合、displayNameがない

displayName自体、Firebaseの認証で必須ではないが大体のアプリケーションでは使われているだろう。

で、当たり前だが匿名認証でログインした場合、displayNameがない。
存在するのはuidのみ。

これで簡単に判別できた

home.page.ts

import { Component, OnInit } from '@angular/core';
import { AngularFireAuth } from '@angular/fire/auth';


@Component({
  selector: 'app-my-page',
  templateUrl: './my-page.page.html',
  styleUrls: ['./my-page.page.scss'],
})
export class MyPagePage implements OnInit {
  anoUser = false;

  constructor(
    private afAuth: AngularFireAuth,
  ) { }

  ngOnInit() {
    this.afAuth.auth.onAuthStateChanged((user) => {
      if (user.displayName != null) {
        console.log(user.displayName);
      } else {
        this.anoUser = true;
      }
    });
  }

home.page.html

<ion-header>
  <ion-toolbar color="primary">
    <ion-title>マイページ</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content class="ion-padding">
  <div *ngIf="!anoUser; else elseBlock">
    <ion-grid>
        <ion-col size="12" size-sm="8" offset-sm="2">

          <div class="ion-text-right">普通にログインしてますね</div>
        </ion-col>
      </ion-row>
    </ion-grid>
  </div>

<ng-template #elseBlock>
  <ion-grid>
    <ion-row>
      <ion-col>
        <h2>匿名でログインしてるね</h2>
      </ion-col>
    </ion-row>
  </ion-grid>
</ng-template>
</ion-content>

追記isAnonymousで判別できました！

@qrusadorz さん、コメントより教えていただき感謝します

// 省略
isAnonymous = null;
// 省略

ngOnInit() {
    this.afAuth.auth.onAuthStateChanged((user) => {
      if (user != null) {
        this.isAnonymous = user.isAnonymous;
       // 匿名ユーザーなら「true」となる
        console.log('匿名でしょうか？ ' + this.isAnonymous);

      }
    });
  }

 <div *ngIf="!isAnonymous; else elseBlock">
    <ion-grid>
    <ion-row>
      <ion-col>
         <h2>普通にログインしてるね</h2>
      </ion-col>
    </ion-row>
  </ion-grid>
  </div>

<ng-template #elseBlock>
  <ion-grid>
    <ion-row>
      <ion-col>
         <h2>匿名でログインしてるね</h2>
      </ion-col>
    </ion-row>
  </ion-grid>
</ng-template>