Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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

はじめに

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

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

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

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

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

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

環境

Ionic + Angular

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

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

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

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

これで簡単に判別できた:grinning:

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 さん、コメントより教えていただき感謝します:relaxed:

// 省略
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>
kokogento
エストニアの電子国民e-Residencyです。2020/09より、東京で人生初の正社員に! 〇活を記録するアプリをIonic + Angularで開発し、運営中。アプリについては下記URLを参照。現在Vueを学習中。。。
https://gengendiary.world/first-app/
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away