【Web】Firebase Authenticationでカスタムプロバイダ認証を行う (LINE認証)

はじめに

Firebase AuthenticationをIdentityPlatformを使用したものにアップグレードを行うと
GoogleやFacebook、TwitterのようなFirebaseがデフォルトで提供していないプロバイダー以外も
OIDCに準拠していればIDプロバイダーとして利用することができます。(以下公式)

https://firebase.google.com/docs/auth/web/openid-connect

今回はこの機能を用いてLINEをIDプロバイダーとして利用していきます。

参考にしたもの注記など

基本的には公式ドキュメントをLINEのものに読み替えればできます。
※ OpenID Connectの機能が最近追加されたため検索するとカスタムトークンを用いた認証の記事が多く出てくるので記事にしました。

また、以下のスクラップに自分の作業ログを残しています。サクッと知りたいときはスクラップのほうが良いかもしれません。

https://zenn.dev/satjopg/scraps/8668d88321f404

準備

LINE設定

LINE Developpersにすでに登録し、プロバイダーとチャネルも設定済みの方は

• チャネルID
• チャネルシークレット

をメモしてFirebaseの設定にいきましょう。
※ Firebaseの設定後、コールバックURLを追加するためにLINE Developpersに戻ってきます

1. LINE Developpersへの登録

LINE Developpersに登録します

https://account.line.biz/signup

自分のLINEアカウントで管理するのは嫌だ！という人はビジネスアカウントを作ることをおすすめします
メールアドレスのみで作成することが可能です。

2. プロバイダーを作成する

プロバイダーはサービスを提供する会社や個人のことを指します。
「作成」を押すと名前を入力できるので入力して作成します。
※ プロバイダーの名前はあとから変更可能です
※ 権限設定からメンバーを追加・削除することが可能です

3. チャネルを作成する

まだチャネルはないので以下の画像のように表示されると思いますので
今回は「LINEログイン」を選択します
※ チャネルはサービスごと + 利用したいLINEの機能ごとに作成する認識です

「新規チャネル作成」となるので項目を埋めましょう
※ チャネルアイコン、チャネル名、チャネル説明はLINEログイン画面で表示されます
※ アプリタイプは「ウェブアプリ」を選択します

4. 連携に必要な情報をメモる

「チャネル基本設定」から以下をメモります

• チャネルID
• チャネルシークレット

Firebase設定

1. IdentityPlatformを使用したものにアップグレード

Firebase Authentication > Sign-in method を開くと
ログイン プロバイダの右上に「新しいプロバイダを追加」とあるのでこれをクリックする。
表示された内容の右、カスタム プロパイダの中に「OpenID Connect」とあるので
カーソルを合わせると以下画像のように出るのでアップグレードを行います
公式詳細

2. OIDCプロパイダの追加

「新しいプロバイダを追加」から「OpenID Connect」を選択します。
各項目については以下のように入力してください。

発行元（URL）については/.well-known/openid-configurationのあるURLを入力します。
LINEの場合は https://access.line.me/.well-known/openid-configuration に存在しているので https://access.line.me を入力しています。

/.well-known/openid-configurationはOpenID Connect Discovery 1.0に準拠したプロバイダーを識別するための情報が配置される場所として理解しています(間違っていたらごめんなさい)
中身のJSONはOpenID Connect Discovery 1.0 #ProviderMetadataに書かれています。
例 Yahoo: https://developer.yahoo.co.jp/yconnect/v2/hybrid/configuration.html

項目を入れたら次へをクリックします

3. コールバックURLを追加する

※ Firebaseと書いておきながらLine Developpersに戻ります...
コールバックURL https://<firebaseプロジェクトID>.firebaseapp.com/__/auth/handler と表示されるのでLine Developpersの チャネル > LINEログイン設定 のコールバックURLに追加します。
LINE側に複数コールバックURLを追加したいときには改行することで登録することが可能です。

以上で準備完了です。

実装 (めっちゃ簡易です)

FirebaseSDKを使用してログインフローを処理する(公式)の通りやれば基本は問題ないと思います。

また、現在他のプロバイダーで認証を利用している方はOAuthProviderというProviderを利用する以外は同じです。

以下のようなコードでlineSigninを呼び出してあげればOKです。
※ signInWithRedirectでなくてももちろん大丈夫です. あったものを選択してください.

import { OAuthProvider, signInWithRedirect } from 'firebase/auth';

lineSignin() {
  const lineProvider = new OAuthProvider(<プロバイダーID>);
  signInWithRedirect(auth, lineProvider);
}

<プロバイダーID>はoidc.<Firebase設定でつけた名前>で定義されます。
以下画像のように表示されていると思うので確認してみてください。

動き

先程の関数を呼び出すと、問題なければLINEログイン画面に遷移できます。
※ Firebase Authenticationで認証されたドメインじゃないと動きません

ちなみにLINE側独自で用意されているパラメータは以下のように追加することが可能です。

lineProvider.setCustomParameters({
  initial_amr_display: 'lineqr'
});

上記を追加することでQRがデフォルト(PC版のみ)で表示されます
その他はLINE Developpersに書かれていますので参考にしてみてください

ログインをするとLINE側認可画面が表示されます
※ ここでチャネルに設定されたチャネルアイコン、チャネル名、チャネル説明が表示されます(大事ですね)
認可するとFirebaseによる認証が行われ、存在しないユーザの場合は新しくユーザが登録されます。
遷移元の画面に戻ったらこの認証情報が利用できるので適宜利用しましょう。

ちなみに、LINEはデフォルトでemailは取得できず申請が必要になります。
また、LINEではemail登録は必須ではないので提供サービスでemailが必須であれば注意が必要かもしれません。
画像にもありますがemailが取得できなかったときIDはLINE登録名となります。
(同姓同名のときはどうなるんだろ...)
また、同じLINEアカウントで登録(1回目) => 認証削除 => 登録(2回目) とやったときに
Firebase上のUIDは1回目と2回目で異なるものが発行されるのも確認しました
※ 簡易的にしか試していないので利用前に確認したほうが良いと思います

まとめ

Firebase AuthenticationのOIDCを利用しLINE認証を行うやり方を紹介しました。
準備が少し変わるだけで標準提供されているプロバイダーとほとんど変わらないので
これを機に利用してみると良いかもしれません。

なにか記述間違い等ありましたらコメントでお知らせください。