📑

FlutterFlow - Google SignInのリダイレクトドメインをカスタマイズする

2024/03/13に公開

FlutterWeb

FlutterFlow

tech

はじめに

Google SignInのリダイレクトドメインを設定する方法を解説します。

プロジェクトの作成時に、Firebase は次のようなプロジェクト固有のサブドメインをプロビジョニングします。https://my-app-12345.firebaseapp.com

これは、OAuth ログインのリダイレクトメカニズムとしても使用されます。このドメインは、サポートされているすべての OAuth プロバイダに許可される必要があります。この場合、ユーザーが Google にログインしている間、アプリケーションにリダイレクトする前に、Continue to: https://my-app-12345.firebaseapp.com のようにドメインを含むメッセージが表示される可能性があります。

サブドメインが表示されないようにするには、Firebase Hosting でカスタムドメインを設定します。

基本的には、下の記事にある「Google ログインのリダイレクトドメインのカスタマイズ」の手順に沿って設定していけばOKですが、FlutterFlow特有の問題もあったで、その辺りを解説しています。

やること

1. Hosting 用にドメインを設定する

Hosting 用にドメインを設定するの手順 1～3 を行います。ドメインの所有権を確認すると、Hosting はカスタムドメイン向けに SSL 証明書をプロビジョニングします。

2. 承認済みドメインのリストにカスタムドメインを追加する

Firebase コンソールで、承認済みドメインのリストにカスタムドメイン auth.custom.domain.com を追加します。

3. リダイレクトページの URLを許可リストに登録する

Google のデベロッパーコンソールで、リダイレクトページの URL（　https://auth.custom.domain.com/__/auth/handler ）を承認済みのリダイレクト URIに登録します。これにより、カスタムドメインでアクセス可能になります。

4. FlutterFlowのコードをダウンロードする

FlutterFlowのコードをダウンロードする手順はこちらを参照してください。

5. authDomain フィールドにカスタムドメインを指定する

4.でダウンロードした config ファイルにある、authDomain フィールドにカスタムドメインを指定します。

lib/
│
├── backend/
│   ├── firebase/
│       ├── firebase_config.dart/

import 'package:firebase_core/firebase_core.dart';
import 'package:flutter/foundation.dart';

Future initFirebase() async {
  if (kIsWeb) {
    await Firebase.initializeApp(
        options: FirebaseOptions(
            apiKey: "...",
            // Changed from "my-app-12345.firebaseapp.com".
            authDomain: "auth.custom.domain.com",
            projectId: "my-app-12345",
            storageBucket: "my-app-12345.appspot.com",
            messagingSenderId: "1234567890",
            appId: "...",
            measurementId: "..."));
  } else {
    await Firebase.initializeApp();
  }
}

6. FlutterFlowアプリをデプロイする

下の記事を参考に、Firebase Hosting を使ってデプロイします。