FirebaseのGoogle認証

以前、Firebaseのカスタム認証について記事を書きましたので、今回はGoogleアカウントによる認証について書いていきたいと思います。

下記のリンクの公式ドキュメントに詳細は述べられていますが、実際に導入した際の実例として参考になれば幸いです。

https://firebase.google.com/docs/auth/web/google-signin

1.ポップアップによる認証

①:configにFirebaseのコンソールトップから取得できるスニペットを入れてください。

②:ここ以降にログイン成功時の処理を記述してください。

③:ここ以降にログイン失敗時の処理を記述してください。

result.user.uid がFirebaseのパーミッションにおける auth.uid に対応しています。

公式ドキュメントのサンプルソースをコピー&ペーストすればとりあえず動きますが、ポップアップブロックに引っかかったりアクセス時に毎回ログインしなければならなかったりで若干面倒です。

他の方法もサンプルがあるので試していきます。

2.リダイレクトによる認証

①:configにFirebaseのコンソールトップから取得できるスニペットを入れてください。

②:ここ以降でログインページへのリダイレクト処理を記述しています。

③:ここ以降にログイン成功時の処理を記述してください。

④:ここ以降にログイン失敗時の処理を記述してください。

result.user.uid がFirebaseのパーミッションにおける auth.uid に対応しています。

相変わらず開くたびに毎回ログインが必要になります。

このままだとページを開いたとき勝手にリダイレクトするので、ログイン前の表示を行いたい場合には②の処理を切り分けて下さい。

3.Google APIsによる認証

①:configにFirebaseのコンソールトップから取得できるスニペットを入れてください。

②:ここ以降にログイン成功時の処理を記述してください。初回ログイン時のみの処理は上の②にのみ記述する。

③:ここ以降にログイン失敗時の処理を記述してください。

④:content属性にOAuth 2.0 クライアント IDを設定する。(後述)

firebase.auth().currentUser.uid がFirebaseのパーミッションにおける auth.uid に対応しています。

OAuth 2.0 クライアント IDを取得する必要があるため、下記の手順を踏んでください。

下記URLからGoogle APIsを開き、対象のFirebaseのプロジェクトを開きます。

https://console.developers.google.com/projectselector/apis/credentials

認証情報→認証情報を追加→OAuth クライアント IDと選択します。

fire-google-1

クライアントIDの作成画面に遷移しますので、下記の値を入力すます。

アプリケーションの種類:ウェブアプリケーション

名前:任意の文字列

承認済みの JavaScript 生成元:動作させるURLのオリジン

fire-google-2

クライアントIDが表示されますので、④のmetaタグのcontent属性に設定してください。

以上で設定は完了です。

この方法だと毎回サインインを求められはしないようです。

もっといい方法もありそうな気はしますが、ひとまずこれでいけそうです。

今回、意図せずにもGoogle APIsの認証に触れられたので、今後Firebase以外のウェブアプリケーションについてもGoogleアカウント連携ができるようにしていきたいですね。

コメントをどうぞ

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です