Getting Started

复制一个包含安装步骤和本插件的完整 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 助手设置来安装插件。使用以下命令将 Capgo 技能添加到您的 AI 工具中：

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.

如果您更喜欢手动设置，请按照以下命令安装插件并遵循以下平台特定的说明：

安装包

npm install @capgo/capacitor-social-login

同步本地项目
终端窗口
```
npx 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,
    },
  },
});

核心流程示例

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 from login. In this mode logout, isLoggedIn, getAuthorizationCode, and refresh are not available.

仅用于您的后端令牌交换。 serverAuthCode 如果您需要在应用中调用， SocialLogin.refresh() 使用 google.mode: 'online' 代替。

Apple

设置 useProperTokenExchange: true 严格令牌处理和 useBroadcastChannel: true Android 简化设置

OAuth2 网页重定向流

用于页面导航时的 web 流程。 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;

: 表示提供者已启用且其原生依赖项已打包。

true: 表示提供者已禁用且其原生依赖项未打包。
false重要细节：

运行

Copy to clipboard npx cap sync 更改服务提供商配置后。
如果未提供服务提供商配置，则所有提供商都将默认为 true 为了向后兼容。
禁用一个提供商时， false 使其在运行时不可用，即使该提供商只使用系统API。
此配置仅影响iOS和Android;它不会影响Web。
在Android上使用Apple Sign-In时，使用OAuth而无需外部SDK依赖项。
Twitter/X使用标准OAuth 2.0而无需外部SDK依赖项。

仅包括Google Sign-In和Apple Sign-In：

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

从Getting Started继续

如果您正在使用 开始使用 为了计划身份验证和帐户流程，连接它与使用@capgo/capacitor-social-login 为native能力在使用@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, 和双因素身份验证为实现细节在双因素身份验证.