Firebase Auth はさまざまなソーシャルログインに対応している。
Google, GitHub, Apple, X, Facebook などだが、東南アジアで人気の WhatsApp には対応していない。
自分は東南アジア向けのサービスを開発しているため、特にインドネシアユーザーに向けて Login With WhatsApp を追加した。
(WhatsApp Business APIが利用できる前提で話を進めます)
全体の流れ
以下のようになります。
- ユーザーが Login with WhatsApp をクリックし、API に電話番号を投げる
- API は OTP を生成し Redis などに保存した上で、WhatsApp で送信する
- ユーザーは WhatsApp アプリで OTP を受け取り、それをアプリで入力する
- API は入力された OTP が正しいか検証し、正しければ Firebase Auth のカスタムトークンを発行し、ユーザーに返す
- ユーザーはそのトークンを Firebase Auth に渡し、認証する
詳細
1. ユーザーが Login with WhatsApp をクリックし、API に電話番号を投げる
これは文字通り。
2. API は OTP を生成し Redis などに保存した上で、WhatsApp で送信する
OTP の検証を行うために、OTP と電話番号を紐付けて保存する。
WhatsApp でメッセージに OTP を付与して送信する際、以下のページを読むと良い。
ワンタップ自動入力 - WhatsApp Business管理API - ドキュメンテーション - Meta for Developers
この通りにメッセージを送信すると、OTP 送信用のメッセージを送信できる。
3. ユーザーは WhatsApp アプリで OTP を受け取り、それをアプリで入力する
上記のワンタップ自動入力のドキュメント通りにアプリ側で然るべき対応をすれば、OTP 入力画面で WhatsApp を開かずとも自動で入力ができる。
4. API は入力された OTP が正しいか検証し、正しければ Firebase Auth のカスタムトークンを発行し、ユーザーに返す
電話番号をキーに OTP を Redis などから取得し、入力された OTP と比較する。
問題がなければ Firebase Auth のカスタムトークンを発行する。
使い終わった OTP は Redis などから忘れずに削除する。
ここで、DB から電話番号をキーにユーザーを検索し、存在した場合はそのユーザーの Firebase Auth UID を使ってカスタムトークンを発行すると、電話番号認証で作成したユーザーを WhatsApp でログインさせることができる。
これはカスタムトークンの発行が自前の API で制御できるために可能なことで、その逆はできない。
つまり、Login with WhatsApp で作成したユーザーを Firebase Auth ネイティブの電話番号認証でログインさせることはできない。
自分は以下のようにした。
- 電話番号によるログインのボタンは WhatsApp と通常の電話番号認証(SMS)で区別せず Login with Phone Number としている
- Login with Phone Number をタップすると、電話番号を入力する画面に遷移する
- 電話番号入力画面の Submit ボタンを SMS と WhatsApp で二つ表示する
- ボタンを表示する前に WhatsApp アプリがインストールされているかどうかをチェックする
- SMS で作成したユーザーはどちらを選んでもログインできる
- WhatsApp で作成したユーザーが、SMS でログインしようとしたらその旨を表示する
- WhatsApp で作成したユーザーは、アカウントページから Connect with Google と同じように Connect with SMS ができる
- 一度連携すれば WhatsApp で作成したユーザーも SMS でログインできるようになる
WhatsApp を使っているユーザーがログアウトした後にわざわざ SMS を選ぶことはあまりなさそう(要検証)なので、このような実装にした。
カスタムトークン作成のドキュメントは以下。
カスタム トークンを作成する | Firebase Authentication
5. ユーザーはそのトークンを Firebase Auth に渡し、認証する
カスタムトークンによる認証のドキュメントは以下。
JavaScript でカスタム認証システムを使用して Firebase 認証を行う
まとめ
このようにカスタムトークンの生成はサーバーサイドで好きなように行えるため、WhatsApp だけでなく様々なログイン方法を提供することができる。
「OTP の作成・保存・削除・検証」「WhatsApp による OTP 送信」「Firebase Auth のカスタムトークン発行」を分けて実装することで、簡単にパターンを増やせるようになる。
以上です。