开始使用
复制一个设置提示,包括安装步骤和此插件的完整 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.
-
安装包
终端窗口 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',iOSServerClientId: 'your-google-server-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', },});会话检查
Session 检查const status = await SocialLogin.isLoggedIn({ provider: 'google' });await SocialLogin.logout({ provider: 'google' });认证码和刷新
认证码和刷新// For providers that support this modeconst 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 离线模式google.mode: 'offline' 返回 serverAuthCode 从登录中返回。 在此模式下,注销,isLoggedIn,getAuthorizationCode,和refresh不可用。
仅 serverAuthCode 作为输入到您的后端令牌交换。 如果您需要在应用中调用 SocialLogin.refresh() 代替。 google.mode: 'online' Apple
标题为“Apple”
设置用于严格令牌处理和 useProperTokenExchange: true Android简化设置 useBroadcastChannel: true OAuth2 web重定向流
for strict token handling and
OAuth2 web redirect 流程用于需要从页面导航的 Web 流程。 OAuth2LoginOptions.flow: 'redirect' __CAPGO_KEEP_0__中的提供者配置
Capacitor中的提供者配置
Section titled “Provider configuration in Capacitor”复制到剪贴板
import type { CapacitorConfig } from '@capacitor/cli';
const config: CapacitorConfig = { appId: 'com.example.app', appName: 'My App', webDir: 'dist', plugins: { SocialLogin: { providers: { google: true, facebook: true, apple: true, twitter: false, }, }, },};