Anfangen

GitHub

Eine Setup-Vorlage mit den Installationsanweisungen und der vollständigen Markdown-Guideline 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 unsere KI-gestützte Einrichtung verwenden, um das Plugin zu installieren. Fügen Sie die Capgo-Fähigkeiten zu Ihrem KI-Tool hinzu, indem Sie den folgenden Befehl ausführen:

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

Verwenden Sie dann den folgenden Prompt:

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 Plattform-spezifischen Anweisungen unten befolgen:

Installieren Sie das Paket

npm install @capgo/capacitor-social-login

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

Bei der App-Startzeit 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 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' });

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 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' returns serverAuthCode aus der Anmeldung. 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() anstatt. google.mode: 'online' Apple

Abschnitt mit dem Titel “Apple”

für strikte Token-Verwaltung und useProperTokenExchange: true für Android eine vereinfachte Einrichtung. useBroadcastChannel: true Abschnitt mit dem Titel “Apple”

OAuth2 Web-Redirect-Flow

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

Dynamic Provider-Abhängigkeiten

Sie können die Anbieter konfigurieren, die einzuschließen sind, um die Größe des nativen Apps 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;

Provider-Werte bedeuten:

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

Wichtige Details:

Ausführen npx cap sync nachdem die Anbieterkonfiguration geändert wurde.
Wenn keine Anbieterkonfiguration bereitgestellt wird, setzen sich alle Anbieter aufgrund der Rückwärtskompatibilität auf true Zurücksetzen
Deaktivieren Sie einen Anbieter mit false macht ihn aufgrund der System-APIs auch bei Laufzeit nicht verfügbar, selbst wenn dieser Anbieter nur System-APIs verwendet.
Diese Konfiguration wirkt sich nur auf iOS und Android aus; sie wirkt sich nicht auf Web aus.
Apple Sign-In on Android uses OAuth without external SDK dependencies.
Twitter/X uses standard OAuth 2.0 without external SDK dependencies.

Twitter/X verwendet standardmäßige OAuth 2.0 ohne externe

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

Weitermachen von Getting Started

Wenn Sie "Getting Started" verwenden Getting Started um die Authentifizierung und die Kontoflows 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 Implementierungsdetail in @capgo/capacitor-social-login @capgo/capacitor-passkey für die Implementierungsdetail in @capgo/capacitor-passkey und @capgo/capacitor-native-biometric für die Implementierungsdetail in @capgo/capacitor-native-biometric Zweifaktor-Authentifizierung für die Implementierungsdetails in der Zweifaktor-Authentifizierung.