Inicio rápido
Copie una solicitud de configuración con los pasos de instalación y la guía de markdown completa para este plugin.
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.
-
Ventana de terminal
Copiar para IA bun add @capgo/capacitor-social-login -
Sincronizar con proyectos nativos
Ventana de terminal bunx cap sync -
Iniciar en arranque de aplicación
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,},},});
Ejemplos de flujo principal
Sección titulada “Ejemplos de flujo principal”Iniciar sesión
Sección titulada “Iniciar sesión”await SocialLogin.login({ provider: 'google', options: { scopes: ['profile', 'email'] },});
await SocialLogin.login({ provider: 'oauth2', options: { providerId: 'github', scope: 'read:user user:email', },});Verificar sesión
Sección titulada “Verificaciones de sesión”const status = await SocialLogin.isLoggedIn({ provider: 'google' });await SocialLogin.logout({ provider: 'google' });Códigos de autenticación y refresco
Sección titulada “Códigos de autenticación y refresco”// For providers that support this modeconst authCodeResult = await SocialLogin.getAuthorizationCode({ provider: 'google' });await SocialLogin.refresh({ provider: 'google', options: {} as never });Ayudas avanzadas
Sección titulada “Ayudas avanzadas”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' });Notas específicas del proveedor
Sección titulada “Notas específicas del proveedor”Modo offline de Google
Sección titulada “Modo offline de Google”google.mode: 'offline' devtools returns tokens from login. En este modo, logout, isLoggedIn, getAuthorizationCode, y refresh no están disponibles. serverAuthCode Use solo como entrada para el intercambio de token en tu backend. Si necesitas llamar
en la aplicación, usa serverAuthCode Apple SocialLogin.refresh() Sección titulada “Apple” google.mode: 'online' Establece
para manejo de token estricto y
para Android configuración simplificadaflujo de redireccionamiento web OAuth2 useProperTokenExchange: true Use useBroadcastChannel: true only as input to your backend token exchange. If you need to call
in the app, use
Flujo de redirección web OAuth2Usar OAuth2LoginOptions.flow: 'redirect' para flujos web que se desplazan desde la página.
Configuración del proveedor en Capacitor
Sección titulada “Configuración del proveedor en Capacitor”Puede deshabilitar proveedores no utilizados para reducir binarios nativos:
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, }, }, },};