Zenn
🔥

FlutterでFirebaseAuth+FirebaseUIAuthを設定する手順

2024/03/28に公開
Firebase
Flutter
Dart
Firebase Auth
tech
Github ywake/zenn

自分用のため、公式の説明を焼き直してまとめただけな上、自分が使った機能しか書いていません。

リファレンス

インストール

flutter pub add firebase_auth firebase_ui_auth firebase_ui_localizations

多言語対応

MaterialApp.localizationsDelegatesにFirebaseUILocalizations.delegateを追加します。

class MyApp extends ConsumerWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final router = ref.watch(routerProvider);
    return MaterialApp.router(
      title: 'My App',
      routerConfig: router,
      localizationsDelegates: [
        ...context.localizationDelegates,
+       FirebaseUILocalizations.delegate, // 追加
      ],
      supportedLocales: context.supportedLocales,
      locale: context.locale,
    );
  }
}

easy_localizationやflutter_riverpod, go_routerを使っている場合の例です。

メールリンクサインイン

こちらで
https://zenn.dev/wake/articles/flutter-firebase-auth-with-email-link

Google Sign In

公式ドキュメント

flutter pub add firebase_ui_oauth_google

Firebaseの設定

Firebaseのコンソール上でAuthenticationのログインプロバイダにGoogleを追加します。

  • Android用にSHA-1の設定が必要なので下の項目で説明します。
  • iOS用にはGoogleService-Info.plistを更新する必要があります。

Android用設定

  1. SHA-1の設定
    keytool -list -v -keystore ~/.android/debug.keystore -alias androiddebugkey -storepass android -keypass android
    で取得したSHA-1をFirebaseのAndroidアプリに登録します。
  2. OAuth同意画面の必須項目を設定します。
    • デベロッパーの連絡先情報が必須ですが、入力されていない場合がありますので入力します。
    • 他の項目も必要に応じて入力します。

iOS用設定

CFBundleURLTypes属性をios/Runner/Info.plistに追加します。

	<key>CFBundleURLTypes</key>
	<array>
		<dict>
			<key>CFBundleTypeRole</key>
			<string>Editor</string>
			<key>CFBundleURLSchemes</key>
			<array>
				<!-- TODO Replace this value: -->
				<!-- Copied from GoogleService-Info.plist key REVERSED_CLIENT_ID -->
				<string>[YOUR REVERSED CLIENT ID]</string>
			</array>
		</dict>
	</array>

Dart実装

SignInScreen(
  providers: [
    GoogleProvider(clientId: '', iOSPreferPlist: true),
  ],
);

Sign in with Apple

公式ドキュメント

flutter pub add firebase_ui_oauth_apple

Firebaseの設定

Firebaseのコンソール上でAuthenticationのログインプロバイダにAppleを追加します。

  • Android/Webでも有効にするには設定が必要です。下の項目で説明します。
  • Darwin向けにはFirebase上の設定は特にありません。

Android/Webの設定

Firebaseの設定に必要なのは4つあります。
手順は長いので折りたたみますが、ポチポチするだけです。

  • Sign in with Apple用のServiceID
    ServiceIDの取得
    1. Certificates, Identifiers & ProfilesのIdentifiersにアクセスします。
    2. +ボタンをクリックしてServiceIDを作成します。descriptionとidentifierを入力して作成を完了します。
      • descriptionはログイン画面にサービス名として表示される名前になります。

    3. 今作成したServiceIDが一覧にあると思うのでそれをクリックします。
    4. Sign In with Appleにチェックを入れてConfigureをクリックします。
      1. Primary App IDには今回紐づけるアプリのBundle IDを入力します。
      2. Domains and Subdomainsには<your-firebase-project-id>.firebaseapp.comを入力します。
      3. Return URLsにはhttps://<your-firebase-project-id>.firebaseapp.com/__/auth/handlerを入力します。これはFirebaseコンソールでAppleのプロバイダ設定をする際にコピーできます。
    5. 設定が終わったらContinue → Saveで設定を保存します。
    6. 先ほど設定したServiceIDをFirebaseのコンソールのAppleのプロバイダ設定に追加すれば完了です。
  • Team ID → こちらで確認
  • Key ID と 秘密鍵
    作成方法

    既にPush通知用などで秘密鍵を持っている場合はそれを使っても構いません。

    1. 今度はCertificates, Identifiers & ProfilesのKeysにアクセスします。
    2. +ボタンをクリックしてKeyを作成します。
      1. Key Nameに任意の名前を入力します。
      2. Sign in with Appleにチェックを入れます。
      3. ConfigureからPrimary App IDに今回紐づけるアプリのBundle IDを選択します。
      4. 戻ってContinue → Registerで設定を完了します。
      5. KeyをDownloadします。1度しかできないので安全な場所にバックアップしておきます。
      6. また、Key IDが作られるのでこれもメモします。

用意できたらFirebaseコンソールに戻り、Appleのプロバイダ設定にOAuth コードフローの構成（省略可）に追加してください。
省略可ありますが、AndroidとWebで使うには必要です。

iOSの設定

  1. Xcode上でSign in with Appleを有効にします。
open ios/Runner.xcworkspace
  1. Signing & Capabilitiesタブを開き、「+ Capability」から「Sign in with Apple」を追加します。
  2. Firebaseのコンソール上でSign in with Appleを有効にします。

Dart実装

SignInScreen(
  providers: [
    AppleProvider(),
  ],
);

<!--

匿名メールアドレスの転送設定

登録に利用されるランダムなメールアドレスとやりとり出来るメールアドレスやドメインを設定します。

  1. Certificates, Identifiers & ProfilesのServicesからSign in with Apple for Email CommunicationのConfigureをクリックします。
  2. +ボタンをクリックしてEmail Domainを追加します。
    1. Domainにはやり取りしたいメールアドレスのドメインがあれば入力します。
    2. Email Addressにnoreply@<your-firebase-project-id>.firebaseapp.comかカスタムしている場合はそれを入力します。

      -->

関連記事

Discussion