Getting Started

インストール

AI-Assisted セットアップを使用してプラグインをインストールできます。AI ツールに Capgo スキルを追加するには、以下のコマンドを実行してください。

npx skills add https://github.com/cap-go/capacitor-skills --skill capacitor-plugins

次に、以下のプロンプトを使用してください。

Use the `capacitor-plugins` skill from `cap-go/capacitor-skills` to install the `@capgo/capacitor-social-login` plugin in my project.

Manual セットアップを使用する場合は、以下のコマンドを実行してプラグインをインストールし、以下のプラットフォーム固有の指示に従ってください。

1. パッケージをインストール

   npm install @capgo/capacitor-social-login

2. Sync with native projects

   npx cap sync

3. アプリ起動時に初期化

   import { SocialLogin } from '@capgo/capacitor-social-login';
   
   await SocialLogin.initialize({
     google: {
       webClientId: 'your-google-web-client-id',
       iOSClientId: 'your-google-ios-client-id',
       iOSServerClientId: 'your-google-web-client-id',
       mode: 'online',
     },
     apple: {
       clientId: 'your-apple-service-id',
       useProperTokenExchange: true,
       useBroadcastChannel: true,
     },
     facebook: {
       appId: 'your-facebook-app-id',
     },
     twitter: {
       clientId: 'your-twitter-client-id',
       redirectUrl: 'myapp://oauth/twitter',
     },
     oauth2: {
       github: {
         appId: 'your-github-client-id',
         authorizationBaseUrl: 'https://github.com/login/oauth/authorize',
         accessTokenEndpoint: 'https://github.com/login/oauth/access_token',
         redirectUrl: 'myapp://oauth/github',
         scope: 'read:user user:email',
         pkceEnabled: true,
       },
     },
   });

Core flow examples

ログイン

await SocialLogin.login({
  provider: 'google',
  options: { scopes: ['profile', 'email'] },
});

await SocialLogin.login({
  provider: 'oauth2',
  options: {
    providerId: 'github',
    scope: 'read:user user:email',
  },
});

セッションチェック

const status = await SocialLogin.isLoggedIn({ provider: 'google' });
await SocialLogin.logout({ provider: 'google' });

認証コードとリフレッシュ

// For providers that support this mode
const authCodeResult = await SocialLogin.getAuthorizationCode({ provider: 'google' });
await SocialLogin.refresh({ provider: 'google', options: {} as never });

高度なヘルパー

const jwt = await SocialLogin.decodeIdToken({
  idToken: 'eyJhbGciOi...',
});

const { date } = await SocialLogin.getAccessTokenExpirationDate({
  accessTokenExpirationDate: Date.now() + 3600 * 1000,
});

const expired = await SocialLogin.isAccessTokenExpired({
  accessTokenExpirationDate: Date.now() + 1000,
});

const active = await SocialLogin.isRefreshTokenAvailable({ refreshToken: 'a-token' });

プロバイダ固有の注記

Google オフラインモード

google.mode: 'offline' returns serverAuthCode ログインモードでは、ログアウト、isLoggedIn、getAuthorizationCode、refreshは利用できません。

使用する serverAuthCode は、バックエンドのトークン交換にのみ入力してください。アプリ内で呼び出す必要がある場合は SocialLogin.refresh() を使用してください。 google.mode: 'online' セクション「Apple」

を使用して厳格なトークンハンドリングとAndroidの簡略化されたセットアップを設定します。

__CAPGO_KEEP_0__ useProperTokenExchange: true 使用する useBroadcastChannel: true は、バックエンドのトークン交換にのみ入力してください。アプリ内で呼び出す必要がある場合は

を使用してください。

ページから離れるWebフロー用に使用します。 OAuth2LoginOptions.flow: 'redirect' __CAPGO_KEEP_0__

動的プロバイダー依存関係

特定のプロバイダーを含めることでネイティブアプリサイズを削減できます。これは、必要なプロバイダーが特定のものだけの場合に最も便利です。

__CAPGO_KEEP_1__ capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'MyApp',
  webDir: 'dist',
  plugins: {
    SocialLogin: {
      providers: {
        google: true,
        facebook: true,
        apple: true,
        twitter: false,
      },
      logLevel: 1,
    },
  },
};

export default config;

プロバイダー値の意味は次のとおりです。

• true: このプロバイダーが有効で、ネイティブ依存関係がバンドルされています。
• false: このプロバイダーが無効で、ネイティブ依存関係がバンドルされていません。

重要な詳細:

• 実行 npx cap sync プロバイダーの設定を変更した後。
• プロバイダーの設定が提供されない場合は、すべてのプロバイダが true 後方互換性のために。
• を無効にすると、 false を無効にすると、実行時には利用できなくなる。ただし、そのプロバイダがシステムAPIのみを使用している場合でも。
• iOSとAndroidのみに影響します。Webには影響しません。
• Apple Sign-In on Android uses OAuth without external SDK dependencies.
• Twitter/X uses standard OAuth 2.0 without external SDK dependencies.

Google Sign-InとApple Sign-Inのみを含めるには:

plugins: {
  SocialLogin: {
    providers: {
      google: true,
      facebook: false,
      apple: true,
      twitter: false,
    },
  },
}

関連するドキュメント

• 統合概要
• より良い認証統合
• OAuth2 および OIDC プロバイダー
• トラブルシューティング
• プライバシーマニフェストと iOS URL ハンドラー
• Ionic Auth Connect から移行
• Social Login Auth Connect 移行ガイド
• 古いプロバイダーを移行
• Ionic Enterprise プラグイン移行ソリューション

Getting Started から続けて

Capgo を使用している場合 Getting Started を計画し、認証とアカウントフローに接続する @capgo/capacitor-social-loginを使用 @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の実装詳細のために、 Two-factor authentication Two-factor authenticationの実装詳細のために