iOS上のGoogleログイン

GitHub

インストールステップとこのプラグインのフルマークダウンガイドまでのすべてのステップが含まれたセットアップ用の質問をコピーしてください。

導入

このガイドでは、Capgo Social Login for iOSとGoogleログインを設定する方法を学びます。既読の「一般的なセットアップガイド」を読んだことを前提としています。一般的なセットアップガイド.

このセクションでは、GoogleログインをiOSで設定する方法を学びます。

GoogleコンソールでiOSクライアントIDを作成する
1. 検索バーをクリックする
2. 検索する credentials クリックする APIs and Services 1 (スクリーンショットの2番目)
3. Google Console の create credentials
4. クレデンシャル作成メニューの OAuth client ID
5. を選択します。 Application type iOS オプションが強調表示されたアプリケーションタイプの選択 iOS
6. Xcode を開きます。
  1. Xcode プロジェクトナビゲータで
  2. ターゲットをダブルクリックします。 App
  3. Capgoの設定を確認してください Targets -> App
  4. Capgoで Bundle Identifier
  5. Google Consoleに戻り、Capgoで生成した Bundle Identifier Google ConsoleのiOSクライアント作成フォームのBundle IDフィールドに貼り付けます Bundle ID
7. またはApp Storeにアプリを公開した場合は、クライアントIDに追加してください App Store ID App Storeにアプリを公開した場合は、クライアントIDに追加してください Team ID すべての詳細を入力したら、iOSクライアント作成フォームの下部にある
8. iOSクライアント作成フォームの下部にある create
9. Click OK
10. Open the newly created iOS client
11. Copy the following data
  
  The nr. 1 in this image will later become the iOSClientId in the initialize call.
  The nr. 2 この画像の YOUR_DOT_REVERSED_IOS_CLIENT_ID
Modify your app’s Info.plist
1. Xcodeを開いて、プロジェクトナビゲータで Info.plist ファイル
2. Right click this file and open it as source 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

変更する AppDelegate.swift

AppDelegateを開きます
挿入 import GoogleSignIn AppDelegate.swiftファイルの先頭にGoogleSignIn importを追加
検索 func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) 関数

関数を次のように変更

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)
}

Modified application openURL function with GoogleSignIn handling

Save the file with Command + S

Setup Google login in your JavaScript/TypeScript code
1. ファイルを保存してください SocialLogin JavaScript/TypeScriptでGoogleログインを設定する Capacitor
```
import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';
```
2. Call the initialize method (this should be called only once)
  
  クリップボードにコピー
```
// onMounted is Vue specific
onMounted(() => {
  SocialLogin.initialize({
    google: {
      iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
      mode: 'online' // Default mode
    }
  })
})
```
  基本設定（オンラインモード - 大多数のアプリ向けに推奨）：
```
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'
    }
  })
})
```
  Note
  クライアントIDの要件：
  - iOSClientId: 必要 - 最後に googleusercontent.com (ステップ1の上記)
  - webClientId: 任意 - ウェブプラットフォームをサポートする場合や高度な機能が必要な場合はのみ必要
  - iOSServerClientId: 任意 - 値は webClientId を同じにする必要があります。
  (提供された場合) webClientId 高度な設定用にCloudflareとCapacitorを使用する場合 iOSServerClientId, ご覧になるウェブ設定ガイドこれらの資格情報を作成するための
  オフラインモードについて: オフラインモードで mode: 'offline', ログイン応答にはユーザー情報が直接含まれません。代わりに、サーバー認証 code が受信され、ユーザー情報を取得するには、バックエンドサーバーで交換する必要があります。 SocialLogin.refresh({ provider: 'google' }) はこのモードでは利用できません; 再読み込みはバックエンドで行う必要があります。 serverAuthCode実装詳細については一般的な設定ガイドを参照してください。
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)
```
アプリケーションをテスト
1. アプリをビルドして実行 cap sync
2. すべてが正しく実行されている場合、Google ログインフローが正常に動作するはずです

問題点

プライバシー画面プラグインの不互換性

@__CAPGO_KEEP_0__/privacy-screen @capacitor/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ログイン 認証とアカウントフローの計画に使用している場合、 Capacitorの@capgo/capacitor-social-login Capacitorの@capgo/capacitor-social-login Capacitorの@capgo/capacitor-social-login Capacitorの@capgo/capacitor-passkey Capacitorの@capgo/capacitor-passkey Capacitorの@capgo/capacitor-native-biometric Capacitorの@capgo/capacitor-native-biometric Capacitorの@capgo/capacitor-native-biometric 2要素認証 2要素認証の実装詳細について

iOS上のGoogleログイン

導入

Googleログインの使用方法

問題点

プライバシー画面プラグインの不互換性

@__CAPGO_KEEP_0__