メインコンテンツにジャンプ

Apple Sign-Inの移行から@capgo/social-login

このガイドでは、レガシーシステムから移行する方法を説明しています。 @capacitor-community/apple-sign-in __CAPGO_KEEP_0__ @capgo/capacitor-social-login modernなプラグイン

パッケージ。新しいプラグインは、複数のソーシャル認証プロバイダーに対する統一されたインターフェイスを提供し、改善されたTypeScriptサポートとアクティブなメンテナンスを提供します。

インストール
  1. インストール

    古いパッケージを削除する:
    npm uninstall @capacitor-community/apple-sign-in
  2. コピー

    新しいパッケージをインストールする:
    npm install @capgo/capacitor-social-login
    npx cap sync

Code Changes

Code Changes
import { SignInWithApple } from '@capacitor-community/apple-sign-in';
import { SocialLogin } from '@capgo/capacitor-social-login';

キー変更: 新しいプラグインには、以前必要なかった初期化ステップが必要です。

// No initialization needed in old package
// For iOS: Basic configuration
await SocialLogin.initialize({
apple: {} // Basic iOS configuration
});
// For Android: Additional configuration required
await SocialLogin.initialize({
apple: {
clientId: 'YOUR_SERVICE_ID', // Service ID from Apple Developer Portal
redirectUrl: 'https://your-backend.com/callback' // Your backend callback URL
}
});

重要な注意: iOSの場合、基本的な設定を提供しますが、AndroidではサービスIDとWebベースのOAuth認証のためにバックエンドのコールバックURLを含む追加の詳細が必要です。

APIが複数のパラメータから単純化されます。

const result = await SignInWithApple.authorize({
clientId: 'com.your.app',
redirectURI: 'https://your-app.com/callback',
scopes: 'email name',
state: '12345',
nonce: 'nonce'
});
const result = await SocialLogin.login({
provider: 'apple',
options: {
// Optional: Add scopes if needed
scopes: ['email', 'name'],
nonce: 'nonce'
}
});

新しいプラグインは login()provider: 'apple' オプションのスコープを含む代わりに、個々の設定値を渡すのではなく clientIdredirectURI.

結果には、有効期限の詳細と構造化された accessToken セクションが含まれます。元のパッケージのフラットなレスポンス形式を置き換えます。 profile クリップボードにコピー

// Old response type
interface AppleSignInResponse {
response: {
user: string;
email: string | null;
givenName: string | null;
familyName: string | null;
identityToken: string | null;
authorizationCode: string | null;
};
}
// New response type
interface SocialLoginResponse {
provider: 'apple';
result: {
accessToken: {
token: string;
expiresIn?: number;
refreshToken?: string;
} | null;
idToken: string | null;
profile: {
user: string;
email: string | null;
givenName: string | null;
familyName: string | null;
};
};
}

更新されたプラグインでは、前身にはない機能が導入されています:

ログイン状態の確認

// Not available in old package
const status = await SocialLogin.isLoggedIn({
provider: 'apple'
});

ログアウト機能

// Not available in old package
await SocialLogin.logout({
provider: 'apple'
});

これらのメソッドは isLoggedIn() 認証状態の確認と logout() 機能を提供します。

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

セクション:プラットフォーム固有の変更

iOS iOSは、Xcodeの機能を通じて、熟知のセットアップ手順を維持しています:

  1. iOSのセットアップはほとんど変わっていません。まだ必要なのは:
    • Xcodeで「Sign In with Apple」機能を有効にする
    • Apple Developer Portalでアプリを設定する
    • iOSには追加のcodeの変更が必要ありません

Android Androidは、WebベースのOAuth認証を通じてネイティブのサポートを受けます:

新しいプラグインは、Androidのサポートを箱から提供していますが、追加の設定が必要です:

  1. Apple Developer PortalでサービスIDを作成する
  2. Web認証エンドポイントを設定する
  3. AndroidアプリをOAuthフローを処理するように設定する
  4. バックエンドサービス設定が必要

詳細なAndroid設定手順については、 Android設定ガイド.

モダナイズされたパッケージが提供しています:

  1. 複数のソーシャルプロバイダー(Google、Facebook、Apple)に対する統一されたAPI 複数のソーシャルプロバイダー(Google、Facebook、Apple)に対する統一されたAPI
  2. 改善されたTypeScriptの型付け より良い型定義
  3. アクティブなコミュニティメンテナンス 非推奨バージョンと比較して
  4. Androidの組み込みサポート ウェブベースの認証を通じて
  5. ログイン状態の永続化
  6. 一貫したエラータイプを持つエラー処理 変更点

「変更点」のセクション

明示的な初期化が必要になりました
  1. __CAPGO_KEEP_0__ - __CAPGO_KEEP_0__のデフォルト設定はありません。
  2. レスポンスオブジェクトの構造が変更されました。 - 結果のネスト形式
  3. Androidの実装にはバックエンドサービスが必要です。 OAuthのために
  4. トークン更新のハンドリングは異なります。 - トークン管理が改善されました。
  5. エラーハンドリングとエラータイプが変更されました。 - 詳細なエラー情報

詳細なセットアップ手順については、公式ドキュメントを参照してください。 Apple Sign-In Migrationから@__CAPGO_KEEP_0__/social-loginまで続けてください。.

Apple Sign-In マイグレーションを使用して Apple Sign-In マイグレーションを使用して認証とアカウントフローの計画を行い、@capgo/social-loginと接続する 「@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-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」の実装詳細のために for the implementation detail in @capgo/capacitor-native-biometric, and 2要素認証 2要素認証の実装詳細について