Apple @capgo/social-login へのサインインの移行

概要

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

インストール

古いパッケージを削除します。
Terminal window
```
npm uninstall @capacitor-community/apple-sign-in
```
新しいパッケージをインストールします。
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 では Web ベースの OAuth 認証用のサービス ID やバックエンドコールバック 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'
  }
});

新しいプラグインは、clientId や redirectURI などの個別の設定値を渡すのではなく、login() と provider: 'apple' およびオプションのスコープを使用します。

応答タイプの変更

結果には、有効期限の詳細を含む 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'
});

これらのメソッドは、認証ステータスと logout() 機能を検証するための isLoggedIn() を提供します。

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

iOS セットアップ

iOS は、Xcode 機能を通じて使い慣れたセットアップ手順を維持します。

iOS セットアップはほぼ同じままです。さらに次のことを行う必要があります。
- Xcode で「Apple でサインイン」機能を有効にする
- Apple 開発者ポータルでアプリを構成します
- iOS には追加のコード変更は必要ありません

Android セットアップ

Android は、Web ベースの OAuth 認証経由でネイティブサポートを受けるようになりました。

新しいプラグインは、すぐに使える Android サポートを提供しますが、追加のセットアップが必要です。

Apple 開発者ポータルでサービス ID を作成します。
Web 認証エンドポイントを構成する
OAuth フローを処理するように Android アプリを設定します
バックエンドサービスの構成が必要です

Android セットアップ手順の詳細については、Android セットアップガイドを参照してください。

主な利点

最新化されたパッケージは以下を提供します。

複数のソーシャルプロバイダーにわたる 統合 API (Google、Facebook、Apple)
型定義が改善され、TypeScript タイピングが改善されました
非推奨バージョンと比較した アクティブなコミュニティメンテナンス
Web ベースの認証による 組み込みの Android サポート
永続的なログイン状態の管理
一貫したエラータイプによる より優れたエラー処理

重大な変更1. 明示的な初期化が必要になりました - デフォルト構成はありません

応答オブジェクトの構造が変更されました - ネストされた結果の形式
Android の実装には、OAuth のバックエンドサービスが必要です
トークンのリフレッシュ処理が異なります - トークン管理の改善
エラー処理とエラーの種類が変更されました - より詳細なエラー

For more detailed setup instructions, please refer to the official documentation.