FlutterFlowでGoogleログインを実装しよう

FlutterFlowでGoogleログインを実装する方法を解説します。FlutterFlowでは非常に簡単にGoogleログインを実装できますので是非このブログをみてトライしてみてください。

前提

• FlutterFlowとFirebaseとの接続は完了済み

実装手順

FirebaseでGoogle認証追加

• Authentication配下でログイン方法（ログインプロバイダ）でGoogleを追加

• 「有効にする」にチェック。プロジェクトの公開名とサポートメールを登録。

• ログインプロバイダにGoogleが追加されています。

• FlutterFlowのドメインを承認済みドメインに追加してください。
  以下のようにFirebaseのAuthentication→設定→承認済みドメインで登録できます。
• 追加するドメインは「app.flutterflow.io」です。

• これでFirebase上での設定は完了です

FlutterFlowでログイン機能実装

FlutterFlow上でGoogleログインを実施する機能を具備します。といいつつ、テンプレートを使えばすでに組み込まれていたりします。

以下のようにGoogleログインがあるテンプレートを選びます。
既にActionで”Create Account”、Auth Providerに”Google”が設定されています。

これでいったん完成です。

試験すると？

実装はできていますが、試験をすると以下のエラーが出ます。

Error:This domain is not authorized for OAuth operations for your Firebase project. Edit the list of authorized domains from the Firebase console.

これには悩まされました、、、

原因はfirebaseに登録したドメインが足りていないことです。app.flutterflow.ioだけではうまく動きません。
以下のドメインもfirebase > Authentication > 設定 >承認済みドメイン追加してください。
ff-debug-service-frontend-free-ygxkweukma-uc.a.run.app

ブラウザのコンソールでチェックすると以下のようなエラーが表示されているのがわかります。おそらく、近いうちにこの問題は改善されそうな気がしますが、もし問題に遭遇された際はお試しください。

追加したのちに、Googleログインを実行すると無事、ログインすることが出来ました。
ユーザーも無事追加されていました。

まとめ

今回はFlutterFlowでGoogleログインを実装する手順をご紹介しました。実装自体はめちゃくちゃ簡単だったと思います。私の場合はドメインエラーの問題があり、１時間ほど悩みましたが、、、

ご不明点、ご相談などあればお気軽にお問合せください。