Einstieg

Kopieren Sie einen Einrichtungsprompt mit den Installationsanweisungen und dem vollständigen Markdown-Guide für diesen 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.

Installieren Sie das Paket
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

await SocialLogin.login({
  provider: 'google',
  options: { scopes: ['profile', 'email'] },
});

await SocialLogin.login({
  provider: 'oauth2',
  options: {
    providerId: 'github',
    scope: 'read:user user:email',
  },
});

Sitzungsprüfungen

const status = await SocialLogin.isLoggedIn({ provider: 'google' });
await SocialLogin.logout({ provider: 'google' });

Authentifizierungs-Codes und -aktualisierungen

// For providers that support this mode
const authCodeResult = await SocialLogin.getAuthorizationCode({ provider: 'google' });
await SocialLogin.refresh({ provider: 'google', options: {} as never });

Erweiterte Hilfsfunktionen

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' });

Anbieter-spezifische Hinweise

Google-Offline-Modus

google.mode: 'offline' wird zurückgegeben serverAuthCode nicht verfügbar. In diesem Modus sind Logout, isLoggedIn, getAuthorizationCode und refresh nicht verfügbar.

Verwenden Sie serverAuthCode nur als Eingabe für Ihren Backend-Token-Wechsel. Wenn Sie in der App aufrufen müssen, verwenden Sie SocialLogin.refresh() Apple google.mode: 'online' Abschnitt mit dem Titel „Apple“

Setzen Sie

für Android eine vereinfachte Einrichtung. useProperTokenExchange: true OAuth2-Web-Redirect-Flow useBroadcastChannel: true Use only as input to your backend token exchange. If you need to call in the app, use instead.

Set for strict token handling and for Android simplified setup.

Verwenden Sie OAuth2LoginOptions.flow: 'redirect' für Web-Flows, die vom Bildschirm weg navigieren.

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,
      },
    },
  },
};