iOSのGoogleログイン

GitHub

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

導入

このガイドでは、Capgo Social Login for iOSとGoogleログインを設定する方法を学びます。既読の場合は、一般的な設定ガイドをご確認ください。一般的な設定ガイド.

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コンソールに戻り、Bundle IDフィールドに Bundle Identifier を貼り付けます Bundle ID
7. GoogleコンソールのiOSクライアント作成フォームのBundle IDフィールドに App Store ID オプションで、 Team ID または
8. Capacitorライブアップデートの代替オプションを比較するページ。ロール: マーケティングまたは法的長文。見つける: page alternatives.astro。Capgo製品/ブランドと開発者用語を完全に保存する。メッセージキー `alternatives_cta_questions` (代替 CTA 問題)。 create
9. クリック OK
10. 新しく作成した iOS クライアントを開く
11. 以下のデータをコピーする
  
  この画像の nr. 1 この画像の iOSClientId 呼び出し. initialize protectedTokens
  この 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. を閉じる前に以下のフラグメントを挿入してください </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

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 ステップ1の値と同じでなければなりません
  高度な設定用に 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 ログインプラグインは @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: {}
});

あなたは Googleログインを使用しています iOSでGoogleログインを使用して認証とアカウントフローの計画に使用している場合、@capgo/capacitor-social-login iOSで@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 2要素認証 2要素認証の実装詳細について

iOSのGoogleログイン

導入

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

知られている問題

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

コピーする (クリップボードにコピーする)