Getting Started
Eine Einrichtungsanweisung mit den Installationsanweisungen und der vollständigen Markdown-Anleitung für diesen Plugin kopieren.
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.
-
Das Paket installieren
Terminal-Fenster bun add @capgo/capacitor-social-login -
Synchronisieren mit native Projekten
Terminalfenster bunx cap sync -
Initialisieren bei App-Start
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,},},});
Beispiel für Kernfluss
Abschnitt mit dem Titel „Beispiel für Kernfluss”Anmeldung
Abschnitt mit dem Titel „Anmeldung”await SocialLogin.login({ provider: 'google', options: { scopes: ['profile', 'email'] },});
await SocialLogin.login({ provider: 'oauth2', options: { providerId: 'github', scope: 'read:user user:email', },});Sitzungsprüfungen
Sitzungsprüfungenconst status = await SocialLogin.isLoggedIn({ provider: 'google' });await SocialLogin.logout({ provider: 'google' });Auth-Codes und -Refresh
Sitzungsprüfungen// For providers that support this modeconst authCodeResult = await SocialLogin.getAuthorizationCode({ provider: 'google' });await SocialLogin.refresh({ provider: 'google', options: {} as never });Erweiterte Hilfsmittel
Sitzungsprüfungenconst 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' });Anbieter-spezifische Hinweise
SitzungsprüfungenGoogle Offline-Modus
Sitzungsprüfungengoogle.mode: 'offline' Wertet serverAuthCode nicht verfügbar, wenn der Modus auf "Beenden" gesetzt ist. In diesem Modus sind Logout, isLoggedIn, getAuthorizationCode und refresh nicht verfügbar.
Nur als Eingabe für Ihren Backend-Token-Wechsel verwenden. Wenn Sie in der App aufrufen müssen, verwenden Sie serverAuthCode stattdessen. SocialLogin.refresh() Apple google.mode: 'online' Abschnitt mit dem Titel „Apple“
für Android vereinfachte Einrichtung. useProperTokenExchange: true OAuth2-Web-Redirect-Flow useBroadcastChannel: true __CAPGO_KEEP_0__
__CAPGO_KEEP_0__
Abschnitt mit dem Titel „OAuth2 Web-Redirect-Flow“Verwenden Sie OAuth2LoginOptions.flow: 'redirect' für Web-Flows, die vom Bildschirm weg navigieren.
Anbieterkonfiguration in Capacitor
Abschnitt mit dem Titel „Anbieterkonfiguration in Capacitor“Sie können nicht benötigte Anbieter deaktivieren, um native Binärdateien zu reduzieren:
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, }, }, },};Zugehörige Dokumentation
Abschnitt mit dem Titel „Zugehörige Dokumentation“- Übersicht der Integrationsmöglichkeiten
- Bessere Auth-Integration
- OAuth2- und OIDC-Anbieter
- Migrieren Sie von Ionic Auth Connect
- Anleitung zur Migration von Social Login Auth Connect
- Migrieren Sie legacy-Anbieter
- Lösung zur Migration von Ionic Enterprise-Plugins
Fortsetzen Sie von Getting Started
Abschnitt mit dem Titel “Fortsetzen Sie von Getting Started”Wenn Sie Ionic Auth Connect verwenden Getting Started um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit Mithilfe von @capgo/capacitor-social-login zur nativen Fähigkeit in Mithilfe von @capgo/capacitor-social-login, @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login, @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey, @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometrische, und Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.