<h1 id="%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB">
<a class="header-anchor-link" href="#%E3%81%AF%E3%81%98%E3%82%81%E3%81%AB" aria-hidden="true"></a> はじめに</h1>
<p>今回は、Googleサインインの実装方法をご紹介します。<br>
Googleサインインは他のソーシャルログインと比べても実装される頻度の高い機能です。また、FlutterFlowではBubbleでOAuth2を利用する方法よりも簡単にGoogleサインインを実装できます。<br>
それでは、早速導入手順をご紹介していきます。</p>
<h1 id="firebase%E3%81%AE%E5%B0%8E%E5%85%A5">
<a class="header-anchor-link" href="#firebase%E3%81%AE%E5%B0%8E%E5%85%A5" aria-hidden="true"></a> Firebaseの導入</h1>
<p>Firebaseの導入は本ブログの記事「<a href="https://zenn.dev/nocodelab/articles/0a4533811fb099" target="_blank">FlutterFlowでFirebase Authenticationを導入する方法</a>」でご紹介している手順に沿って進めていきます。<br>
下記が、参考記事で紹介しているFirebaseの導入手順5ステップと本記事で必要な手順です。「参考記事の通り」のステップは参考記事の通り、それ以外は本記事を参考にして設定を行ってください。</p>
<ol>
<li>「Firebaseプロジェクトの作成」…参考記事の通り</li>
<li>「Firebase Authentication（認証）の設定」…今回特有手順</li>
<li>「Firebase Cloud Firestore（データベース）の設定」…参考記事の通り</li>
<li>「FlutterFlowプロジェクトの作成」…参考記事の通り</li>
<li>「FlutterFlowとFirebaseの連携」…一部追加手順あり</li>
</ol>
<h2 id="1.firebase%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#1.firebase%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> 1.Firebaseプロジェクトの作成</h2>
<p>※参考：<a href="https://zenn.dev/nocodelab/articles/0a4533811fb099#step1.-firebase%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90" target="_blank">Step1. Firebaseプロジェクトの作成</a></p>
<p><a href="https://console.firebase.google.com/u/0/?hl=ja" target="_blank" rel="nofollow noopener noreferrer">Firebaseコンソール</a>でプロジェクトが作成出来たら、自動でプロジェクトの概要ページに遷移します。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/441656d1a32d-20230620.jpg" alt loading="lazy" class="md-img"></p>
<h2 id="2.firebase-authentication%EF%BC%88%E8%AA%8D%E8%A8%BC%EF%BC%89%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#2.firebase-authentication%EF%BC%88%E8%AA%8D%E8%A8%BC%EF%BC%89%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> 2.Firebase Authentication（認証）の設定</h2>
<p>参考記事の「Step2. Firebase Authenticationの設定」はメールアドレスとパスワードでの認証実装のための手順ですが、今回はGoogleサインインに必要な設定を行います。</p>
<p>まずは認証方法にGoogle認証を追加します。プロジェクトの概要ページのナビゲーションメニューから「構築」&gt;「Authentication」をクリックします。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/b61a405ce5b7-20230620.png" alt loading="lazy" class="md-img"></p>
<p>画面の「始める」ボタンをクリックし、サインイン方法の選択で「Google」をクリックします。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/ded43681a610-20230620.png" alt loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/80123b58a7d5-20230621.png" alt loading="lazy" class="md-img"></p>
<p>次の画面でGoogleのスイッチをオンにして、<strong>プロジェクトの公開名</strong>（今回はデフォルト設定のまま）、<strong>プロジェクトのサポートメール</strong>を設定し、画面右下の「保存」をクリックします。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/4fded445276e-20230621.png" alt loading="lazy" class="md-img"></p>
<p>Googleが有効になっていますね。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/3ee0e91d0b87-20230620.png" alt loading="lazy" class="md-img"></p>
<p>次に、<strong>FlutterFlowのドメインを承認済みドメインに登録</strong>します。ナビゲーションメニューの「構築」&gt;「Authentication」の画面で画面上部のタブ「Settings」&gt;「承認済みドメイン」を開き、「ドメインの追加」ボタンをクリックします。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/1687b87a135a-20230621.png" alt loading="lazy" class="md-img"></p>
<p>開いたポップアップで下記のドメインを入力し、「追加」ボタンをクリックします。</p>
<ul>
<li>追加ドメイン…<code>app.flutterflow.io</code>
</li>
</ul>
<p><img src="https://storage.googleapis.com/zenn-user-upload/cbf8b25d5ffc-20230621.png" alt loading="lazy" class="md-img"></p>
<p>承認済みドメインの一覧に追加されていれば完了です。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/6a0a776c2080-20230621.png" alt loading="lazy" class="md-img"></p>
<h2 id="3.firebase-cloud-firestore%EF%BC%88%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%EF%BC%89%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#3.firebase-cloud-firestore%EF%BC%88%E3%83%87%E3%83%BC%E3%82%BF%E3%83%99%E3%83%BC%E3%82%B9%EF%BC%89%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> 3.Firebase Cloud Firestore（データベース）の設定</h2>
<p>※参考：<a href="https://zenn.dev/nocodelab/articles/0a4533811fb099#step3.-firebase-cloud-firestore%E3%81%AE%E8%A8%AD%E5%AE%9A" target="_blank">Step3. Firebase Cloud Firestore（データベース）の設定</a></p>
<p>設定後、Cloud firestoreのデータ画面が表示されたら完了です。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/064d66a599ec-20230705.jpg" alt loading="lazy" class="md-img"></p>
<h2 id="4.flutterflow%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#4.flutterflow%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> 4.FlutterFlowプロジェクトの作成</h2>
<p>※参考：<a href="https://zenn.dev/nocodelab/articles/0a4533811fb099#step4.-flutterflow%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E4%BD%9C%E6%88%90" target="_blank">Step4. FlutterFlowプロジェクトの作成</a></p>
<p>FlutterFlowでプロジェクトが作成できれば完了です。</p>
<p>ちなみに、Firebase setupで必要なFirebaseのプロジェクトIDは、Firebaseコンソールの「プロジェクトの設定」&gt;「全般」の画面で確認できます。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/b3c210125504-20230705.png" alt loading="lazy" class="md-img"></p>
<h2 id="5.flutterflow%E3%81%A8firebase%E3%81%AE%E9%80%A3%E6%90%BA">
<a class="header-anchor-link" href="#5.flutterflow%E3%81%A8firebase%E3%81%AE%E9%80%A3%E6%90%BA" aria-hidden="true"></a> 5.FlutterFlowとFirebaseの連携</h2>
<p>※参考：<a href="https://zenn.dev/nocodelab/articles/0a4533811fb099#step5.-flutterflow%E3%81%A8firebase%E3%81%AE%E9%80%A3%E6%90%BA" target="_blank">Step5. FlutterFlowとFirebaseの連携</a></p>
<p>上記記事の「5.1.Firebaseに接続許可」でユーザーを追加したら、さらに詳細な権限を設定します。画面右下の「権限に関する詳細設定」をクリックします。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/9fb4c5159960-20230705.png" alt loading="lazy" class="md-img"></p>
<p>開いたGoogle Cloudのページで、先ほど追加した<code>firebase@flutterflow.io</code>の編集アイコンをクリックし、権限編集画面で下記の2つのロールを追加します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/a4387aa1f5d1-20230705.png" alt loading="lazy" class="md-img"><br>
<img src="https://storage.googleapis.com/zenn-user-upload/68ee91c05b7b-20230705.png" alt loading="lazy" class="md-img"></p>
<p><strong>【追加するロール】</strong></p>
<ul>
<li>Cloud Functions 管理者</li>
<li>サービス アカウント ユーザー</li>
</ul>
<p>引き続きStep5の手順を全て実行してください。</p>
<h1 id="%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E4%BD%9C%E6%88%90">
<a class="header-anchor-link" href="#%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%AE%E4%BD%9C%E6%88%90" aria-hidden="true"></a> ページの作成</h1>
<p>ここまで完了したら準備は完了です。ここからはFlutterFlowでページを作成していきましょう。</p>
<ul>
<li>
<strong>今回作成するページ</strong><br>
サインイン、ホーム</li>
</ul>
<h2 id="%E3%82%B5%E3%82%A4%E3%83%B3%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8">
<a class="header-anchor-link" href="#%E3%82%B5%E3%82%A4%E3%83%B3%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8" aria-hidden="true"></a> サインインページ</h2>
<p>サインインページはテンプレートを利用して作成していきます。ナビゲーションメニューの「Page selector」&gt;「New Page」アイコンをクリックし、開いた画面でGoogleサインインのテンプレートページを探します。今回は「Auth」&gt;「Login 3」のテンプレートを使用します。「Use Template Theme」をクリックするとテンプレートが適用されます。ページ名は「Signin」にしました。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/21fc528b76c2-20230622.png" alt loading="lazy" class="md-img"></p>
<p>それでは、ページを完成させましょう。まずは今回不要なボタンや入力欄、テキストを削除し、ボタンは「Continue with Google」のみが残った状態にします。<br>
次に、下記の通りレイアウトを調整します。</p>
<ul>
<li>formContainer&gt;Child Alignment…上下左右中央</li>
<li>spacing&gt;Padding…上部Paddingを「0」</li>
</ul>
<p><img src="https://storage.googleapis.com/zenn-user-upload/8ed6cf8c7857-20230703.png" alt loading="lazy" class="md-img"></p>
<h2 id="%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8">
<a class="header-anchor-link" href="#%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8" aria-hidden="true"></a> ホームページ</h2>
<p>サインイン後に遷移するホームページを作成します。このページはFlutterFlowプロジェクト作成時に自動で作成されたHomePageで作成します。</p>
<p>まず、AppBarとTextしかない状態にしたらContainerを配置し、以下を参考にプロパティを設定します。</p>
<ul>
<li>Container Properties&gt;Width/Height…100%</li>
<li>Child&gt;Child Alignment…上下トップ、左右中央に設定します。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/305e33e547c3-20230703.png" alt loading="lazy" class="md-img"><img src="https://storage.googleapis.com/zenn-user-upload/f68171523684-20230703.png" alt loading="lazy" class="md-img">
</li>
</ul>
<p>Container内にTextを2つとButtonを1つ配置し、表示内容を下記の通り設定します。</p>
<ul>
<li>Text1…「Googleでサインインしました。」</li>
<li>Text2…「Email」※Set from Variableの「Authenticated User」&gt;「Email」</li>
<li>Button…「ログアウト」</li>
</ul>
<p><img src="https://storage.googleapis.com/zenn-user-upload/7f7830f111c4-20230703.jpg" alt loading="lazy" class="md-img"></p>
<p>これでページの作成は完了です。</p>
<h1 id="%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A">
<a class="header-anchor-link" href="#%E3%82%A2%E3%82%AF%E3%82%B7%E3%83%A7%E3%83%B3%E3%81%AE%E8%A8%AD%E5%AE%9A" aria-hidden="true"></a> アクションの設定</h1>
<p>各ページでアクションを設定していきます。</p>
<h2 id="%E3%82%B5%E3%82%A4%E3%83%B3%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8-1">
<a class="header-anchor-link" href="#%E3%82%B5%E3%82%A4%E3%83%B3%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8-1" aria-hidden="true"></a> サインインページ</h2>
<p>Signinページのアクションを設定していきます。サインインページで実装するアクションは下記のとおりです。</p>
<ul>
<li>「Continue with Google」ボタンをクリック→Googleサインイン</li>
</ul>
<p>「Continue with Google」ボタンのAction Flow Editorを開き、Aciton1でGoogleサインインアクションが設定できているか確認します。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/5b83b0ab8483-20230703.png" alt loading="lazy" class="md-img"></p>
<ul>
<li>Action1…Create Account</li>
<li>Auth Provider…Google</li>
<li>Create User…Yes</li>
<li>Collection…users</li>
</ul>
<h2 id="%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8-1">
<a class="header-anchor-link" href="#%E3%83%9B%E3%83%BC%E3%83%A0%E3%83%9A%E3%83%BC%E3%82%B8-1" aria-hidden="true"></a> ホームページ</h2>
<p>サインイン後に遷移するHomePageのアクションを設定します。ここで設定するアクションは下記の内容です。</p>
<ul>
<li>「ログアウト」ボタンをクリック→ログアウト</li>
</ul>
<p>「ログアウト」ボタンをクリックし、Action Flow Editorを開きます。<br>
下記を参考にアクションを設定してください。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/4a466f3fcc9c-20230703.jpg" alt loading="lazy" class="md-img"></p>
<ul>
<li>Action1…Logout</li>
</ul>
<p>これでアクションの設定も完了です。</p>
<h1 id="%E3%82%A8%E3%83%A9%E3%83%BC%E8%A7%A3%E6%B6%88">
<a class="header-anchor-link" href="#%E3%82%A8%E3%83%A9%E3%83%BC%E8%A7%A3%E6%B6%88" aria-hidden="true"></a> エラー解消</h1>
<p>設定が完了しましたので、エラーを解消しましょう。<br>
Isues&gt;Errorsが2件表示されています。上の「Auth Page Setup」をクリックして修正箇所を開きます。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/deac96c37973-20230703.jpg" alt loading="lazy" class="md-img"></p>
<p>Settings and Integrations&gt;App Detailsが開きます。Initial Pageが未設定だったことが原因のようです。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/b4ba78eaaa92-20230703.png" alt loading="lazy" class="md-img"></p>
<p>今回はそれぞれ下記の通り設定します。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/f7eb999e7be4-20230703.jpg" alt loading="lazy" class="md-img"></p>
<ul>
<li>Entry Page…Signin</li>
<li>Logged in Page…HomePage</li>
</ul>
<p>エラーが解消されました。<br>
<img src="https://storage.googleapis.com/zenn-user-upload/fd51c73093d4-20230703.png" alt loading="lazy" class="md-img"></p>
<p>ちなみに、Entry PageとLogged in Pageを設定することで、Googleサインイン後のホームページへの遷移やログアウト後のサインインページへの遷移が自動で行われます。</p>
<h1 id="%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D">
<a class="header-anchor-link" href="#%E5%8B%95%E4%BD%9C%E7%A2%BA%E8%AA%8D" aria-hidden="true"></a> 動作確認</h1>
<p>全ての設定が完了したので動作確認を行います。ツールバーの一番右にある下向き矢印のボタンをクリックし、「Run」ボタンをクリックします。<br>
<strong>※TestモードではGoogleサインインの検証はできないのでご注意ください。</strong></p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/e5b468b40445-20230703.png" alt loading="lazy" class="md-img"></p>
<p>新規タブでサインインページがRunモードで表示されたら、Googleサインインボタンをクリックします。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/b998ea7454b7-20230703.png" alt loading="lazy" class="md-img"></p>
<p>Googleサインインのアカウント選択ポップアップが表示されるので、アカウントを選択してログインします。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/76745cc1e6cb-20230703.png" alt loading="lazy" class="md-img"></p>
<p>ホームではサインインしたGoogleアカウントのGメールアドレスが表示されています。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/1f593284f491-20230703.png" alt loading="lazy" class="md-img"></p>
<p>確認できたら、ログアウトボタンをクリックしてみます。サインインページに戻って来られれば成功です。</p>
<p>念のため、firebaseのusersにアカウントが登録されているか確認してみます。Firabaseコンソールの「構築」&gt;「Firestore Database」を開き、先ほどのアカウントが登録されていれば成功です。</p>
<p><img src="https://storage.googleapis.com/zenn-user-upload/a0ff19d8e8aa-20230703.png" alt loading="lazy" class="md-img"></p>
<h1 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h1>
<p>Googleサインインの実装方法についてはFlutterFLow公式ドキュメントでも確認することができます。ネイティブアプリで実装する際に必要な手順も紹介されているのでご覧ください。</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__7315c61530e86" src="https://embed.zenn.studio/card#zenn-embedded__7315c61530e86" data-content="https%3A%2F%2Fdocs.flutterflow.io%2Fdata-and-backend%2Ffirebase%2Fauthentication%2Fgoogle-sign-in" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.flutterflow.io/data-and-backend/firebase/authentication/google-sign-in" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.flutterflow.io/data-and-backend/firebase/authentication/google-sign-in</a></p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__42d0c6c8dbf46" src="https://embed.zenn.studio/card#zenn-embedded__42d0c6c8dbf46" data-content="https%3A%2F%2Fdocs.flutterflow.io%2Fdata-and-backend%2Ffirebase%2Fauthentication%2Finitial-setup%231.-generate-the-sha-1-key" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://docs.flutterflow.io/data-and-backend/firebase/authentication/initial-setup#1.-generate-the-sha-1-key" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://docs.flutterflow.io/data-and-backend/firebase/authentication/initial-setup#1.-generate-the-sha-1-key</a></p>


FlutterFLowでGoogleサインインを実装する

2.Firebase Authentication（認証）の設定

3.Firebase Cloud Firestore（データベース）の設定

Discussion