iOS上のGoogleログイン

導入

このガイドでは、Capgo Social Login for iOSとGoogle Loginをセットアップする方法を学びます。 既に一般的なセットアップガイドを読んだと想定しています。 インストール手順とフルマークダウンガイドを含むセットアッププロンプトをコピーします。.

iOS上でGoogleログインを使用する

このセクションでは、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. iOSが強調表示されている

      1. バンドルIDを探してください

      2. Xcodeを開いてください App

         

      3. Xcodeプロジェクトナビゲータのアプリターゲット Targets -> App

         

      4. ターゲットセクション Bundle Identifier

         

      5. Googleコンソールに戻り、 Bundle Identifier にペーストしてください Bundle ID

         

   7. オプションで、 App Store ID または Team ID App Storeにアプリを公開した場合は、クライアントIDに

   8. すべての詳細を入力したら、iOSクライアント作成フォームの下部にある create

      

   9. クライアントID作成確認ダイアログの OK

      

   10. iOSクライアントを作成

       

   11. __CAPGO_KEEP_0__をコピーしてください

       

       注意

       この画像の nr. 1 は後で iOSClientId に変わります。 initialize この画像の

       は後で nr. 2 に変わります。 YOUR_DOT_REVERSED_IOS_CLIENT_ID

2. アプリのInfo.plistを修正してください

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

      

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

      

   3. 下部の Plist ファイル </dict> タグ

      

   4. タグの直前に、以下のフラグメントを挿入 </dict> URLスキームを含むInfo.plist __CAPGO_KEEP_0__

      

      <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. JavaScript/TypeScriptの__CAPGO_KEEP_0__でGoogleログインを設定 Command + S

4. Setup Google login in your JavaScript/TypeScript code

   1. インポート SocialLogin と Capacitor

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

   2. 初期化メソッドを呼び出してください (これは、1度だけ呼び出してください)

      基本設定 (オンラインモード - 大多数のアプリケーション向けに推奨)

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

      追加のクライアント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'
          }
        })
      })

      注意

      クライアントIDの要件:

      • iOSClientId: 必要 - 必ず終わり googleusercontent.com (1 のステップから)
      • webClientId: 任意 - Web プラットフォームもサポートする場合や、機能を高度にカスタマイズしたい場合は必要
      • iOSServerClientId: 任意 - 値は、 webClientId を同じ値にする

      高度な設定用に webClientId 、 iOSServerClientIdを参照してください。 Web プラットフォームの設定ガイド のために必要な情報を取得する方法について

      注意

      オフラインモードについて: を使用する場合、ログイン応答にはユーザー情報が直接含まれません。代わりに、サーバー認証__CAPGO_KEEP_0__を受け取り、ユーザー情報を取得するには、バックエンドサーバーで交換する必要があります。 mode: 'offline'はこのモードでは利用できません; 再読み込みはバックエンドで実行する必要があります。codeを交換した後で実行してください。 SocialLogin.refresh({ provider: 'google' }) 詳細については、 serverAuthCodeの一般的な設定ガイド を参照してください。 ログイン機能を実装するには、ボタンを作成し、クリック時に次の__CAPGO_KEEP_0__を実行してください。

   3. Implement the login function. Create a button and run the following code on click

      クリップボードにコピー

      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 のプロンプトの言語は、デバイスの言語設定に依存します。

知られている問題

プライバシースクリーン プラグインの不互換性

Google ログイン プラグインは @capacitor/privacy-screenプライバシースクリーンが表示されるため、Google ログイン ウェブビューが中断されます。

対策: 呼び出し 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: {}
});