iOSでのGoogleログイン

はじめに

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

iOSでのGoogleログインの使用

このパートでは、iOSでGoogleログインを設定する方法を学びます。

Google consoleでiOS client IDを作成します
1. 検索バーをクリックします
2. credentialsを検索し、APIs and Services（スクリーンショットの2番）をクリックします
3. create credentialsをクリックします
4. OAuth client IDを選択します
5. Application typeをiOSに選択します
6. bundle IDを見つけます
  1. Xcodeを開きます
  2. Appをダブルクリックします
  3. Targets -> Appにいることを確認します
  4. Bundle Identifierを見つけます
  5. Google Consoleに戻り、Bundle IDにBundle Identifierを貼り付けます
7. オプションで、App Storeにアプリを公開している場合は、App Store IDまたはTeam IDをclient IDに追加します
8. すべての詳細を入力したら、createをクリックします
9. OKをクリックします
10. 新しく作成したiOS clientを開きます
11. 次のデータをコピーします
  
  この画像のnr. 1は、後でinitialize呼び出しのiOSClientIdになります。
  この画像のnr. 2は、後でYOUR_DOT_REVERSED_IOS_CLIENT_IDになります
アプリのInfo.plistを変更します
1. Xcodeを開いてInfo.plistファイルを見つけます
2. このファイルを右クリックしてソースコードとして開きます
3. 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を変更します

AppDelegateを開きます
ファイルの先頭にimport GoogleSignInを挿入します
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)
}

Modified application openURL function with GoogleSignIn handling

Command + Sでファイルを保存します

JavaScript/TypeScriptコードでGoogleログインを設定します
1. SocialLoginとCapacitorをインポートします
```
import { SocialLogin } from '@capgo/capacitor-social-login';
import { Capacitor } from '@capacitor/core';
```
2. initializeメソッドを呼び出します（これは一度だけ呼び出す必要があります）
  
  基本設定（オンラインモード - ほとんどのアプリに推奨）:
```
// onMountedはVue固有のものです
onMounted(() => {
  SocialLogin.initialize({
    google: {
      iOSClientId: '673324426943-redacted.apps.googleusercontent.com',
      mode: 'online' // デフォルトモード
    }
  })
})
```
  追加のclient IDを使用した高度な設定:
```
onMounted(() => {
  SocialLogin.initialize({
    google: {
      webClientId: 'YOUR_WEB_CLIENT_ID',           // オプション: Webプラットフォームサポート用
      iOSClientId: 'YOUR_IOS_CLIENT_ID',           // 必須: ステップ1から
      iOSServerClientId: 'YOUR_WEB_CLIENT_ID',     // オプション: webClientIdと同じ、一部の高度な機能に必要
      mode: 'online'                               // 'online'または'offline'
    }
  })
})
```
  Note
  Client ID要件:
  - iOSClientId: 必須 - googleusercontent.comで終わる必要があります（上記のステップ1から）
  - webClientId: オプション - Webプラットフォームもサポートする場合、または高度な機能が必要な場合にのみ必要
  - iOSServerClientId: オプション - 提供される場合はwebClientIdと同じ値である必要があります
  webClientIdとiOSServerClientIdを使用した高度な設定については、これらの資格情報を作成する方法についてWebセットアップガイドを参照してください。
  オフラインモードについて: mode: 'offline'を使用すると、ログイン応答にはユーザーデータが直接含まれません。代わりに、バックエンドサーバーを介してユーザー情報と交換する必要があるサーバー認証コードを受け取ります。実装の詳細については、一般的なセットアップガイドを参照してください。
3. ログイン関数を実装します。ボタンを作成し、クリック時に次のコードを実行します
  
  オンラインモードの場合:
```
const res = await SocialLogin.login({
  provider: 'google',
  options: {}
})
// レスポンスを処理 - ユーザーデータが含まれます
console.log(JSON.stringify(res))
```
  オフラインモードの場合:
```
const res = await SocialLogin.login({
  provider: 'google',
  options: {
    forceRefreshToken: true // オフラインモードに推奨
  }
})
// resにはserverAuthCodeが含まれ、ユーザーデータは含まれません
// serverAuthCodeをバックエンドに送信してユーザー情報を取得します
console.log('Server auth code:', res.result.serverAuthCode)
```
アプリケーションをテストします
1. アプリをビルドしてcap syncを実行します
2. すべて正しく行った場合、Googleログインフローが正しく動作することを確認できます

既知の問題

Privacy Screenプラグインとの非互換性

Googleログインプラグインは@capacitor/privacy-screenと互換性がありません。両方のプラグインを一緒に使用すると、Googleログインwebviewがプライバシー画面によって中断されます。

回避策: ログイン関数を呼び出す前に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: {}
});