Erste Schritte

Kopiere einen Setup-Prompt mit den Installationsschritten und dem vollständigen Markdown-Guide für dieses 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

Du kannst unser KI-gestütztes Setup nutzen, um das Plugin zu installieren. Füge die Capgo Skills mit dem folgenden Befehl deinem KI-Tool hinzu:

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

Nutze dann diesen Prompt:

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

Wenn du ein manuelles Setup bevorzugst, installiere das Plugin mit den folgenden Befehlen und befolge die plattformspezifischen Anweisungen unten:

Paket installieren
Terminalfenster
```
bun add @capgo/capacitor-social-login
```
Mit nativen Projekten synchronisieren
Terminalfenster
```
bunx cap sync
```

Bei App-Start initialisieren

import { SocialLogin } from '@capgo/capacitor-social-login';

await SocialLogin.initialize({
  google: {
    webClientId: 'your-google-web-client-id',
    iOSClientId: 'your-google-ios-client-id',
    iOSServerClientId: 'your-google-web-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,
    },
  },
});

Wann Teams dieses Plugin wählen

Ein Paket für Google, Apple, Facebook, Twitter/X sowie eigene OAuth2- oder OIDC-Provider.
Android Google Sign-In via Credential Manager statt veralteter Community-Plugins.
Ionic Auth Connect-Style Provider über den dokumentierten Compatibility Layer.
Apps, die code zwischen Mobile- und Web-Builds teilen müssen.

Core-Flow-Beispiele

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

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

Session-Checks

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

Auth-Codes und Refresh

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

Erweiterte Helper

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

Anbieterspezifische Hinweise

Google-Offline-Modus

google.mode: 'offline' gibt zurück serverAuthCode beim Login. In diesem Modus sind logout, isLoggedIn, getAuthorizationCode und refresh nicht verfügbar.

Nutzt serverAuthCode nur als Input für deinen Backend-Token-Exchange. Falls du einen Aufruf benötigst SocialLogin.refresh() in der App aufrufen musst, verwende google.mode: 'online' stattdessen.

Apple

Setzen Sie useProperTokenExchange: true für striktes Token-Handling und useBroadcastChannel: true für ein vereinfachtes Android-Setup.

OAuth2 Web-Redirect-Flow

Nutzt OAuth2LoginOptions.flow: 'redirect' für Web-Flows, die die Seite verlassen.

Dynamische Provider-Abhängigkeiten

Du kannst festlegen, welche Provider enthalten sein sollen, um die native App-Größe zu reduzieren. Das ist besonders nützlich, wenn deine App nur bestimmte Provider benötigt.

Provider-Konfiguration hinzufügen zu capacitor.config.ts:

import type { CapacitorConfig } from '@capacitor/cli';

const config: CapacitorConfig = {
  appId: 'com.example.app',
  appName: 'MyApp',
  webDir: 'dist',
  plugins: {
    SocialLogin: {
      providers: {
        google: true,
        facebook: true,
        apple: true,
        twitter: false,
      },
      logLevel: 1,
    },
  },
};

export default config;

Provider-Werte bedeuten:

true: der Provider ist aktiviert und seine nativen Abhängigkeiten sind gebündelt.
false: der Provider ist deaktiviert und seine nativen Abhängigkeiten sind nicht gebündelt.

Wichtige Details:

Ausführen bunx cap sync nach der Änderung der Provider-Konfiguration.
Falls keine Provider-Konfiguration angegeben wird, sind alle Provider standardmäßig auf true aus Gründen der Abwärtskompatibilität.
Das Deaktivieren eines Providers mit false macht ihn zur Laufzeit nicht verfügbar, selbst wenn dieser Provider nur System-APIs nutzt.
Diese Konfiguration betrifft nur iOS und Android; Web ist nicht betroffen.
Apple Sign-In auf Android nutzt OAuth ohne externe SDK Abhängigkeiten.
Twitter/X nutzt Standard-OAuth 2.0 ohne externe SDK-Abhängigkeiten.

Um nur Google Sign-In und Apple Sign-In einzubinden:

plugins: {
  SocialLogin: {
    providers: {
      google: true,
      facebook: false,
      apple: true,
      twitter: false,
    },
  },
}

Weiter geht's nach Getting Started

Wenn du es nutzt Erste Schritte Um Authentifizierungs- und Account-Flows zu planen, verbinde es mit @capgo/capacitor-social-login verwenden für die native Funktion bei der Verwendung 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-biometric, und Zwei-Faktor-Authentifizierung für die Implementierungsdetails zur Zwei-Faktor-Authentifizierung.