Social Login

導入

このガイドでは、iOSでGoogle Sign-InとFirebase Authenticationを統合する方法を説明します。既に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でアプリを使用している場所でXcodeを開きます npx cap open ios
      2. Xcodeプロジェクトナビゲータで App
      3. Xcodeプロジェクトナビゲータでアプリのターゲットにいることを確認します Targets -> App
      4. 探してください Bundle Identifier

         注意

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

      5. コピーして Bundle Identifier Firebaseコンソールに貼り付け
   2. ボタンをクリック Register app protectedTokens

5. 手順をスキップします。 Download config file ステップ

   

6. 手順をスキップします。 Add firebase SDK ステップ

   

7. 手順をスキップします。 Add initialization code ステップ

   

8. ボタンをクリックします。 Continue to console Firebase アプリを追加 iOS 登録ボタン

   

9. iOSクライアントIDと YOUR_DOT_REVERSED_IOS_CLIENT_ID

   1. Google Cloudコンソールに移動する 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. Google Cloud Console

    1. クライアントIDをコピー Build -> Authentication
    2. Firebaseコンソールに戻り Sign-in method Firebase Authenticationメニューに移動してください。
    3. この Google プロバイダー
    4. この Web SDK configuration ボタン
    5. この Web client IDをコピーしてください。 これは、 webClientId の initialize プラグインの

11. アプリの Info.plist を変更する

    1. Xcode を開いて、プロジェクト ナビゲーターで Info.plist ファイル

       

    2. Right click this file and open it as source code

       

    3. ファイルの下部に、 Plist タグ </dict> Info.plist ファイルの Closing dict タグ

       

    4. __CAPGO_KEEP_0__ </dict> __CAPGO_KEEP_0__

       

       <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 スキーム) にコピーした値に変更します。

       

       注意

       この値が は をiOS Client IDに変更する com.googleusercontent.apps

12. は YOUR_IOS_CLIENT_ID STARTS

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

14. ファイルを修正してください AppDelegate.swift

    1. XcodeプロジェクトナビゲータでAppDelegate.swiftファイルを開いてください

       

    2. ファイルに追加してください import GoogleSignIn AppDelegate.swiftファイルの先頭にGoogleSignIn importを追加してください

       

    3. AppDelegate.swiftファイルの先頭にGoogleSignIn importを追加してください func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) AppDelegate.swiftファイルの先頭にGoogleSignIn importを追加してください

       

    4. AppDelegate.swiftファイルの先頭にGoogleSignIn importを追加してください

       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ログインをアプリに使用する準備が整いました。 Googleログインを使用するには authUtils.ts 例のアプリのファイルauthUtils.tsを使用してGoogleで認証する

ユーザーは初めてのサインイン時に自動的にFirebase Authに作成されます。

トラブルシューティング

認証がハングしたり失敗した場合:

• FirebaseのWebクライアントIDと一致する idToken アクセス対象ユーザーが
• Google Sign-Inを有効にしたことを確認してください
• Firebase ConsoleでInfo.plistに正しいURLスキームとGIDClientIDが含まれていることを確認してください
• 確認 iOSServerClientId ウェブクライアントIDと一致することを確認してください
• 参考用の例アプリ example app code __CAPGO_KEEP_0__

Firebase Google Login on iOSから続けてください

Firebase Google Login on iOSを使用して、認証とアカウントフローの計画を行っている場合 Firebase Google Login on iOSを接続してください Firebase Google Login on iOSの続き Capacitorで使用する@capgo/capacitor-social-login Capacitorのnative capabilityのためにCapacitorで使用する@capgo/capacitor-social-login Capacitorで@capgo/capacitor-social-login Capacitorのimplementation detailのためにCapacitorで@capgo/capacitor-social-login Capacitorで@capgo/capacitor-passkey Capacitorのimplementation detailのためにCapacitorで@capgo/capacitor-passkey Capacitorで@capgo/capacitor-native-biometric Capacitorのimplementation detailのためにCapacitorで@capgo/capacitor-native-biometric、 2要素認証 Capacitorのimplementation detailのために2要素認証