(Web) Firebase AuthenticationでLINEアカウントからsigninができるようになるまで (カスタムトークンの利用)
はじめに
Firebaseのカスタムトークンを用いた認証を行いたい
LINEログイン(認証)の仕組みや流れを知りたい
場合はこちらのスクラップの内容を参考にしてみてください
Firebase AuthenticationでLINE認証を導入したい!場合はこちらの記事のやり方ではなく
以下の記事のやり方のほうが良いです。
前提・背景
- 運用サービスはWeb上のもの
- Firebase AuthenticationでGoogleとTwitterアカウントからsigninできるようになっている
- 利用ユーザ層的にLINEアカウントからでもsigninができるようになったほうがよいとなった
- LINEはプロバイダーとしてFirebaseから提供されていないため自分たちで仕組みを構築する必要がある
- よし、がんばろう。となったのでがんばる。
資料
まずはこれを知らないと始まらない
古いがGoogleからもやり方の紹介がある
こちらの記事様, Flutterですが大きな流れは変わらないためとても参考になりそう
(勝手ながら...ありがとうございます!)
Firebase側の認証処理では以下の知識も必要になる
OIDCの基本的なフローを覚えていれば特段難しいところはなさそう。
ご紹介: 「挫折しない OAuth / OpenID Connect 入門」のポイント
とてもわかりやすかったです. こちらも勝手ながらありがとうございます!
フロー
ここに書いてあるものを参考にしました。
jwtに含まれる情報で十分だと思われるのでprofile情報ではなく検証のエンドポイントを利用している
※ nonceのチェックも行いたいため
※ チェックが不要であればprofile取得のエンドポイントを叩くで良いと思う
それを踏まえるとこんな感じになる予定
LINEログイン画面でキャンセルを押した場合、の処理も必要
もちろんその他の例外パターンも処理する必要があるがユーザ自身でキャンセルができるパターンは
他の例外パターンと違うため忘れずにハンドリングできるようにしておく。
- 認可コード
- アクセストークン
- idトークン
の使い分けができていない箇所があるので修正する
また認可コードからアクセストークンを発行する際にredirect_uriが必要になる
nonceの検証は verify の内部で行ってくれるため自分たちは不要
今回利用するLINE PLATFORM側のエンドポイントのドキュメントへのリンク
POST /oauth2/v2.1/token: アクセストークンを発行するエンドポイント. 今回は一緒に取得できるid_token
を利用している. 他のLINE PLATFORMのAPIを利用する際にはこのアクセストークンが必要になる
POST /oauth2/v2.1/verify: idトークンを検証する.
LINEログインの準備
こちらの流れに沿えばOK
チャネルID(API側ではclient_id)とチャネルシークレットは
LINE PLATFORMのAPI呼び出し時に利用するのでメモしておくこと
作るもの
こんな感じでできるはず。
新規で作るか既存のものに追加するかはアプリ次第。
- LINEログイン画面に遷移するためのページ
- stateとnonceを発行してLINEログイン画面に遷移する
- LINEログイン画面からredirectされるページ
- stateの検証やエラーレスポンスを受け取ったときの処理
- アクセストークンを受け取りCloudFunctionsを呼び出す
- カスタムトークンを用いてログインする
- LINE PLATFORMとFirebase Authenticationを駆使してカスタムトークンを発行する処理
- CloudFunctionsで作成する
流れとしては問題ないことを確認。
FirebaseのカスタムトークンをCloud Functionsで発行する際に追加の設定が必要になる。
その1 カスタムトークンの発行権限をCloud Functionsのアカウントに付与する
公式ページのトラブルシューティングには以下のように書かれています。
問題のサービス アカウント(通常は {project-name}@appspot.gserviceaccount.com)に「サービス アカウント トークン作成者」の IAM ロールを付与することです。
この手順に従い、IAMで 「サービス アカウント トークン作成者」ロールを{project-name}@appspot.gserviceaccount.com
に割り当てます。
付与したがPermission Deniedになる場合...
こちらのCloud Functions のデフォルトのサービス アカウントというリンクを飛ぶと
このページに飛びます
そのページを読むと ランタイムサービスアカウントはPROJECT_ID@appspot.gserviceaccount.com
と書かれています。
つまりCloud Functionsのアカウントであるこちらにも 「サービス アカウント トークン作成者」ロールを割り当てる必要がありそうです。
こちらのアカウントはIAMの「Google 提供のロール付与を含みます」にチェックを入れることで表示されます。
(名前 Google Cloud Functions Service Agent というアカウントです)
このアカウントにも「サービス アカウント トークン作成者」ロールを割り当てます。
その2 IAM APIを有効にする
こちらも公式のトラブルシューティングに書かれています
IAM Service Account Credentials APIを有効にします。
※ 有効前にプロジェクトが正しいかどうかの確認をしてください。
考えないといけないことと所感
考えないといけないこと
LINEのユーザIDとFirebaseのユーザIDを一緒にするかどうか
LINEで登録したユーザが退会し、再度登録ができる仕様の場合
退会前と同じユーザとして扱うかどうかを考える。
※ Firebase側で用意されているプロバイダーの場合、異なるユーザIDが発行される。
同じユーザとして扱う場合はLINEのユーザIDをFirebaseのユーザIDとして良い。
異なるユーザとして扱いたい場合は以下が必要となる
- LINEのユーザIDとは別にFirebaseのユーザIDを発行する
- この2つのIDを紐付ける
方法としてはDB(Firestoreなど)に保存するかカスタムクレームにLINEのIDを保存しておくか
などが考えられる。
所感
カスタムトークン発行時の設定に詰まった以外は特に問題なくできた。
OIDC(ないしはoauth2)については他サービスと連携する上で必須なので知っておく必要がある。
まあ、そもそもカスタムトークンによる認証については
Firebase側で事前に連携できるプロバイダーと比較すると当然だが
開発のコストはかかるし連携先の最新情報を追うなど管理コストもかかるので
そのへんはしっかりと認識すべきである。
なので、ちゃんとそのサービスを使った認証が使われる見込みがあるか
どうかの事前調査を行った上で導入すべきである。