Closed14

(Web) Firebase AuthenticationでLINEアカウントからsigninができるようになるまで (カスタムトークンの利用)

ピン留めされたアイテム
satjopgsatjopg

はじめに

Firebaseのカスタムトークンを用いた認証を行いたい
LINEログイン(認証)の仕組みや流れを知りたい
場合はこちらのスクラップの内容を参考にしてみてください

Firebase AuthenticationでLINE認証を導入したい!場合はこちらの記事のやり方ではなく
以下の記事のやり方のほうが良いです。

https://zenn.dev/satjopg/articles/f1b14f249b5ff6

satjopgsatjopg

前提・背景

  • 運用サービスはWeb上のもの
  • Firebase AuthenticationでGoogleとTwitterアカウントからsigninできるようになっている
  • 利用ユーザ層的にLINEアカウントからでもsigninができるようになったほうがよいとなった
  • LINEはプロバイダーとしてFirebaseから提供されていないため自分たちで仕組みを構築する必要がある
  • よし、がんばろう。となったのでがんばる。
satjopgsatjopg

資料

まずはこれを知らないと始まらない
https://developers.line.biz/ja/docs/line-login/overview/

古いがGoogleからもやり方の紹介がある
https://developers-jp.googleblog.com/2016/11/authenticate-your-firebase-users-with-line-login.html

こちらの記事様, Flutterですが大きな流れは変わらないためとても参考になりそう
(勝手ながら...ありがとうございます!)
https://zenn.dev/yskuue/articles/410e5b787b354a

satjopgsatjopg

OIDCの基本的なフローを覚えていれば特段難しいところはなさそう。

ご紹介: 「挫折しない OAuth / OpenID Connect 入門」のポイント
とてもわかりやすかったです. こちらも勝手ながらありがとうございます!
https://www.authlete.com/ja/resources/videos/20211006/

フロー

ここに書いてあるものを参考にしました。

https://developers.line.biz/ja/docs/line-login/integrate-line-login/#login-flow

jwtに含まれる情報で十分だと思われるのでprofile情報ではなく検証のエンドポイントを利用している
※ nonceのチェックも行いたいため
※ チェックが不要であればprofile取得のエンドポイントを叩くで良いと思う

それを踏まえるとこんな感じになる予定

satjopgsatjopg

LINEログイン画面でキャンセルを押した場合、の処理も必要
もちろんその他の例外パターンも処理する必要があるがユーザ自身でキャンセルができるパターンは
他の例外パターンと違うため忘れずにハンドリングできるようにしておく。

satjopgsatjopg
  • 認可コード
  • アクセストークン
  • idトークン
    の使い分けができていない箇所があるので修正する

また認可コードからアクセストークンを発行する際にredirect_uriが必要になる

satjopgsatjopg

今回利用するLINE PLATFORM側のエンドポイントのドキュメントへのリンク

POST /oauth2/v2.1/token: アクセストークンを発行するエンドポイント. 今回は一緒に取得できるid_tokenを利用している. 他のLINE PLATFORMのAPIを利用する際にはこのアクセストークンが必要になる

POST /oauth2/v2.1/verify: idトークンを検証する.

satjopgsatjopg

作るもの

こんな感じでできるはず。
新規で作るか既存のものに追加するかはアプリ次第。

  • LINEログイン画面に遷移するためのページ
    • stateとnonceを発行してLINEログイン画面に遷移する
  • LINEログイン画面からredirectされるページ
    • stateの検証やエラーレスポンスを受け取ったときの処理
    • アクセストークンを受け取りCloudFunctionsを呼び出す
    • カスタムトークンを用いてログインする
  • LINE PLATFORMとFirebase Authenticationを駆使してカスタムトークンを発行する処理
    • CloudFunctionsで作成する
satjopgsatjopg

流れとしては問題ないことを確認。
FirebaseのカスタムトークンをCloud Functionsで発行する際に追加の設定が必要になる。

https://firebase.google.com/docs/auth/admin/create-custom-tokens?hl=ja

その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を有効にします。
※ 有効前にプロジェクトが正しいかどうかの確認をしてください。

satjopgsatjopg

考えないといけないことと所感

考えないといけないこと

LINEのユーザIDとFirebaseのユーザIDを一緒にするかどうか

LINEで登録したユーザが退会し、再度登録ができる仕様の場合
退会前と同じユーザとして扱うかどうかを考える。
※ Firebase側で用意されているプロバイダーの場合、異なるユーザIDが発行される。

同じユーザとして扱う場合はLINEのユーザIDをFirebaseのユーザIDとして良い。
異なるユーザとして扱いたい場合は以下が必要となる

  1. LINEのユーザIDとは別にFirebaseのユーザIDを発行する
  2. この2つのIDを紐付ける

方法としてはDB(Firestoreなど)に保存するかカスタムクレームにLINEのIDを保存しておくか
などが考えられる。

所感

カスタムトークン発行時の設定に詰まった以外は特に問題なくできた。
OIDC(ないしはoauth2)については他サービスと連携する上で必須なので知っておく必要がある。

まあ、そもそもカスタムトークンによる認証については
Firebase側で事前に連携できるプロバイダーと比較すると当然だが
開発のコストはかかるし連携先の最新情報を追うなど管理コストもかかるので
そのへんはしっかりと認識すべきである。
なので、ちゃんとそのサービスを使った認証が使われる見込みがあるか
どうかの事前調査を行った上で導入すべきである。

このスクラップは2022/10/18にクローズされました