Google Authから@capgo/social-loginへの移行

インストール手順と、このプラグインの完全なMarkdownガイドを含むセットアッププロンプトをコピーします。

概要

このガイドでは、からの移行に関する包括的な手順を提供します @codetrix-studio/capacitor-google-auth まで @capgo/capacitor-social-login、スムーズな移行と認証体験の向上を保証します。新しいプラグインは、複数のソーシャル認証プロバイダーを単一の一貫したAPIの下に統合します。

インストール

古いパッケージを削除します:
ターミナル
```
npm uninstall @codetrix-studio/capacitor-google-auth
```
新しいパッケージをインストールします：
ターミナル
```
npm install @capgo/capacitor-social-login
npx cap sync
```

Google Auth設定の重要な変更点

Web Client IDの必須化

重要な変更：更新されたプラグインでは、すべてのプラットフォームで Web Client ID を使用する必要があります。

以下の対応が必要です：

Google Cloud Console に Web クライアント ID がまだない場合は作成してください（認証情報の取得方法)
この Web Client ID を webClientId 全プラットフォームのフィールドで使用します
Android の場合は、引き続き SHA1 を使って Android Client ID を作成する必要がありますが、これは検証目的のみで、トークンは使用されません（Android セットアップガイド)

Code の変更点

インポートの変更

import { GoogleAuth } from '@codetrix-studio/capacitor-google-auth';
import { SocialLogin } from '@capgo/capacitor-social-login';

初期化

セットアップは、シンプルなものから GoogleAuth.initialize() より構造化された呼び出しへ SocialLogin.initialize() ネストされた Google 設定を使う場合：

GoogleAuth.initialize({
  clientId: 'CLIENT_ID.apps.googleusercontent.com',
  scopes: ['profile', 'email'],
  grantOfflineAccess: true,
});

await SocialLogin.initialize({
  google: {
    webClientId: 'WEB_CLIENT_ID.apps.googleusercontent.com', // Use Web Client ID for all platforms
    iOSClientId: 'IOS_CLIENT_ID', // for iOS
    mode: 'offline' // replaces grantOfflineAccess
  }
});

ログイン方法は次から変更されます： GoogleAuth.signIn() まで SocialLogin.login() プロバイダーを明示的に指定する場合：

const user = await GoogleAuth.signIn();
const res = await SocialLogin.login({
  provider: 'google',
  options: {
    scopes: ['email', 'profile'],
    forceRefreshToken: true // if you need refresh token
  }
});

プラットフォーム固有の変更

Androidでは

以下のファイルを更新して、 MainActivity.java (Androidの完全セットアップガイド):

 import ee.forgr.capacitor.social.login.GoogleProvider;
 import ee.forgr.capacitor.social.login.SocialLoginPlugin;
 import ee.forgr.capacitor.social.login.ModifiedMainActivityForSocialLoginPlugin;
 import com.getcapacitor.PluginHandle;
 import com.getcapacitor.Plugin;
 import android.content.Intent;
 import android.util.Log;

 public class MainActivity extends BridgeActivity {
 public class MainActivity extends BridgeActivity implements ModifiedMainActivityForSocialLoginPlugin {

   @Override
   public void onActivityResult(int requestCode, int resultCode, Intent data) {
     super.onActivityResult(requestCode, resultCode, data);

     if (requestCode >= GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MIN && requestCode < GoogleProvider.REQUEST_AUTHORIZE_GOOGLE_MAX) {
       PluginHandle pluginHandle = getBridge().getPlugin("SocialLogin");
       if (pluginHandle == null) {
         Log.i("Google Activity Result", "SocialLogin login handle is null");
         return;
       }
       Plugin plugin = pluginHandle.getInstance();
       if (!(plugin instanceof SocialLoginPlugin)) {
         Log.i("Google Activity Result", "SocialLogin plugin instance is not SocialLoginPlugin");
         return;
       }
       ((SocialLoginPlugin) plugin).handleGoogleLoginIntent(requestCode, data);
     }
   }

   public void IHaveModifiedTheMainActivityForTheUseWithSocialLoginPlugin() {}
}

iOSと

AppDelegate.swift に大きな変更は不要です（iOSのセットアップガイド)
設定を更新してください： capacitor.config.json新しいプラグインでは使用しません：

{
  "plugins": {
   "GoogleAuth": {
     "scopes": ["profile", "email"],
     "serverClientId": "xxxxxx-xxxxxxxxxxxxxxxxxx.apps.googleusercontent.com",
     "forceCodeForRefreshToken": true
   }
}

Web

Google Sign-In のメタタグを以下から削除してください index.html これらを使用していた場合:

<meta name="google-signin-client_id" content="{your client id here}" />
<meta name="google-signin-scope" content="profile email" />

レスポンスタイプの変更

認証レスポンスは、プロバイダー情報、アクセストークン、ID トークン、ユーザープロフィールデータを含む構造化オブジェクトを返すようになりました:

interface GoogleLoginResponse {
  provider: 'google';
  result: {
    accessToken: {
      token: string;
      expires: string;
      // ... other token fields
    } | null;
    idToken: string | null;
    profile: {
      email: string | null;
      familyName: string | null;
      givenName: string | null;
      id: string | null;
      name: string | null;
      imageUrl: string | null;
    };
  };
}

レスポンスの構造には以下が含まれます:

プロバイダーを有効にする：認証プロバイダーを識別します（'google')
result.accessToken：有効期限を含むアクセストークンの詳細
result.idToken：認証用のIDトークン
result.profile：メールアドレス、名前、画像URLを含むユーザープロフィール情報

追加の機能

新しいパッケージは、Google以外の複数のソーシャル認証プロバイダーもサポートします：

この統合アプローチにより、以下が提供されます：

すべてのプロバイダーで一貫した API
TypeScript サポートの向上
エラーハンドリングの改善
活発なメンテナンスとコミュニティサポート

チェック：メインドキュメントこれらの追加プロバイダーの詳細なセットアップ手順については、

使用している場合 Google Authから@capgo/social-loginへの移行 認証とアカウントフローを計画するには、これを次と連携させてください @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 の実装の詳細、および 2要素認証二要素認証の実装の詳細については。