iOSのGoogleログイン

GitHub

このプラグインのインストールステップとフルマークダウンガイドを含むセットアッププロンプトをコピーしてください。

導入

このガイドでは、iOS向けのCapgo Social Loginを使用してGoogleログインを設定する方法を学びます。一般的な設定ガイドをすでに読んだことを前提としています。.

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

GoogleコンソールでiOSクライアントIDを作成する
1. 検索バーをクリックする
2. で検索する credentials のボタンをクリックする APIs and Services のボタンをクリックする
3. Google Console の create credentials
4. 選択 OAuth client ID
5. を選択 Application type context: Live updates product page. Role: Short UI label or navigation item. Message key `live_update_dynamic_label_to` (Live Update Dynamic Label To). iOS
6. バンドル ID を見つける
  1. Xcode を開く
  2. Xcode プロジェクトナビゲータで App
  3. Capgoの設定を確認してください Targets -> App
  4. Capgoで使用する Bundle Identifier
  5. Googleコンソールに戻り、Capgoで使用する Bundle Identifier Bundle IDフィールドに貼り付けます Bundle ID
7. または App Store ID GoogleコンソールのiOSクライアント作成フォームのClient IDフィールドに貼り付けます Team ID App Storeにアプリを公開した場合はClient IDに貼り付けます
8. すべての詳細を入力したら、iOSクライアント作成フォームの下部にあるCreateボタンをクリックしてください create
9. クリック OK
10. 新しく作成した iOS クライアントを開く
11. 以下のデータをコピーする
  
  この画像の nr. 1 この画像の iOSClientId 呼び出し. initialize Client ID details showing Client ID and reversed client ID to copy
  この nr. 2 この画像に表示されている YOUR_DOT_REVERSED_IOS_CLIENT_ID
アプリのInfo.plistを変更する
1. Xcodeを開いてプロジェクトナビゲータで Info.plist ファイル
2. Right click this file and open it as source code
3. ファイルの下部に Plist タグ </dict> Info.plistファイルのdictタグ
4. URLスキームを追加するための次のフラグメントを閉じるタグの直前に挿入してください </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 Info.plistに実際のクライアントIDを逆順にした値をURLスキームに挿入
  
  始まる 必要です URLスキームを追加するための次のフラグメントを閉じるタグの直前に挿入してください com.googleusercontent.apps
6. ファイルを保存してください Command + S

ファイルを変更してください AppDelegate.swift

XcodeプロジェクトナビゲータでAppDelegateを開いてください
挿入 import GoogleSignIn AppDelegate.swiftファイルの先頭にGoogleSignIn importを追加してください
AppDelegate.swiftファイルで func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) AppDelegate.swiftファイルで

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

GoogleSignInをサポートするようにアプリケーションを開くURL関数を変更しました。

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

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: 任意 - ウェブプラットフォームもサポートする場合や高度な機能が必要な場合のみ必要
  - iOSServerClientId: 任意 - 以下の値と同じ値を使用する webClientId 高度な設定用に
  そして webClientId と iOSServerClientId, ご覧になるウェブ設定ガイドこれらの資格情報を作成する
  オフラインモードについて: オフラインモードで mode: 'offline', ログイン応答にはユーザー情報が直接含まれません。代わりに、サーバー認証 code を受け取り、バックエンドサーバーでユーザー情報を交換する必要があります。 SocialLogin.refresh({ provider: 'google' }) はこのモードでは利用できません。refreshはバックエンドで交換した後実行する必要があります。 serverAuthCode詳細については、一般的な設定ガイドの実装詳細を参照してください
3. Google ログイン機能を実装するには、ログイン関数を作成し、次の 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 ログインプラグインは、@__CAPGO_KEEP_0__/privacy-screenと不相容です。 @capacitor/privacy-screen対策:

呼び出し コピー await PrivacyScreen.disable(); 続けてiOSのGoogleログイン

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

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

あなたが使用している iOSのGoogleログイン 認証とアカウントフローの計画に使用している場合、Cloudflare Using @capgo/capacitor-social-login for the native capability in Using @capgo/capacitor-social-login, @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and 2要素認証 2要素認証の実装詳細について

iOSのGoogleログイン

導入

一般設定ガイド

問題

プライバシースクリーン プラグイン 不相容性

__CAPGO_KEEP_0__

プライバシースクリーンプラグイン不相容性