Démarrage
Copiez un prompt de configuration avec les étapes d'installation et le guide Markdown complet pour ce 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.
-
Installer le package
Fenêtre de terminal bun add @capgo/capacitor-social-login -
Synchroniser avec les projets natifs
Fenêtre de terminal bunx cap sync -
Initialiser à l'ouverture de l'application
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,},},});
Exemples de flux de base
Section intitulée “Exemples de flux de base”Se connecter
Section intitulée « Connexion »await SocialLogin.login({ provider: 'google', options: { scopes: ['profile', 'email'] },});
await SocialLogin.login({ provider: 'oauth2', options: { providerId: 'github', scope: 'read:user user:email', },});Vérifications de session
Section intitulée « Vérifications de session »const status = await SocialLogin.isLoggedIn({ provider: 'google' });await SocialLogin.logout({ provider: 'google' });Codes d'authentification et de rappel
Section intitulée « Codes d'authentification et de rappel »// For providers that support this modeconst authCodeResult = await SocialLogin.getAuthorizationCode({ provider: 'google' });await SocialLogin.refresh({ provider: 'google', options: {} as never });Aideurs avancés
Section intitulée « Aideurs avancés »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' });Notes spécifiques au fournisseur
Section intitulée « Notes spécifiques au fournisseur »Mode hors ligne de Google
Section intitulée « Mode hors ligne de Google »google.mode: 'offline' retourne serverAuthCode à partir de la connexion. Dans ce mode, la déconnexion, isLoggedIn, getAuthorizationCode et refresh ne sont pas disponibles.
Utilisez serverAuthCode seulement en tant qu'entrée pour l'échange de jetons de votre backend. Si vous avez besoin d'appeler SocialLogin.refresh() au lieu. google.mode: 'online' Apple
Section intitulée « Apple »
DéfinissezSet useProperTokenExchange: true pour un traitement strict des jetons et useBroadcastChannel: true pour la mise en place simplifiée d'Android.
flux de redirection OAuth2 web
Section intitulée “flux de redirection OAuth2 web”Utilisez OAuth2LoginOptions.flow: 'redirect' pour les flux web qui se déplacent loin de la page.
Configuration du fournisseur dans Capacitor
Section intitulée “Configuration du fournisseur dans Capacitor”Vous pouvez désactiver les fournisseurs non utilisés pour réduire les binaires natifs :
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, }, }, },};