iOSでGoogleログイン

GitHub

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

導入

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

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

GoogleコンソールでiOSクライアントIDを作成する
1. 検索バーをクリックする
2. で検索する credentials 検索結果のオプションをクリックする APIs and Services APIsとServicesが強調表示されている検索結果
3. クリック create credentials
4. 選択 OAuth client ID
5. 選択 Application type Live Update iOS
6. バンドルIDを探す
  1. Xcodeを開く
  2. ダブルクリック App
  3. アプリターゲット Targets -> App
  4. あなたの Bundle Identifier
  5. Googleコンソールに戻り、Bundle IDフィールドにあなたの Bundle Identifier に Bundle ID
7. オプションで、 App Store ID または Team ID iOSクライアント作成フォームの
8. に 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. このファイルを右クリックし、ソースとして開く code
3. ファイルの下部に、 Plist タグ </dict> Info.plist ファイルの Closing dict タグ
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

iOS用Googleのソーシャルログインプラグインの設定 AppDelegate.swift

Open the AppDelegate
Insert import GoogleSignIn AppDelegate.swiftファイルの先頭にGoogleSignIn importを追加する
function func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) AppDelegate.swiftファイルの元のopenURL関数を探す

Copy to clipboard

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

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

Setup Google login in your JavaScript/TypeScript code
1. Import 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' }) はこのモードでは利用できません;リフレッシュはバックエンドで実行する必要があります。__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プライバシー画面が表示されます。

対処法: 呼び出し 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ログインを使用している場合 iOSでGoogleログインを使用している場合 認証とアカウントフローの計画に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 for the implementation detail in @capgo/capacitor-native-biometric, and 認証とアカウントフローの計画にGoogleログインを使用している場合、 Google の 2 要素認証の実装詳細について。

iOSでGoogleログイン

導入

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

知られている問題

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

コピー