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

このプラグインのインストール手順とフルマークダウンガイドを含むセットアップコマンドをコピーしてください。

概要

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

インストール

古いパッケージを削除する:
ターミナル画面
```
npm uninstall @capacitor-community/apple-sign-in
```
新しいパッケージをインストールする:
ターミナル画面
```
npm install @capgo/capacitor-social-login
npx cap sync
```

Codeの変更

Import Changes

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

Initialization

Key Change: 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
  }
});

Important Note: For iOS, you provide basic configuration, while Android requires additional details including a Service ID and backend callback URL for web-based OAuth authentication.

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

ログアウト機能

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

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

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

iOSセットアップ

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

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

Androidセットアップ

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

The new plugin provides Android support out of the box, but requires additional setup:

Apple Developer PortalでサービスIDを作成してください
Web認証エンドポイントを設定してください
AndroidアプリをOAuthフローを処理するように設定してください
バックエンドサービス設定が必要です

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

主な利点

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

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

変更点のセクション

__CAPGO_KEEP_0__ -__CAPGO_KEEP_0__/default設定が設定されていません
Response object structure has changed -結果のネスト形式
Androidの実装にはバックエンドサービスが必要です OAuthのために
トークン更新のハンドリング方法が異なります -トークン管理が改善されました
エラーハンドリングとエラータイプが変更されました -より詳細なエラー

Apple Sign-In Migrationから@__CAPGO_KEEP_0__/social-loginまで進んでください。公式ドキュメントを参照してください。公式ドキュメントを参照してください。.

「@__CAPGO_KEEP_0__/social-login」を使用している場合 Apple Sign-In マイグレーションから@capgo/social-loginまで 認証とアカウントフローの計画に使用し、@__CAPGO_KEEP_0__/social-loginと接続する「@capgo/capacitor-social-login」を使用「@capgo/capacitor-social-login」のネイティブ機能のために「@capgo/capacitor-social-login」を使用「@capgo/capacitor-social-login」「@capgo/capacitor-social-login」の実装詳細のために「@capgo/capacitor-social-login」を使用「@capgo/capacitor-passkey」の実装詳細のために「@capgo/capacitor-passkey」を使用「@capgo/capacitor-passkey」「@capgo/capacitor-native-biometric」の実装詳細のために「@capgo/capacitor-native-biometric」を使用「@capgo/capacitor-native-biometric」 2要素認証 2要素認証の実装詳細について