GoogleログインのiOS

GitHub

このプラグインのインストール手順と全マークダウンガイドを含むセットアップコマンドをコピーします。

導入

このガイドでは、iOS向けにGoogleログインを設定する方法を学びます。 Capgo Social Loginの設定を完了します。既読の一般設定ガイドがあることを前提としています。一般設定ガイド.

iOS向けのGoogleコンソールのクライアントIDを作成する

検索バーをクリックする
1. Googleコンソールの検索バー
2. でクリックする credentials 1つ目（スクリーンショットの2番目） APIs and Services 検索結果のクレデンシャルオプションとAPIs & Servicesが強調表示されている
3. クリック create credentials
4. 選択 OAuth client ID
5. 選択 Application type to iOS
6. バンドルIDを探す
  1. Xcodeを開く
  2. Xcodeプロジェクトナビゲータで App
  3. Xcodeプロジェクトナビゲータでアプリターゲット Targets -> App
  4. あなたの Bundle Identifier
  5. Googleコンソールに戻り、Bundle IDフィールドにあなたの Bundle Identifier を Bundle ID
7. オプションで、 App Store ID または Team ID クライアントIDに
8. アプリをApp Storeに公開した場合 create
9. Click OK
10. 新しく作成した iOS クライアントを開く
11. __CAPGO_KEEP_0__をコピーするデータ
  
  この画像の nr. 1 この画像の iOSClientId この画像の呼び出し initialize call.
  この画像の nr. 2 この画像は後に YOUR_DOT_REVERSED_IOS_CLIENT_ID
アプリの Info.plist を変更する
1. Xcode を開いてプロジェクトナビゲーターで Info.plist ファイル
2. このファイルを右クリックし、ソースとして開く code
3. ファイルの下部に、 Plist タグ </dict> tag
4. クロージング dict タグの直前に、以下のフラグメントを挿入する </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 前のステップでコピーした値に変更する
  
  この値がは始まる com.googleusercontent.apps
6. ファイルを保存する Command + S

修正する AppDelegate.swift

Googleのソーシャルログインを
Insert import GoogleSignIn AppDelegate.swiftファイルの
Find the func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) function

AppDelegate.swiftファイルの

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

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

Google ログインを設定するには、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: 任意 - ウェブプラットフォームをサポートする場合や高度な機能が必要な場合のみ
  - iOSServerClientId: 任意 - 以下の値と同じ値を使用してください webClientId 提供された値と同じ
  高度な設定用に webClientId そして iOSServerClientId詳細を参照してくださいウェブ設定ガイドこれらの資格情報を作成するために
  オフラインモードについて: オフラインモードの場合 mode: 'offline', the login response will not contain user data directly. Instead, you’ll receive a server auth code that must be exchanged for user information via your backend server. SocialLogin.refresh({ provider: 'google' }) はこのモードでは利用できません。refreshはバックエンドで実行する必要があります。 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)
```
アプリケーションをテストする
1. アプリをビルドして実行する cap sync
2. すべてが正しく行われた場合、Google ログインフローが正常に動作するはずです

既知の問題

プライバシースクリーンプラグインの不相応

Google ログインプラグインは @capacitor/プライバシースクリーンプライバシースクリーンが表示されるため、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: {}
});

iOSでGoogleログインを使用している場合 GoogleログインをiOSで使用する 認証とアカウントフローの計画に使用するには、Googleログインを接続します。 Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login Using @capgo/capacitor-passkey Using @capgo/capacitor-passkey Using @capgo/capacitor-native-biometric Using @capgo/capacitor-native-biometric @capgo/capacitor-native-biometricの実装詳細について 2要素認証 2要素認証の実装詳細については

GoogleログインのiOS

導入

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

既知の問題

プライバシースクリーン プラグインの不相応

Google ログイン on iOS から続けて

プライバシースクリーンプラグインの不相応