【Supabase】 Flutter + Supabase Authentication で Phone Login(SMS)のサインアップ・サインイン処理のサンプルを作った【Flutter】

fvm flutter doctor
Doctor summary (to see all details, run flutter doctor -v):
[✓] Flutter (Channel stable, 3.13.7, on macOS 14.1 23B74 darwin-arm64, locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
[✓] Xcode - develop for iOS and macOS (Xcode 15.0)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2022.3)
[✓] VS Code (version 1.83.1)
[✓] Connected device (4 available)
[✓] Network resources

• No issues found!

検証端末

端末名	version
Google Pixel 3a	Android 12
iPhone X	iOS 16.6

大まかな手順

Phone Loginを実装するにあたって、以下に手順の大枠を記載致します。

CPaaSの選定
CPaaSの設定とSupabaseとの連携
クライアントコードの実装

CPaaSとは、下記サイトに記載されているように音声通話やSMS、通あ録音・音声認識などのサービスをAPIで利用することができるサービスのことを指します。

【技術解説】CPaaS（Communications Platform as a Service） | ソリューションサービス | NextGen

CPaaS(Communications Platform as a Service)の選定

SupabaseでSMS認証を送る為には、SMS認証が可能なCPaaSを利用してSupabaseと連携する必要があるので、利用するCPaaSを選定します。

現在Supabaseの公式ガイドに記載されているCPaaSは以下の通りです。

実際のSupabaseのプロバイダ設定画面にはtextlocalというCPaaSも選択可能なようですが、公式のガイドに記載されていない為、今回候補から除外しています。

Google Trendsで見た所、一番知名度のあるTwilioを使用することにします。

Supabaseのガイドページ

SMS 認証は、Twilio Verify または Twilio Programmable Messaging のいずれかを使用して実行できます。Twilio Verify は特殊な OTP ソリューションであり、電話による認証を必要とするほとんどの開発者に推奨されます。あるいは、一般的な SMS 送信サポートを提供するTwilio Programmable Messagingを使用することもできます。

とのことなので、今回はこちらのページを参考に Twilio Verifyを使用してPhone Loginの設定を行っていきます。

Twilio Verifyでのlimitと使用可能な送信可能なチャンネルについて

Twilio Verifyのリクエストのレート制限とコードの有効期限は下記のようになっています。

コードの有効期間
- デフォルトで 10分間 有効です。サポートに連絡することで、2分から24時間の任意の時間に変更可能です。
ステータスチェックのレート制限
- 1分間に60件のリクエスト
- 1時間で180件のリクエスト
- 1日に250件のリクエスト

詳細は下記ページに記載されています。

https://www.twilio.com/docs/verify/api/rate-limits-and-timeouts

サポートされているチャンネル

Twilioでサポートされているチャンネルはwhatsappとsmsが使用できるとのことです。

whatsapp について、どういったものか知らなかったので調べた所、世界で最も使用されているメッセージングアプリの１つらしく現時点で世界で22億4000万以上のアクティブユーザーがいるとのことです。

SMS vs WhatsApp：ビジネス向け比較【2023年4月版

今回はsms を使用していきます。

導入手順

CPaaS(Twilio)の設定とSupabaseとの連携

Twilioの設定

Twilio アカウントとプロジェクトの作成

まずは、Twilioアカウントにログインし、新しいプロジェクト作成します。

まだTwilioアカウントを作成していない人は、こちらからログインできます。

プロジェクトに名前をつけ、「Verify」をクリックします。

すると2要素認証用の電話番号を入力する画面になりますので携帯電話番号を入力し、「Send Verification Code」をクリックします。

こちらの電話番号は、日本国内の電話番号でも大丈夫です。

すると、6桁のコードを入力する画面になりますので、先ほど入力した電話番号に届いた6桁のコードを入力し「Submit」をクリックします。

するとピエロのキャラクターと使用用途などの質問項目が表示されるので、SMS、Identity & Verification、With code、JavaScript、No, I want to use my own hosting serviceを選択します。

２つ目のあなたの組織は〜〜の質問は当てはまるのを選んでください。

私はHobby~~を選びました。

選択できましたら「Get Started with Twilio」をクリックします。

Twilio Message Service SIDの取得

Supabaseの公式ガイドを見ると、Twilioのコンソール画面へ戻ると、下にスクロールして、「Get a trial phone number」をクリックしすれば良いらしいのですが、私が実際に操作した時はなかったので、別の方法で番号を取得しました。

Twilioのコンソール画面のサイドメニューにある Phone Numbers ＞ Manage ＞ Buy a number をクリックし

その後、ずらーっと番号が表示されるので、とりあえず適当な電話番号の項目の「Buy」をクリックします。

その後表示されるダイアログの最下部のチェックボックスにチェックを入れて「Buy ~~」をクリックします。

購入できると、こちらのメニューから購入した番号が確認できます。

上記ページの+1から始まる番号が、Supabase上で設定する時のTwilio Message Service SIDの値となります。そのままコピペするとスペースが3桁ごとに入りますがそのまま貼り付ければ良いです。

Twilio Account SIDとTwilio Auth Tokenの取得

それではTwilio Account SID と Twilio Auth Tokenの記載箇所を示します。

まずTwilioのコンソールを開いて画面をスクロールすると、Account SID、Auth Token と記載されている箇所があり、それぞれTwilio Account SID、Twilio Auth Tokenとなります。

Twilio Account SIDとTwilio Auth Tokenの記入場所

My Twilio phone numberについては、購入するまでは表示されなかったので表示されていない方は前述したTwilio Message Service SIDの取得の章を参考に電話番号を購入してください。

これで下記３つの情報が集まりました。

Account SID
Auth Token
送信者の電話番号(Twilio Message Service SIDになります)
- この値はverified phone numberから確認可能です。

電話番号のリリース方法

不要になった電話番号は、リリースすることができます。リリースしない場合、月額$1.5かかるので、不要になったらリリースすることをお勧めします。

まず、こちらのメニューからリリースしたい電話番号を確認し、対象の電話番号をクリックします。

すると色々表示されますが、Propertiesタブをクリックすると、右下にRelease phone number と表示されるので、そこから番号をリリーすることができます。

もちろんリリースするとSMS認証ができなくなる為リリースする場合は使用しているサービスがないか確認してからリリースしてください。

Supabaseの設定

プロジェクトの作成

下記記事の「Supabaseプロジェクト作成」の段落に記載されている手順に沿ってSupabaseプロジェクトを作成します。

【Supabase】Flutter + Supabase Authでソーシャルログイン(GitHub)のサンプルを作った【Flutter】 - 狐好きぷろぐらまー

API Keyの取得・設定

下記記事の「API Keyの取得・設定」に記載されている手順に沿ってURLとanonを取得・設定してください。

【Supabase】Flutter + Supabase Authでソーシャルログイン(GitHub)のサンプルを作った【Flutter】 - 狐好きぷろぐらまー

プロバイダの設定

では、Twilio 上で取得したSIDなどをSupabase上に入力していきます。

Supabaseダッシュボードの「認証＞プロバイダー」ページに移動し、認証プロバイダーのリストから「Phone」を選択します。

「Enable Phone Provider」を有効に設定後、SMS providerにTwilioを設定します。
Twilio Acount SID, Twilio Auth Token, Twilio Message Service SIDに先ほど取得した値を設定していきます。

（オプション）SMSカスタムテンプレートの設定

Supabaseの設定内に、送信されるSMSのテンプレートを変更できる箇所がありましたので、そちらから変更が可能です。

クライアント側の実装

上記の設定ができたら、次はFlutter側の実装をしていきます。

パスワードを使用するSMSログインとパスワードを使用しないSMSログインできるようです。今回はパスワードを使用しないSMSログインを試していきます。こちらのコードを参考にDartで実装していきます。

今回実装の主な箇所は下記の箇所です。

指定した電話番号宛にOTPを送信させるコード

await supabase.auth.signInWithOtp(
  phone: _phoneNumberController.text,
);

上記のコードで、phone に渡した電話番号宛に6桁の検証コードを送信します。

OTPを認証するコード

await supabase.auth.verifyOTP(
  phone: _phoneNumberController.text,
  token: _otpController.text,
  type: OtpType.sms,
);

上記のコードで、受信した6桁の検証コードを認証します。

phone: 6桁の検証コードを送信した電話番号
token: 受信した6桁の検証コード
type: OtpType.sms 固定

完成

これで、sms認証ができるようになりました。

お疲れ様でした。

ローカルサーバ側については、気力が回復したら追記します...🫠

まとめ

Flutter + SupabaseでのPhone Loginのサインイン・サインアップの手順は以下の通りです。

Twilioアカウントとプロジェクト作成
TwilioのプロジェクトからTwilio Account SID、Twilio Auth Token、Twilio Message Service SIDを取得
Supabaseプロジェクトの作成
Supabase上のPhone Providerの設定
クライアントコードの実装

Phone LoginはSupabase側で複数のCPaaSがサポートされている為、それぞれ使い慣れているものを使えるのが良さそうです。

雑感

Twilioの設定が初めてだったので、色々操作に戸惑いましたが、なんとかログインするところまで行けました。

CPaaSは下手に使うとお金が無限に飛んでいきそうなので、Phone Loginは必須なサービス以外にはおそらく導入しないかなと思ったりしました。

ただ、チャット周りを全て外部サービスに寄せるということでコストを下げるという意味では良い選択肢になると思うので、その場の状況に応じて使い分けられると良さそうです。

ここまで読んでいただきありがとうございます。

完成版

開発端末