iOS上のGoogleログイン

Social Login GitHub リポジトリ

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

導入

このガイドでは、Capgo iOS用のソーシャルログインでGoogleログインを設定する方法を学びます。既に一般的なセットアップガイドを読んだと想定しています。一般的なセットアップガイド.

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

GoogleコンソールでiOSクライアントIDを作成
1. 検索バーをクリック
2. で検索 credentials APIとサービスが強調表示されたクレデンシャルオプションを表示する検索結果 APIs and Services Googleコンソールの
3. クレデンシャル作成メニューの create credentials
4. クレデンシャル作成メニューの OAuth client ID
5. クライアントIDの種類を選択 Application type To iOS
6. バンドルIDを探す
  1. Xcodeを開く
  2. ダブルクリックして App
  3. ターゲットセクションに移動して Targets -> App
  4. バンドルIDを探す Bundle Identifier
  5. Googleコンソールに戻って、 Bundle Identifier をペーストする Bundle ID
7. App Storeにアプリを公開している場合は、 App Store ID に Team ID をクライアントIDに追加することもできます
8. すべての詳細を入力したら、 create
9. Create OK
10. 新しく作成したiOS clientを開く
11. 以下のデータをコピーする
  
  The nr. 1 この画像の中の iOSClientId この画像の中の initialize 呼び出し。
  The nr. 2 この画像の中の YOUR_DOT_REVERSED_IOS_CLIENT_ID
アプリの Info.plist を変更する
1. Xcode を開いてプロジェクトナビゲーターで Info.plist ファイル
2. 右クリックしてこのファイルを開く code
3. ファイルの下部に Plist タグが表示されます </dict> Info.plistファイル内のdictタグ
4. Info.plistファイルにURLスキーム __CAPGO_KEEP_0__ を挿入したもの </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

XcodeプロジェクトナビゲータでAppDelegate.swiftファイルを開く
上部に import GoogleSignIn __CAPGO_KEEP_0__
Find the func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) function

Modify the function to look like this

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

Google loginをJavaScript/TypeScriptのcodeにセットアップ
1. Import SocialLogin and 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 クライアントIDの末尾に
  - webClientId: (上記のステップ1から) - webプラットフォームもサポートする場合や高度な機能が必要な場合は必要
  - iOSServerClientId: オプション - 同じ値を入力してください webClientId 提供された場合
  高度な設定用に webClientId 、 iOSServerClientId詳細は web設定ガイドこれらの資格情報を作成する
  オフラインモードについて: 使用時 mode: 'offline'、ログインのレスポンスにはユーザー情報が直接含まれません。代わりに、サーバー認証codeを受け取り、ユーザー情報を取得するには、バックエンドサーバーで交換する必要があります。 SocialLogin.refresh({ provider: 'google' }) はこのモードでは利用できません。refreshは、__CAPGO_KEEP_0__を交換した後、バックエンドサーバーで実行する必要があります。 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/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: {}
});

Capacitor の @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login を使用している場合、 Capacitor の @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login を使用している場合、 Capacitor の @__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-login を使用している場合、 Using @capgo/capacitor-social-login Capacitor の @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 を参照してください。 Two-factor authentication Two-factor authentication の実装詳細については参照してください。

iOS上のGoogleログイン

導入

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

知られている問題

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

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

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