iOS上のGoogleログイン

Social Login GitHub

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

導入

このガイドでは、Capgo Social Login for iOSとGoogleログインをセットアップする方法を学びます。既読の「一般的なセットアップガイド」を読んだことを前提としています。一般的なセットアップガイド.

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

GoogleコンソールでiOSクライアントIDを作成する
1. 検索バーをクリックする
2. で検索する credentials と検索結果の APIs and Services 2番目のアイテム（スクリーンショットに示されている2番目）
3. をクリックする create credentials
4. を選択する OAuth client ID
5. Select the Application type を iOS
6. Find the bundle ID
  1. Xcodeを開く
  2. Double click on App
  3. Ensure that you are on Targets -> App
  4. Find your Bundle Identifier
  5. Google Console から戻って、 Bundle Identifier に貼り付けます。 Bundle ID
7. オプションで、App Store にアプリを公開した場合は、 App Store ID または Team ID に追加します。
8. 詳細をすべて入力したら、iOS クライアント作成フォームの下部にある create
9. クライアント ID 作成確認ダイアログの OK
10. 新しく作成した iOS クライアントを開きます。
11. __CAPGO_KEEP_0__をコピーしてください
  
  この画像の nr. 1 この画像の後でこの iOSClientId の呼び出しになります。 initialize この画像の
  この画像の後で nr. 2 の呼び出しになります。 YOUR_DOT_REVERSED_IOS_CLIENT_ID
アプリのInfo.plistを変更してください
1. Xcodeを開いてInfo.plistを探してください Info.plist ファイル
2. このファイルに右クリックしてソースとして開きます code
3. 下部の Plist ファイル </dict> に、
4. Info.plistファイルの </dict> タグ
```
<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 を前のステップでコピーした値に変更
  
  この値が STARTS に始まるように com.googleusercontent.apps
6. ファイルを保存する Command + S

変更する AppDelegate.swift

Xcodeプロジェクトナビゲータで
Insert import GoogleSignIn at the top of the file
ファイルの中で func application(_ app: UIApplication, open url: URL, options: [UIApplication.OpenURLOptionsKey: Any] = [:]) 関数

関数を以下のように変更

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を取り入れたModified application openURL関数

ファイルを保存して Command + S

JavaScript/TypeScriptのcodeでGoogleログインを設定
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 (from step 1 以上)
  - webClientId: オプション - ウェブプラットフォームもサポートする場合や高度な機能が必要な場合のみ必要
  - iOSServerClientId: オプション - 以下の値と同じでください webClientId 提供された場合
  高度なセットアップの場合に webClientId および iOSServerClientId、を参照してくださいウェブセットアップガイドこれらの資格情報を作成する方法
  オフラインモードについて: 使用する mode: 'offline'、ログイン応答にはユーザー情報が直接含まれません。代わりに、サーバー認証codeを受け取り、ユーザー情報を取得するには、バックエンドサーバーで交換する必要があります。 SocialLogin.refresh({ provider: 'google' }) はこのモードでは利用できません; 再読み込みはバックエンドで実行する必要があります。交換された後は__CAPGO_KEEP_0__を実行してください。 serverAuthCode詳細については、一般的な設定ガイドを参照してください。ログイン機能を実装するには、ボタンを作成し、クリック時に次の__CAPGO_KEEP_0__を実行する必要があります。
3. Implement the login function. Create a button and run the following code on click
  
  クリップボードにコピー
```
const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// handle the response - contains user data
console.log(JSON.stringify(res))
```
  For offline mode:
```
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 Login プラグインは @capacitor/プライバシースクリーンで互換性がありません。

両方のプラグインを同時に使用する場合、プライバシースクリーンが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: {}
});

セクションのタイトル “iOS上のGoogleログインから続けて” iOS上で Googleログインを使用していて、認証とアカウントフローの計画を行いたい場合は、 @capgo/capacitor-social-login @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 Edit page

iOS上のGoogleログイン

導入

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

既知の問題

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

コピー

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