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

このプラグインのインストール手順と全マークダウンガイドを含む設定用の質問をコピーします。

概要

このガイドでは、からを移行するための包括的なステップを提供し、改善された認証エクスペリエンスとともに、Smoothな移行を保証します。新しいプラグインは、単一の __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.

This

Remove the old package:

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

Install the new package:

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

Google Auth セットアップにおける重要な変更

Web Client ID の要件

Critical Change: Web Client ID をすべてのプラットフォームで使用する必要があります。

必要なのは

Google Cloud ConsoleでWebクライアントIDを作成する必要があります。作成していない場合はクレデンシャルを取得する方法)
__CAPGO_KEEP_0__の変更を使用します。 webClientId すべてのプラットフォームの
Androidの場合、SHA1と共にAndroidクライアントIDを作成する必要がありますが、このトークンは使用されません。__CAPGO_KEEP_0__ Changes)

セクション「Code Changes」

セクション「変更をインポート」

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のセットアップガイド)
AppDelegate.swiftの構成を更新してください 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" />

「レスポンスタイプの変更」というタイトルのセクション

クリップボードにコピー

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

__CAPGO_KEEP_0__

サービスプロバイダー: 認証サービスプロバイダーを識別します ('google')
result.accessToken: 有効期限付きのアクセストークンデータ
result.idToken: 認証用のIDトークン
result.profile: メールアドレス、名前、画像URLを含むユーザープロファイル情報

追加機能

新しいパッケージでは、Google 以外の複数のソーシャル認証サービスをサポートします:

統合されたアプローチにより、以下の利点が得られます。

すべてのプロバイダーで API が一貫している
TypeScript のサポートが向上
エラー処理が改善
アクティブなメンテナンスとコミュニティサポート

以下のメインドキュメント詳細なセットアップ手順については、以下の追加プロバイダーを参照してください。

あなたが使用している Google Auth Migration to @capgo/social-login を計画し、接続して Using @capgo/capacitor-social-login Using @capgo/capacitor-social-login @capgo/capacitor-social-login for the implementation detail in @capgo/capacitor-social-login, @capgo/capacitor-passkey for the implementation detail in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric for the implementation detail in @capgo/capacitor-native-biometric, and __CAPGO_KEEP_0__ __CAPGO_KEEP_1__