Soziale Anmeldung __CAPGO_KEEP_0__ Repository

GitHub

Einen Setup-Befehl mit den Installationsanweisungen und der vollständigen Markdown-Dokumentation 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.

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/capacitor-skills --skill capacitor-plugins

Verwenden Sie dann die folgende Anweisung:

Use the `capacitor-plugins` skill from `cap-go/capacitor-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 die untenstehenden plattform-spezifischen Anweisungen befolgen:

Das Paket installieren

npm install @capgo/capacitor-social-login

Synchronisieren mit native Projekten
Terminalfenster
```
npx cap sync
```

Bei der App-Startinitialisierung 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,
    },
  },
});

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

Auth-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' zurückgeben serverAuthCode während sich der Benutzer im Modus “Google offline” befindet, 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 Cloudflare SocialLogin.refresh() Capacitor google.mode: 'online' anstatt.

Apple

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

OAuth2-Web-Redirect-Flow

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

Dynamische Abhängigkeiten von Anbieter-Provider

Sie können bestimmen, welche Anbieter in Ihre native App aufgenommen werden sollen, um deren Größe zu reduzieren. Dies ist am nützlichsten, wenn Ihre App nur bestimmte Anbieter benötigt.

Hinzufügen von Anbieterkonfiguration 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;

Anbieterwerte bedeuten:

true: Der Anbieter ist aktiviert und seine native Abhängigkeiten werden eingebunden.
false: Der Anbieter ist deaktiviert und seine native Abhängigkeiten werden nicht eingebunden.

Wichtige Details:

Ausführen npx cap sync nachdem Sie die Anbieterkonfiguration geändert haben.
Wenn keine Anbieterkonfiguration bereitgestellt wird, werden alle Anbieter standardmäßig auf true für die Rückwärtskompatibilität.
Ein Anbieter deaktivieren false macht es zum Laufzeitpunkt sogar dann nicht verfügbar, wenn sich dieser Provider nur auf System-APIs verlässt.
Diese Konfiguration wirkt sich nur auf iOS und Android aus; sie wirkt sich nicht auf Web aus.
Apple Sign-In auf Android verwendet OAuth ohne externe SDK-Abhängigkeiten.
Twitter/X verwendet standardmäßiges OAuth 2.0 ohne externe SDK-Abhängigkeiten.

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

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

Bleiben Sie bei Getting Started

Wenn Sie Ionic Auth Connect verwenden Getting Started um die Authentifizierung und die Kontenflüsse zu planen, verbinden Sie es mit Verwenden Sie @capgo/capacitor-social-login für die native Fähigkeit in Verwenden Sie @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.