iOSでのFirebase Google Login

はじめに

このガイドでは、iOSでGoogle Sign-InをFirebase Authenticationと連携させる方法を解説します。すでに以下を完了していることを前提としています。 Firebase の Google 設定全般.

注意

Firebase ConsoleでiOSアプリをまだ作成していないことを前提としています。すでに作成済みの場合は、手順が若干異なります。

セットアップ手順

1. プロジェクトの概要は、こちらから確認できます： console.cloud.google.com

   

2. 次の Add app ボタンをクリックします

   

   注意

   ボタンが見当たらない場合は、こちらを確認してください。これは、すでに Firebase Console で別のアプリを作成済みの場合にのみ発生します。

   

3. 選択します iOS

   

4. フォームの最初の項目を入力します

   1. 以下を入力してください Apple bundle ID
      1. アプリのXcodeを開きます npx cap open ios
      2. ダブルクリックして App
      3. 以下の項目を確認してください Targets -> App
      4. 以下を探します Bundle Identifier

         注意

         ここに表示されるIDは、この後のガイドで使用するものとは異なります。ここでは app.capgo.plugin.SocialLogin 以降のガイドで

      5. 以下をコピー Bundle Identifier をコピーしてFirebaseコンソールに貼り付けます
   2. 次の Register app ボタンをクリックします

5. スキップ Download config file ステップ

   

6. スキップ Add firebase SDK ステップ

   

7. スキップ Add initialization code ステップ

   

8. 次の Continue to console ボタンをクリックします

   

9. iOSクライアントIDを取得してください YOUR_DOT_REVERSED_IOS_CLIENT_ID

   1. Google Cloud Consoleへ移動: console.cloud.google.com

   2. プロジェクトを探す

      1. プロジェクトセレクターをクリックします
      2. Firebaseプロジェクトの正確な名前でプロジェクトを検索し、クリックしてください。私の場合は、 sociallogin-tutorial-app.

   3. 検索バーを開き、以下を開きます： credentials

      1. 検索バーを開く
      2. を検索し、 credentials 次をクリックします： APIs and Services 該当の項目（スクリーンショットの番号2）

   4. 次の iOS client for [YOUR_APP_ID] (auto created by Google Service) 1つです。私の場合は、こちらです： sociallogin-tutorial-app.

      

   5. 以下をコピー Client ID および iOS URL scheme。これらはそれぞれあなたの iOSClientId と YOUR_DOT_REVERSED_IOS_CLIENT_ID.

      注意

      渡すのは iOSClientId の initialize プラグインのメソッドに渡し、一方で YOUR_DOT_REVERSED_IOS_CLIENT_ID の Info.plist このガイドの次のセクションで説明する、アプリのファイルです。

      

10. WebクライアントIDを取得

    1. Firebase consoleに戻り、以下へ移動してください Build -> Authentication
    2. 次の Sign-in method ボタンをクリックします
    3. 次の Google プロバイダーを有効にする
    4. 次の Web SDK configuration ボタンをクリックします
    5. 以下をコピー Web client ID. これが webClientId の initialize プラグインのメソッドになります。

11. アプリの Info.plist を修正します

    1. Xcode を開き、 Info.plist ファイル

       

    2. このファイルを右クリックして、ソース code として開きます

       

    3. ファイルの最下部に Plist 次のような </dict> タグ

       

    4. 以下のフラグメントを、閉じタグの直前に挿入してください </dict> タグ

       

       <key>CFBundleURLTypes</key>
       <array>
       <dict>
         <key>CFBundleURLSchemes</key>
         <array>
           <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
         </array>
       </dict>
       </array>
       <key>GIDClientID</key>
       <string>YOUR_IOS_CLIENT_ID.apps.googleusercontent.com</string>

    5. 次の値を YOUR_DOT_REVERSED_IOS_CLIENT_ID ステップ 9 でコピーした値（iOS URL scheme）に変更します

       

       注意

       この値が 開始するようにしてください を使用して com.googleusercontent.apps

12. を YOUR_IOS_CLIENT_ID ステップ9でコピーしたiOS Client IDに変更します

13. ファイルを保存してください Command + S

14. 次を変更します： AppDelegate.swift

    1. AppDelegateを開きます

       

    2. 挿入 import GoogleSignIn ファイルの先頭に

       

    3. 〜を探します func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) 関数

       

    4. 関数を次のように修正します

       func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) -> Bool {
           // Called when the app was launched with a url. Feel free to add additional processing here,
           // but if you want the App API to support tracking app url opens, make sure to keep this call
       
           var handled: Bool
       
           handled = GIDSignIn.sharedInstance.handle(url)
           if handled {
             return true
           }
       
           return ApplicationDelegateProxy.shared.application(app, open: url, options: options)
       }

       

    5. ファイルを保存してください Command + S

15. アプリでGoogleログインを使用する

    これで、アプリでGoogleログインを使用する準備が整いました。 以下の authUtils.ts Googleで認証するサンプルアプリのファイルです。

初回サインイン時に、Firebase Authにユーザーが自動作成されます。

トラブルシューティング

認証がハングしたり失敗したりする場合：

• 次を確認してください: idToken audienceがFirebaseのWebクライアントIDと一致していること
• Firebase ConsoleでGoogle Sign-Inが有効であることを確認してください
• Info.plistに正しいURL schemesとGIDClientIDが設定されていることを確認してください。
• 確認 iOSServerClientId WebクライアントIDと一致していること
• 以下を確認してください: サンプルアプリ code 参考用

iOSでのFirebase Google Loginの続き

使用している場合 iOSでのFirebase Google Login 認証とアカウントフローを計画するには、これを次と連携させてください @capgo/capacitor-social-login の使用 「@capgo/capacitor-social-login の使用」のネイティブ機能のために、 @capgo/capacitor-social-login @capgo/capacitor-social-login の実装の詳細については、 @capgo/capacitor-passkey @capgo/capacitor-passkey の実装詳細については、 @capgo/capacitor-native-biometric @capgo/capacitor-native-biometric の実装の詳細、および 2要素認証 二要素認証の実装の詳細については。