はじめに
今回は、Googleサインインの実装方法をご紹介します。
Googleサインインは他のソーシャルログインと比べても実装される頻度の高い機能です。また、FlutterFlowではBubbleでOAuth2を利用する方法よりも簡単にGoogleサインインを実装できます。
それでは、早速導入手順をご紹介していきます。
Firebaseの導入
Firebaseの導入は本ブログの記事「FlutterFlowでFirebase Authenticationを導入する方法」でご紹介している手順に沿って進めていきます。
下記が、参考記事で紹介しているFirebaseの導入手順5ステップと本記事で必要な手順です。「参考記事の通り」のステップは参考記事の通り、それ以外は本記事を参考にして設定を行ってください。
- 「Firebaseプロジェクトの作成」…参考記事の通り
- 「Firebase Authentication（認証）の設定」…今回特有手順
- 「Firebase Cloud Firestore（データベース）の設定」…参考記事の通り
- 「FlutterFlowプロジェクトの作成」…参考記事の通り
- 「FlutterFlowとFirebaseの連携」…一部追加手順あり
1.Firebaseプロジェクトの作成
Firebaseコンソールでプロジェクトが作成出来たら、自動でプロジェクトの概要ページに遷移します。
2.Firebase Authentication（認証）の設定
参考記事の「Step2. Firebase Authenticationの設定」はメールアドレスとパスワードでの認証実装のための手順ですが、今回はGoogleサインインに必要な設定を行います。
まずは認証方法にGoogle認証を追加します。プロジェクトの概要ページのナビゲーションメニューから「構築」>「Authentication」をクリックします。
画面の「始める」ボタンをクリックし、サインイン方法の選択で「Google」をクリックします。
次の画面でGoogleのスイッチをオンにして、プロジェクトの公開名（今回はデフォルト設定のまま）、プロジェクトのサポートメールを設定し、画面右下の「保存」をクリックします。
Googleが有効になっていますね。
次に、FlutterFlowのドメインを承認済みドメインに登録します。ナビゲーションメニューの「構築」>「Authentication」の画面で画面上部のタブ「Settings」>「承認済みドメイン」を開き、「ドメインの追加」ボタンをクリックします。
開いたポップアップで下記のドメインを入力し、「追加」ボタンをクリックします。
- 追加ドメイン…
app.flutterflow.io
承認済みドメインの一覧に追加されていれば完了です。
3.Firebase Cloud Firestore（データベース）の設定
※参考：Step3. Firebase Cloud Firestore（データベース）の設定
設定後、Cloud firestoreのデータ画面が表示されたら完了です。
4.FlutterFlowプロジェクトの作成
※参考：Step4. FlutterFlowプロジェクトの作成
FlutterFlowでプロジェクトが作成できれば完了です。
ちなみに、Firebase setupで必要なFirebaseのプロジェクトIDは、Firebaseコンソールの「プロジェクトの設定」>「全般」の画面で確認できます。
5.FlutterFlowとFirebaseの連携
※参考：Step5. FlutterFlowとFirebaseの連携
上記記事の「5.1.Firebaseに接続許可」でユーザーを追加したら、さらに詳細な権限を設定します。画面右下の「権限に関する詳細設定」をクリックします。
開いたGoogle Cloudのページで、先ほど追加したfirebase@flutterflow.ioの編集アイコンをクリックし、権限編集画面で下記の2つのロールを追加します。
【追加するロール】
- Cloud Functions 管理者
- サービス アカウント ユーザー
引き続きStep5の手順を全て実行してください。
ページの作成
ここまで完了したら準備は完了です。ここからはFlutterFlowでページを作成していきましょう。
-
今回作成するページ
サインイン、ホーム
サインインページ
サインインページはテンプレートを利用して作成していきます。ナビゲーションメニューの「Page selector」>「New Page」アイコンをクリックし、開いた画面でGoogleサインインのテンプレートページを探します。今回は「Auth」>「Login 3」のテンプレートを使用します。「Use Template Theme」をクリックするとテンプレートが適用されます。ページ名は「Signin」にしました。
それでは、ページを完成させましょう。まずは今回不要なボタンや入力欄、テキストを削除し、ボタンは「Continue with Google」のみが残った状態にします。
次に、下記の通りレイアウトを調整します。
- formContainer>Child Alignment…上下左右中央
- spacing>Padding…上部Paddingを「0」
ホームページ
サインイン後に遷移するホームページを作成します。このページはFlutterFlowプロジェクト作成時に自動で作成されたHomePageで作成します。
まず、AppBarとTextしかない状態にしたらContainerを配置し、以下を参考にプロパティを設定します。
- Container Properties>Width/Height…100%
- Child>Child Alignment…上下トップ、左右中央に設定します。
Container内にTextを2つとButtonを1つ配置し、表示内容を下記の通り設定します。
- Text1…「Googleでサインインしました。」
- Text2…「Email」※Set from Variableの「Authenticated User」>「Email」
- Button…「ログアウト」
これでページの作成は完了です。
アクションの設定
各ページでアクションを設定していきます。
サインインページ
Signinページのアクションを設定していきます。サインインページで実装するアクションは下記のとおりです。
- 「Continue with Google」ボタンをクリック→Googleサインイン
「Continue with Google」ボタンのAction Flow Editorを開き、Aciton1でGoogleサインインアクションが設定できているか確認します。
- Action1…Create Account
- Auth Provider…Google
- Create User…Yes
- Collection…users
ホームページ
サインイン後に遷移するHomePageのアクションを設定します。ここで設定するアクションは下記の内容です。
- 「ログアウト」ボタンをクリック→ログアウト
「ログアウト」ボタンをクリックし、Action Flow Editorを開きます。
下記を参考にアクションを設定してください。
- Action1…Logout
これでアクションの設定も完了です。
エラー解消
設定が完了しましたので、エラーを解消しましょう。
Isues>Errorsが2件表示されています。上の「Auth Page Setup」をクリックして修正箇所を開きます。
Settings and Integrations>App Detailsが開きます。Initial Pageが未設定だったことが原因のようです。
今回はそれぞれ下記の通り設定します。
- Entry Page…Signin
- Logged in Page…HomePage
エラーが解消されました。
ちなみに、Entry PageとLogged in Pageを設定することで、Googleサインイン後のホームページへの遷移やログアウト後のサインインページへの遷移が自動で行われます。
動作確認
全ての設定が完了したので動作確認を行います。ツールバーの一番右にある下向き矢印のボタンをクリックし、「Run」ボタンをクリックします。
※TestモードではGoogleサインインの検証はできないのでご注意ください。
新規タブでサインインページがRunモードで表示されたら、Googleサインインボタンをクリックします。
Googleサインインのアカウント選択ポップアップが表示されるので、アカウントを選択してログインします。
ホームではサインインしたGoogleアカウントのGメールアドレスが表示されています。
確認できたら、ログアウトボタンをクリックしてみます。サインインページに戻って来られれば成功です。
念のため、firebaseのusersにアカウントが登録されているか確認してみます。Firabaseコンソールの「構築」>「Firestore Database」を開き、先ほどのアカウントが登録されていれば成功です。
まとめ
Googleサインインの実装方法についてはFlutterFLow公式ドキュメントでも確認することができます。ネイティブアプリで実装する際に必要な手順も紹介されているのでご覧ください。
Discussion