この記事は、Supershipグループ Advent Calendar 2022 の 18 日目の記事になります。
はじめに
こんにちは、Supership 21 卒の @ksfunc です。
Supership では新規事業にも力を入れており、Supership Group Startup Studio を立ち上げ、新規事業の創出を積極的に行っています。
新規事業創出では、必要最低限の価値をユーザーに提供できるプロダクト（MVP = Minimum Viable Product）を素早く開発してユーザーに使っていただき、得られたフィードバックを基に新機能の追加や改善を繰り返していく MVP 検証が重要となります。
私は普段、MVP 開発のプラットフォームとして Firebase を選択しています。
サーバーレスアーキテクチャで素早く MVP 開発ができることに加え、Firebase は Google に買収されてからバックエンドが Google Cloud に統合されつつあり、MVP 開発から本サービスの開発へ移行する際に Firebase に力不足を感じても、Google Cloud への移行をシームレスに行うことができる点が魅力的なためです。
しかし発展途上な部分も多く残されており、その一つに、ログイン機能の実装で選択できるプロバイダーが少なく、LINE などの日本でメジャーなプロバイダーに対応しようとすると途端に実装コストが跳ね上がるという課題がありました。
本記事では、Firebase の 2022 年のアップデートで LINE ログインの実装がとても簡単になっていたので紹介します。
Firebase Summit 2022
2022 年 10 月に開催された Firebase Summit 2022 にて、Firebase の 2022 年の新機能やアップデート内容が発表されました。アップデート内容は公式ブログにまとめられています。
私はこれらのアップデートのうち、Firebase Hosting と Next.js の統合や、Firebase Authentication with Identity Platform によるカスタム OIDC プロバイダーへの対応を MVP 検証に使用してみました。
ここからは、後者の Firebase Authentication with Identity Platform によるカスタム OIDC プロバイダーへの対応に注目し、OIDC 準拠のプロバイダーとして LINE ログインを使用した場合の実装方法を紹介します。
Firebase Authentication with Identity Platform を使用した LINE ログインの実装方法
Firebase Authentication with Identity Platform へアップグレード
Firebase Authentication を任意の OIDC プロバイダーに対応させるには、Firebase Authentication を Firebase Authentication with Identity Platform にアップグレードする必要があります。
これにより、Firebase Authentication のバックエンドが Google Cloud の Identity Platform に切り替わり、Identity Platform の機能が使用できるようになります（料金体系も変わるので注意してください）。
こちらがアップグレード前の Firebase Authentication の Sign-in method の設定画面です。OpenID Connect の機能がロックされていることがわかります。
カーソルを合わせると アップグレード ボタンが出現するので、指示に従ってアップグレードします。
アップグレードすると、ヘッダー部分に with Identity Platform の表示が追加されます。
Sign-in method の設定画面を開くと、OpenID Connect の機能がアクティベートされていることがわかります。
LINE の OIDC プロバイダーをセットアップ
LINE Developers にログインし、任意の名前で OIDC プロバイダーを作成します。
プロバイダーの作成が完了したら、続いて新しいチャンネル（OIDC クライアント）を作成します。チャンネルタイプでは LINE Login を選択し、指示に従ってチャンネルを作成します。
チャンネルの作成が完了したら、チャンネル ID（OIDC クライアント ID）とチャンネル Secret（OIDC クライアント Secret） を控えておきます。
Firebase Authentication と LINE の OIDC プロバイダーを接続
Firebase Authentication の Sign-in method の設定画面に戻り、OpenID Connect を選択して接続します。
付与タイプでは コードフロー を選択し、名前には任意の名前を入力します（この名前は Firebase プロジェクト内のプロバイダー ID に使用されます）。発行元（URL）には https://access.line.me を入力し、クライアント ID とクライアント Secret には先ほど控えたものを入力します。
次へ ボタンを押してコールバック URL を表示させます。コールバック URL を控えたら 保存 ボタンを押して Firebase Authentication 側の設定を保存します。
LINE Developers のチャンネルの設定画面に戻り、控えたコールバック URL を設定します。
クライアントアプリでログイン
クライアントアプリ（Web アプリ）でのログインの実装も非常に簡単です。下記のように、OAuthProvider を使用します。
import { OAuthProvider, getAuth, signInWithRedirect } from "firebase/auth";
const handleLoginClick = () => {
const provider = new OAuthProvider("oidc.test-provider");
signInWithRedirect(getAuth(), provider);
};
OAuthProvider のコンストラクターの引数には、oidc. から始まるプロバイダー ID を指定します。
下記の Google ログインの場合と比較しても簡単であることがわかります。
import { GoogleAuthProvider, getAuth, signInWithRedirect } from "firebase/auth";
const handleLoginClick = () => {
const provider = new GoogleAuthProvider()
signInWithRedirect(getAuth(), provider)
};
実際に呼び出してみると、LINE のログイン画面が表示されます。ログインが完了すると、Firebase Authentication にユーザーが追加されます。
おわりに
本記事では、Firebase Authentication with Identity Platform によるカスタム OIDC プロバイダーへの対応の一例として、OIDC 準拠のプロバイダーとして LINE ログインを使用した場合の実装方法を紹介しました。
LINE ログイン以外にも OIDC 準拠のプロバイダーであれば同様の方法で対応できるので、標準で対応しているプロバイダーの少なさを理由に Firebase Authentication を選択肢から外してしまっていましたら、これを機に使用してみると良いと思います。
宣伝
Supership ではプロダクト開発やサービス開発に関わる人材を絶賛募集しております。ご興味がある方は以下リンクよりご確認ください。
是非ともよろしくお願いいたします。