くらげになりたい。

くらげのようにふわふわ生きたい日曜プログラマなブログ。趣味の備忘録です。

トップ > Nuxt.js > Firebase UIで匿名認証を使ってみる

Firebase UIで匿名認証を使ってみる

Nuxt.js Firebase Firebase-Auth

匿名認証を使えるといいなと思ったので、いろいろ調べてみたときの備忘録。

Firebase UIを使うと簡単にできた。

匿名アカウントでログインする

こんな感じ。signInAnonymously()を呼べばOK。

// 初期化済みのfirebaseインスタンス。詳細は略
import firebase from "~/plugins/firebase";

async function signInAnonymously(): firebase.auth.UserCredential {
  const authResult = await firebase.auth().signInAnonymously();
  return authResult;
}

nuxt-client-init-moduleとかを使って、アクセス時に認証するいい感じ。

また、ログアウトした後は、認証されていない状態になるので、
再度、signInAnonymously()を呼び出し、匿名認証し直す必要がある。

Firebase UIで永久アカウントに変更

ログイン画面はこんな感じ。

設定でautoUpgradeAnonymousUsersをtrueにすると、
自動で永久アカウントにアップグレードしてくれる。

※がついている部分が関連しているところ。

<template>
  <div class="container">
    <div id="firebaseui-auth-container" />
  </div>
</template>

<script lang="ts">
import { Component, Vue } from "nuxt-property-decorator";

// 初期化済みのfirebaseインスタンス。詳細は略
import firebase from "~/plugins/firebase";

// Firebase UI
import * as firebaseui from "firebaseui-ja";

// CSSのインポート。これがないとレイアウトが崩れる
require("firebaseui-ja/dist/firebaseui.css");

@Component
export default class LoginPage extends Vue {
  mounted() {
    const auth = firebase.auth();
    const ui =
      firebaseui.auth.AuthUI.getInstance() || new firebaseui.auth.AuthUI(auth);

    const uiConfig: firebaseui.auth.Config = {
      // ※ 自動で匿名アカウントをアップグレードする設定をONにする
      autoUpgradeAnonymousUsers: true,
      callbacks: {
        // 認証成功時のコールバック
        signInSuccessWithAuthResult: (
          authResult: firebase.auth.UserCredential,
          redirectUrl: string
        ) => true,
        // ※ 認証失敗時のコールバック
        signInFailure: async (error: firebaseui.auth.AuthUIError) => {
          console.warn("signInFailure", error);
          
          // ※ すでにアカウントがある場合、アップグレードできず、エラーになる。
          // ※ errorにcredentialがあるので、それを使ってサインインする
          const auth = firebase.auth();
          const credential = error.credential;
          const authResult = await auth.signInWithCredential(credential);

        },
        // UI表示時のコールバック
        uiShown: () => console.info("uiShown")
      },
      signInFlow: "redirect",
      signInSuccessUrl: "/",
      signInOptions: [
        firebase.auth.GoogleAuthProvider.PROVIDER_ID
      ],
      tosUrl: "...",          // 利用規約のURL
      privacyPolicyUrl: "..." // プライバシーポリシーのURL
    };

    // Firebase UIを表示させたいIDを指定する
    ui.start("#firebaseui-auth-container", uiConfig);
  }
}
</script>

ログインしたアカウントが作成済みだと、データをマージできず、
signInFailureが呼ばれるので、credentialを使って通常ログインする感じに。

signInFailureが呼ばれるのは、匿名ユーザをアップグレードするときのエラーだけらしい。

The corresponding error code. Currently the only error code supported is firebaseui/anonymous-upgrade-merge-conflict

firebase/firebaseui-web | signInFailure(error)

以上!!

参考にしたサイト様