iOSでのGoogle Login

はじめに

このガイドでは、iOS向けにCapgo Social LoginでGoogleログインを設定する方法を学びます。 すでに以下を読んでいるものとします。 一般的なセットアップガイド.

iOS で Google Login を使う

このパートでは、iOSでGoogleログインを設定する方法を説明します。

1. GoogleコンソールでiOSクライアントIDを作成する

   1. 検索バーをクリックします

      

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

      

   3. 次の create credentials

      

   4. 選択します OAuth client ID

      

   5. 次の Application type まで iOS

      

   6. Bundle ID を確認する

      1. Xcode を開く

      2. ダブルクリック App

         

      3. Xcode の Targets セクションで App が選択されていることを確認 Targets -> App

         

      4. 検索 Bundle Identifier

         

      5. Google Console に戻り、Bundle ID を貼り付け Bundle Identifier 次のように分類しています Bundle ID

         

   7. 必要に応じて、 App Store ID または Team ID App Store にアプリを公開している場合は、クライアント ID に追加してください

   8. すべての詳細を入力した後、 create

      

   9. クリック OK

      

   10. 新しく作成した iOS クライアントを開く

       

   11. 以下のデータをコピー

       

       注意

       この nr. 1 この画像の値は後で iOSClientId の initialize 呼び出しになります。

       この nr. 2 この画像の値は後で YOUR_DOT_REVERSED_IOS_CLIENT_ID

2. アプリの 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>

   5. を以下に変更します YOUR_DOT_REVERSED_IOS_CLIENT_ID 前のステップでコピーした値に

      

      注意

      この値が STARTS を使用して com.googleusercontent.apps

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

3. 次を変更します： 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

4. JavaScript/TypeScript の code で Google ログインをセットアップ

   1. インポート SocialLogin と Capacitor

      import { SocialLogin } from '@capgo/capacitor-social-login';
      import { Capacitor } from '@capacitor/core';

   2. initialize メソッドを呼び出します（1回だけ呼び出してください）

      基本セットアップ（オンラインモード - ほとんどのアプリで推奨）:

      // onMounted is Vue specific
      onMounted(() => {
        SocialLogin.initialize({
          google: {
            iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
            mode: 'online' // Default mode
          }
        })
      })

      追加の Client ID を使った高度なセットアップ:

      onMounted(() => {
        SocialLogin.initialize({
          google: {
            webClientId: 'YOUR_WEB_CLIENT_ID',           // Optional: for web platform support
            iOSClientId: 'YOUR_IOS_CLIENT_ID',           // Required: from step 1
            iOSServerClientId: 'YOUR_WEB_CLIENT_ID',     // Optional: same as webClientId, needed for some advanced features
            mode: 'online'                               // 'online' or 'offline'
          }
        })
      })

      注意

      Client ID の要件:

      • iOSClientId: 必須 - 末尾が以下である必要があります: googleusercontent.com (上記のステップ 1 から)
      • webClientId: 任意 - Web プラットフォームのサポートや高度な機能が必要な場合のみ
      • iOSServerClientId: 任意 - 以下の値と同じである必要があります webClientId 指定された場合

      高度なセットアップについては webClientId と iOSServerClientId、 Web セットアップガイド これらの認証情報の作成方法については、

      注意

      オフラインモードについて: 使用する場合、 mode: 'offline'ログインレスポンスにユーザーデータは直接含まれません。代わりにサーバー認証用の code が返るので、バックエンドサーバー経由でユーザー情報と交換する必要があります。 SocialLogin.refresh({ provider: 'google' }) はこのモードでは利用できません。交換後はバックエンド側でリフレッシュする必要があります。 serverAuthCode。参照： 一般的なセットアップガイド 実装の詳細については、

   3. ログイン機能を実装します。ボタンを作成し、クリック時に以下の code を実行してください。

      オンラインモードの場合:

      const res = await SocialLogin.login({
        provider: 'google',
        options: {}
      })
      // handle the response - contains user data
      console.log(JSON.stringify(res))

      オフラインモードの場合:

      const res = await SocialLogin.login({
        provider: 'google',
        options: {
          forceRefreshToken: true // Recommended for offline mode
        }
      })
      // res contains serverAuthCode, not user data
      // Send serverAuthCode to your backend to get user information
      // Do not call SocialLogin.refresh() in offline mode
      console.log('Server auth code:', res.result.serverAuthCode)

5. アプリケーションのテスト

   1. アプリをビルドして実行します cap sync

   2. 正しく設定できていれば、Google のログインフローが正常に動作しているはずです

      

注意

Google のプロンプトの言語は、デバイスの言語設定に依存します。

既知の問題

Privacy Screen プラグインの非互換性

Google Login プラグインは以下と非互換です @capacitor/privacy-screen両方のプラグインを併用すると、Google LoginのWebViewがPrivacy Screenによって中断されます。

回避策: 呼び出す await PrivacyScreen.disable(); ログイン関数を呼び出す前に:

import { PrivacyScreen } from '@capacitor/privacy-screen';
import { SocialLogin } from '@capgo/capacitor-social-login';

await PrivacyScreen.disable();
await SocialLogin.login({
  provider: 'google',
  options: {}
});

iOS で Google Login を続行する

使用している場合 iOSでの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要素認証 二要素認証の実装の詳細については。