こんにちは。pregum_foxです。 今回はFlutterでSocial Login(Facebook)のサンプルを作成していきます。 前回はSocial Login(Google)のサンプルを作成しました。
今回は下記のSocial Login(Facebook)のサンプルを作成します。
他の認証サンプルを見たい場合は下記記事から確認できます。
それでは目次です。
開発端末
| 項目 | 内容 |
|---|---|
| OS | M1 Mac |
| Flutter | 3.13.17 |
fvm flutter doctor Doctor summary (to see all details, run flutter doctor -v): [✓] Flutter (Channel stable, 3.13.7, on macOS 14.1.1 23B81 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.1) [✓] Chrome - develop for the web [✓] Android Studio (version 2022.3) [✓] VS Code (version 1.84.2) [✓] Connected device (4 available) [✓] Network resources • No issues found!
検証端末
| 端末名 | version |
|---|---|
| Google Pixel 3a | Android 12 |
| iPhone X | iOS 16.7.2 |
Facebookログインを導入するための大まかな手順
こちらのページに手順が記載されておりましたので今回はこちらの手順に沿って実装していきます。
アプリケーションのFacebook ログインの設定は、次の3つの部分で構成されます。
Facebook 開発者サイトで Facebook アプリケーションを作成および構成する Facebook キーをSupabase プロジェクトに追加する ログイン コードをアプリに実装します。
以前は下記のようなプラグインを入れる必要がありましたが、単純なログイン機能だけを実装したい場合は、supabase_flutter のみで行けましたので、今回はsupabase_flutter のみ使用して実装しております。
flutter_facebook_auth | Flutter Package
アプリ内WebViewでログインしたい要件がある場合は、上記のプラグインを入れる必要があります。
サンプルで作成したリポジトリ
今回の機能を実装したリポジトリはこちらです。
上記のリポジトリをクローン後、下記手順のコード以外の設定を行っていただくことで、確認ができます。
必要なもの
- Facebook アカウント
- Supabaseアカウント
- Supabaseプロジェクト
具体的な手順
1. Facebook 開発者アカウントにアクセスします。
Developer.facebook.com にアクセスします。
右上のLog In をクリックしてログインします。
2. Facebook アプリを作成
アプリ一覧画面 へ移動します。
右上付近のアプリを作成 をクリックします。
アプリの種類を選択し、次へ をクリックします。
私は、「ユーザーにFacebookアカウントでのログインを許可する。」を選択しました。
アプリ名を入力し、アプリを作成 をクリックします。
メールアドレスは、自動で入っているものを使用しました。
クリックすると、ダッシュボード画面へ遷移します。
3. FacebookアプリのFacebook ログインをセットアップする
このステップでは、次のようなコールバックURLが必要です。
https://<project-ref>.supabase.co/auth/v1/callback
Supabaseプロジェクトのダッシュボード に移動します。
左側のサイドバーのAuthentication のアイコンをクリックします。
「Configuration」セクションの下にあるProviders をクリックします。
アコーディオンリストから Facebook をクリックして展開後、 リダイレクトURL が表示されますので、 Copy をクリックしてクリップボードにコピーします。
ユースケース へ遷移します。
認証とアカウント作成の項目のカスタマイズ をクリックします。
Facebook ログインの下にある 設定に移動 ボタンをクリックします。
クライアントOAuth設定セクションの有効なOAuthリダイレクトURI の下にコールバックURIを入れます。
右下の変更を保存 ボタンをクリックします。
4. emailの取得権限を設定
次にfacebookのメールアドレスを取得できるように設定します。
Supabaseのページにサードパーティの権限設定について記載がありましたので引用致します。
サードパーティのアプリケーションが電子メール アドレスを読み取ることができるようにするには、適切なユースケース権限を設定する必要があることに注意してください。
ユースケース 画面をクリックします。
認証とアカウント作成 の項目のカスタマイズ をクリックします。
public_profile がデフォルトで設定されているため、遷移先のページでemail ステータスが「テスト準備完了」になっていることを確認してください。
そうでない場合は、右側の電子メールの追加 ボタンをクリックします。
追加 ボタンをクリック後 ステータスがテスト準備完了 に変更されていればOKです。
アプリの設定 から ベーシックをクリックします。
遷移後、画面上部からアプリIDをコピーします。 こちらの値が次の手順で使用する FacebookクライアントID となります。
app secretの表示 ボタンをクリックして、シークレットキーをコピーします。
表示ボタンクリック時、パスワードを聞かれることがあるのでパスワードを入力します。
こちらの値が次の手順で使用する Facebook クライアントシークレット となります。
5. Facebook アプリID とシークレットを Supabase プロジェクトに入力
Supabase プロジェクトのダッシュボードに移動します。
左側のサイドバーから Authentication アイコンをクリックします。
Configuration セクションの下にある Providers をクリックします。
アコーディオンリストから Facebook をクリックして、展開し Facebook Enabled をクリックします。
前の手順で保存したFacebookクライアントIDとFacebook クライアントシークレットを入力します。
全て記入できましたら、Save をクリックします。
6. アプリのリダイレクトの設定
Facebookログイン成功後、ブラウザからアプリへ遷移させる為にこちらの設定が必要となります。
1から設定する場合は、
- Supabase側の設定
- アプリ側の設定
があります。
今回使用するコールバックのURLは以下のURLを使用する想定で進めます。
io.supabase.flutterquickstart://login-callback/
下記はこちら の記事で解説されている名称で説明すると
<scheme><authority> となっていてauthorityを分割すると
`
今回は<scheme><host> で構成されたURLを設定しています。
上記の名称はAndroid側の設定などで出てくることがあるので、覚えておいて損はないでしょう。
schemeは逆ドメイン名 で設定しており、本来はアプリのapplicationId（com.co.fluttersampleのような）を使用するのが良いのですが、今回はSupabaseのサンプルで使用されているschemeをそのまま使用します。
Supabase側の設定
- Redirect URLsを設定します。
以前作成した記事 をそのまま載せています。
Supabaseプロジェクトの「Authentication」＞「URL Configuration」を開きます。 その後、「Add URL」をクリック
するとダイアログが表示されるので、io.supabase.flutterquickstart://login-callback/ を設定し、「Add URL」をクリックします。
ダイアログが閉じ、「Redirect URLs」の欄に追加されていればOKです。
アプリ側の設定
以前作成した記事の一部をそのまま載せております。
Android
Androidは、リポジトリ直下のディレクトリからandroid/app/src/main/AndroidManifest.xml に記載しています。
こちらのintent-filter > data タグ にscheme(https: や io.supabase.flutterquickstart:)とhost(login-callbackやcallback) が記載されています。
iOS
iOSは、リポジトリ直下のディレクトリからios/Runner/Info.plist に記載されています。
ちなみにDeep Linkに独自機能を盛り込んだものにiOSはUniversal Links、AndroidはApp Linksという機能がありますが、細かい違いとしては下記機能が含まれています。
ブラウザで特定のドメインのサイトを開いた時、自動的にアプリへ遷移させる機能も含まれています。 違いについて説明されているサイトがありましたのでこちらに記載します。
ディープリンク、ユニバーサルリンク、アプリリンクとかの話 | am10ぶろぐ
ここまで設定できていましたら後はコードの実装でリダイレクト先を指定すればログイン後、自動的にアプリに遷移してくれるようになります。便利ですね。
6.クライアントコードを実装
それではアプリ側で呼び出す処理を実装します。
Facebook ログインで使用しているコードはこちらです。
await supabase.auth.signInWithOAuth( Provider.facebook, redirectTo: 'io.supabase.flutterquickstart://login-callback/', );
こちらだけで、ブラウザが起動してFacebookのログイン画面へ遷移後、ログイン成功後、自動的にアプリへリダイレクトされるようになっています。
気をつけないといけない点は
Provider.facebookを指定することredirectTo引数に設定するredirect urlは一言一句 正確に設定すること
ぐらいです。
redirect urlは最後の/ が入っていないだけでも飛んでくれなくなるので、正確に設定してください。
完成
以上で、Facebookサインアップ・サインインの実装が完成しました。
後は、以下のような要件がアプリによって出てくると思いますので、頑張って調べてもらえればと思います。
- ログイン時にアプリ側の名前を送りたい
- metadataの引数があるので、そこに'username' などで送ってあげると良いです。
- 権限を指定したい
- 同じメルアドですでに別プロバイダでサインインされていたらそのプロバイダを使用させる旨のメッセージを出す
等
雑感
以前実装した時は色々プラグインを入れないといけなかったりしたので、supabaseだけで済むのはだいぶ楽だなと思いました。
ここまで読んでいただきありがとうございました。
