Apple Sign-In のマイグレーションから @capgo/social-login

このプラグインのインストール手順と全てのマークダウンガイドを含む設定プロンプトをコピーする

概要

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

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

古いパッケージを削除してください:
ターミナル画面
```
npm uninstall @capacitor-community/apple-sign-in
```
新しいパッケージをインストールしてください:
ターミナル画面
```
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';

初期化

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

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

新しいプラグインは login() with provider: 'apple' とオプションスコープの代わりに、個別の構成値を渡すのではなく clientId と redirectURI.

レスポンスタイプの変更

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

更新されたプラグインは、前身にはない機能を導入しました

object with expiration details and a structured

section, replacing the flatter response format of the original package:

// 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 現在、ネイティブのOAuth認証を使用したWebベースの認証を受け取っています:

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

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

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

主な利点

モダン化されたパッケージが提供する機能

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

変更点

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

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

Apple Sign-In Migration から @__CAPGO_KEEP_0__/social-login を使用して 認証とアカウントフローの計画を行う場合、Apple Sign-In Migration から @capgo/social-login を接続してください Apple Sign-In Migration から @__CAPGO_KEEP_0__/social-login への移行 Capacitorの@capgo/capacitor-social-login Capacitorの@capgo/capacitor-social-loginのネイティブ機能 @capgo/capacitor-social-login Capacitorの@capgo/capacitor-social-loginの実装詳細 @capgo/capacitor-passkey Capacitorの@capgo/capacitor-passkeyの実装詳細 @capgo/capacitor-native-biometric Capacitorの@capgo/capacitor-native-biometricの実装詳細、二要素認証二要素認証の実装詳細