iOS上のGoogleログイン

GitHub

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

導入

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

iOSでGoogleログインを設定する方法を学びます。

GoogleコンソールでiOSクライアントIDを作成する
1. 検索バーをクリックする
2. で検索する credentials をクリックする APIs and Services の1つ(スクリーンショットの2番目)
3. Google Console の create credentials
4. 資格情報の作成メニューで OAuth client ID
5. 資格情報の作成メニューで Application type を選択 iOS
6. バンドル ID を見つける
  1. Xcode を開く
  2. Xcode プロジェクトナビゲーターで App
  3. Capgoの設定を確認してください Targets -> App
  4. Capgoの Bundle Identifier
  5. Googleコンソールに戻り、Capgoの Bundle Identifier に Bundle ID
7. Capgoの App Store ID または Team ID iOSクライアント作成フォームのClient IDフィールドに
8. Capgoの create
9. クリック OK
10. 新しく作成した iOS クライアントを開く
11. 以下のデータをコピーする
  
  この画像の nr. 1 この画像の iOSClientId 呼び出し. initialize この画像の
  この 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. Insert the following fragment just before the closing </dict> tag
```
<key>CFBundleURLTypes</key>
<array>
 <dict>
   <key>CFBundleURLSchemes</key>
   <array>
     <string>YOUR_DOT_REVERSED_IOS_CLIENT_ID</string>
   </array>
 </dict>
</array>
```
5. Change the YOUR_DOT_REVERSED_IOS_CLIENT_ID to the value copied in the previous step
  
  Ensure that this value Ensure that this value は com.googleusercontent.apps
6. ファイルを保存してください Command + S

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

XcodeプロジェクトナビゲータでAppDelegate.swiftファイルを開いてください
ここに追加してください 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 Capgoマーケティングサイトのページ/エリア: Capgoマーケティングサイト。役割: 短いUIラベルまたはナビゲーションアイテム。見られる場所: page trust.astro。メッセージキー `and` (And)。 iOSServerClientId, ご覧になるウェブ設定ガイドこれらの資格情報を作成するための
  オフラインモードについて: オフラインモードで mode: 'offline', ログイン応答には直接ユーザーデータが含まれません。代わりに、サーバー認証codeが受信され、ユーザー情報を取得するためにバックエンドサーバーで交換する必要があります。 SocialLogin.refresh({ provider: 'google' }) はこのモードでは利用できません; 再読み込みはバックエンドで行う必要があります。 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 ログインプラグインは @capacitor/privacy-screenを使用すると、プライバシースクリーンがログインウェブビューを中断します。

対策: 呼び出し await PrivacyScreen.disable(); コンテキスト：Appflow 比較/移行マーケティングコピー (親キー：appflow_migration_step2)。ページ/エリア：Appflow 比較/移行マーケティングコピー。役割：ウェブサイトコピー文。見つかった場所：ionic-appflow.astro

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ログイン

導入

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

問題点

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

コピーする

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