Apple Sign-In 移行を@capgo/social-loginに

概要

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

「インストール」というタイトルのセクション

1. ターミナルウィンドウ

   npm uninstall @capacitor-community/apple-sign-in

2. __CAPGO_KEEP_0__の新しいパッケージをインストールします。

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

Codeの変更

変更をインポート

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

初期化

主な変更点: The new plugin requires an initialization step that wasn’t needed before.

// 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' オプションのスコープを使用するのではなく、個別の構成値 clientId と redirectURI.

Response Type Changes

結果には、有効期限の詳細と構造化された 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'
});

Copy to clipboard

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

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

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

iOSの設定

iOS iOSは、Xcodeの機能を通じて、熟知の設定手順を維持しています。

1. iOSの設定はほとんど変わりません。まだ、次のことを行う必要があります。
   • Xcodeで「Appleでサインイン」機能を有効にします。
   • アプリをApple Developer Portalで設定
   • iOSの場合、codeの追加変更は必要ありません

Androidの設定

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

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

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

詳細なAndroidの設定手順については、 Android セットアップ ガイド.

主な利点

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

1. 複数のソーシャル プロバイダー (Google、Facebook、Apple) への統合 Google、Facebook、Apple への統合
2. TypeScript の型付けが向上 より良い型定義
3. デプロイ済みバージョンよりも活発なコミュニティのメンテナンス Android の組み込みサポート
4. ウェブベースの認証を通じて __CAPGO_KEEP_0__
5. 長期ログイン状態管理
6. エラー処理の改善 エラーの型が一貫している

変更点

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

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

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

Apple Sign-In Migrationを使用して、認証とアカウントフローの計画を行っている場合、@__CAPGO_KEEP_0__/__CAPGO_KEEP_1__-social-loginを接続してください @capgo/__CAPGO_KEEP_1__-social-loginを使用して、@capgo/__CAPGO_KEEP_1__-social-loginのネイティブ機能を接続してください Apple Sign-In Migrationを使用して認証とアカウントフローの計画を行っている場合 Using @capgo/capacitor-social-login for the native capability in Using @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要素認証の実装詳細