はじめに

このプラグインのインストール手順と完全なMarkdownガイドを含むセットアッププロンプトをコピー

        Set up this Capacitor plugin in the project.

Use the package manager already used by the project.
Install these package(s): `@capgo/capacitor-social-login`
Run the required Capacitor sync/update step after installation.
Read this markdown guide for the full setup steps: https://raw.githubusercontent.com/Cap-go/website/refs/heads/main/apps/docs/src/content/docs/docs/plugins/social-login/getting-started.mdx
Use that guide for platform-specific steps, native file edits, permissions, config changes, imports, and usage setup.
If that guide references other docs pages, read them too.

インストール

AIアシストセットアップを使ってプラグインをインストールできます。以下のコマンドで、お使いの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.

手動セットアップを希望する場合は、以下のコマンドでプラグインをインストールし、下記のプラットフォーム別の手順に従ってください：

パッケージをインストール
ターミナルウィンドウ
```
bun add @capgo/capacitor-social-login
```
ネイティブプロジェクトと同期
ターミナルウィンドウ
```
bunx cap sync
```

アプリ起動時に初期化

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

このプラグインを選ぶべきケース

Google、Apple、Facebook、Twitter/X、およびカスタムOAuth2やOIDCプロバイダーに対応する単一パッケージ。
非推奨のコミュニティプラグインではなく、Credential Managerを使用したAndroid Google Sign-In。
ドキュメント化された互換レイヤーを通じた、Ionic Auth Connectスタイルのプロバイダー。
モバイルとWebのビルド間でログイン code を共有する必要があるアプリ。

コアフローの例

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' を返します serverAuthCode ログイン時。このモードでは、logout、isLoggedIn、getAuthorizationCode、およびrefreshは利用できません。

使用するのは serverAuthCode バックエンドでのトークン交換の入力としてのみ使用されます。呼び出しが必要な場合は、 SocialLogin.refresh() アプリ内で、 google.mode: 'online' 代わりに。

Apple

設定 useProperTokenExchange: true 厳格なトークン管理と useBroadcastChannel: true Androidの簡略化されたセットアップ用。

OAuth2 ウェブリダイレクトフロー

使用するのは OAuth2LoginOptions.flow: 'redirect' ページから遷移するウェブフロー用。

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

ネイティブアプリのサイズを削減するために、含めるプロバイダーを設定できます。特定のプロバイダーのみが必要な場合に非常に有効です。

プロバイダー設定を追加 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;

Providerの値の意味:

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

重要な詳細:

実行する bunx cap sync プロバイダーの設定変更後。
プロバイダーの設定が指定されていない場合、すべてのプロバイダーはデフォルトで true 後方互換性のために。
プロバイダーを false 無効にすると、そのプロバイダーがシステムAPIのみを使用している場合でも、実行時に利用できなくなります。
この設定はiOSとAndroidにのみ影響し、Webには影響しません。
AndroidでのApple Sign-Inは、外部の SDK 依存関係なしでOAuthを使用します。
Twitter/Xは、外部のSDK依存関係なしで標準的なOAuth 2.0を使用します。

Google Sign-InとApple Sign-Inのみを含める場合：

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

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 の実装詳細、および二要素認証二要素認証の実装詳細については、