Getting Started

GitHub

Kopieren Sie einen Setup-Befehl mit den Installationsanweisungen und der vollständigen Markdown-Guideline 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.

Installation

Sie können unser AI-gestütztes Setup verwenden, um das Plugin zu installieren. Fügen Sie die Capgo-Fähigkeiten zu Ihrem AI-Tool hinzu, indem Sie den folgenden Befehl verwenden:

npx skills add https://github.com/Cap-go/capgo-skills --skill capacitor-plugins

Dann verwenden Sie die folgende Anweisung:

Use the `capacitor-plugins` skill from `Cap-go/capgo-skills` to install the `@capgo/capacitor-social-login` plugin in my project.

Wenn Sie die manuelle Einrichtung bevorzugen, installieren Sie das Plugin, indem Sie die folgenden Befehle ausführen und folgen Sie den unten angegebenen plattform-spezifischen Anweisungen:

Das Paket installieren
Terminalfenster
```
bun add @capgo/capacitor-social-login
```
Synchronisieren mit native Projekten
Terminalfenster
```
bunx cap sync
```

Bei der App-Startinitialisierung initialisieren

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 die Kernablauffolge

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 Hilfsmittel

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 serverAuthCode aus der Anmeldung. In diesem Modus sind Logout, isLoggedIn, getAuthorizationCode und refresh nicht verfügbar.

Nur als Eingabe für Ihren Backend-Token-Austausch verwenden. Wenn Sie in der App aufrufen müssen, verwenden Sie serverAuthCode __CAPGO_KEEP_0__ SocialLogin.refresh() __CAPGO_KEEP_1__ google.mode: 'online' anstatt.

Apple

Set useProperTokenExchange: true für strikte Token-Handling und useBroadcastChannel: true für Android vereinfachte Einrichtung.

OAuth2-Web-Redirect-Flow

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

Konfiguration des Providers 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,
      },
    },
  },
};

__CAPGO_KEEP_0__

Wenn Sie " Getting Started" um die Authentifizierung und die Kontoflows zu planen, verbinden Sie es mit Mit @capgo/capacitor-social-login für die native Fähigkeit in Mit @capgo/capacitor-social-login, Mit @capgo/capacitor-social-login für die Implementierungsdetails in @capgo/capacitor-social-login, Mit @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey, Mit @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric, und Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.