Google Auth Migration から @capgo/social-login まで

概要

このガイドでは、からへの移行のための包括的なステップを提供し、改善された認証体験を保証します。新しいプラグインは、単一の統一された __CAPGO_KEEP_0__ の下で複数のソーシャル認証プロバイダーを統合します。 @codetrix-studio/capacitor-google-auth インストール @capgo/capacitor-social-login, ensuring a smooth transition and improved authentication experience. The new plugin unifies multiple social authentication providers under a single, consistent API.

古いパッケージを削除してください：

1. Remove the old package:

   npm uninstall @codetrix-studio/capacitor-google-auth

2. 新しいパッケージをインストールする:

   npm install @capgo/capacitor-social-login
   npx cap sync

Google Auth の設定における重要な変更

Web クライアント ID の要件

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

必要な手順は次のとおりです:

1. Google Cloud ConsoleでWeb Client IDを作成してください。作成していない場合はHow to get the credentials)
2. Capgoで使用するWeb Client IDを入力してください。 webClientId field for all platforms
3. Androidの場合、SHA1と共にAndroid Client IDを作成する必要がありますが、このIDはトークンを使用するために必要ではありません (Android setup guide)

Code Changes

Changesをインポート

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

Initialization

セットアップは単純な呼び出しから構造化された呼び出しに変わります。 GoogleAuth.initialize() Google の構成がネストされます。 SocialLogin.initialize() __CAPGO_KEEP_0__

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
  }
});

ログイン方法は単純な呼び出しから構造化された呼び出しに変わります。

__CAPGO_KEEP_0__ 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

1. アップデートしてください 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

1. AppDelegate.swiftに大きな変更は必要ありません（iOSのセットアップガイド)

2. アップデートしてください。 capacitor.config.json設定を

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

Web

1. Google Sign-Inのメタタグを削除する場合は、以下の手順に従ってください: index.html Google Sign-Inを使用していましたら、以下の手順に従ってください:

<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')
• __CAPGO_KEEP_0__: 有効期限付きアクセストークンの詳細
• : IDトークンを含む認証情報: メールアドレス、名前、画像URLを含むユーザープロファイル
• 追加機能「追加機能」セクション

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

Facebook Login

• Additional Capabilities
• Section titled “Additional Capabilities”

統一されたアプローチにより、以下の機能が提供されます。

• すべてのプロバイダーで API が一貫して実行されます。
• TypeScript のサポートが向上しました。
• エラー処理が改善されました。
• アクティブなメンテナンスとコミュニティサポートが提供されます。

以下のドキュメントを確認してください。 追加のプロバイダー用の詳細なセットアップ手順については、主なドキュメントを参照してください。 Google Auth Migration から @__CAPGO_KEEP_0__/social-login に進みましょう。

セクションのタイトルは “Google Auth Migration から @capgo/social-login に進みましょう。” です。

Google Auth Migration を使用している場合、@__CAPGO_KEEP_0__/social-login に進みましょう。 Google Auth Migration を使用している場合、@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要素認証 2要素認証の実装詳細