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

Apple Sign-In マイグレーションから@capgo/social-loginに進みます

GitHub

このガイドでは、レガシープラグインからモダン @capacitor-community/apple-sign-in パッケージへの移行を説明しています。新しいプラグインは、複数のソーシャル認証プロバイダーに対する統一されたインターフェイスを提供し、改善されたTypeScriptサポートとアクティブなメンテナンスを提供します。 @capgo/capacitor-social-login インストール

インストールセクション

古いパッケージを削除してください:
  1. ターミナル画面

    クリップボードにコピー
    npm uninstall @capacitor-community/apple-sign-in
  2. Install the new package:

    Terminal window
    npm install @capgo/capacitor-social-login
    npx cap sync
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.

レスポンスタイプの変更

レスポンスタイプの変更

__CAPGO_KEEP_0__が含まれる結果は、 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 Xcodeの機能を通じて、熟知のセットアップ手順を維持します。

  1. iOSのセットアップはほとんど変わりません。まだ、次のことを行う必要があります。
    • Xcodeで「Sign In with Apple」を有効にします。
    • Apple Developer Portalでアプリを設定します。
    • No additional code changes required for iOS

Android は、ウェブベースのOAuth認証を介してネイティブサポートを受けます:

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

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

詳細なAndroidセットアップの手順については、以下のドキュメントを参照してください。 Androidのセットアップガイド.

現代化されたパッケージは次の機能を提供します。

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

変更点

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

詳細なセットアップ手順については、公式ドキュメントを参照してください 公式ドキュメント.

Apple Sign-In Migrationから@capgo/social-loginに進みましょう

Apple Sign-In Migrationから@capgo/social-loginに進む

Apple Sign-In Migrationを@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginで使用している場合 Apple Sign-In Migrationを@capgo/__CAPGO_KEEP_1__-social-loginで使用 Apple Sign-In Migrationを@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginで使用している場合 Apple Sign-In Migrationを@capgo/capacitor-social-loginで使用 Apple Sign-In Migrationを@capgo/capacitor-social-loginで使用 Apple Sign-In Migrationを@capgo/capacitor-social-loginで使用 実装詳細については @capgo/capacitor-social-login を参照してください。 @capgo/capacitor-passkey 実装詳細については @capgo/capacitor-passkey を参照してください。 @capgo/capacitor-native-biometric 実装詳細については @capgo/capacitor-native-biometric、 2要素認証 実装詳細については 2要素認証を参照してください。