Einstieg

Installation

Sie können unsere KI-gestützte Einrichtung verwenden, um den Plugin zu installieren. Fügen Sie die Capgo Fähigkeiten zu Ihrer KI-Werkzeug mithilfe der folgenden Befehl hinzu:

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

Verwenden Sie dann die folgende Anfrage:

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 den Plugin, indem Sie die folgenden Befehle ausführen und folgen Sie den Plattform-spezifischen Anweisungen unten:

1. Das Paket installieren

   npm install @capgo/capacitor-social-login

2. Synchronisieren mit native Projekten

   npx cap sync

3. Bei der App-Startphase 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

Anmeldung

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 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' wieder 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-Austausch. Wenn Sie in der App aufrufen müssen, verwenden Sie SocialLogin.refresh() stattdessen google.mode: 'online' Apple

Abschnitt mit dem Titel “Apple”

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

OAuth2 Web-Redirect-Flow

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

Dynamische Anbieterabhängigkeiten

Sie können die Anbieter konfigurieren, die einbezogen werden sollen, um die Größe des nativen Apps zu reduzieren. Dies ist am nützlichsten, wenn Ihre App nur bestimmte Anbieter benötigt.

Hinzufügen der 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 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 nach der Änderung der Anbieterkonfiguration.
• Wenn keine Anbieterkonfiguration bereitgestellt wird, werden alle Anbieter als true für die Rückwärtskompatibilität.
• Ein Anbieter deaktivieren false macht ihn zur 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,
    },
  },
}

Verwandte Dokumentation

• Übersicht über die Integrations
• Bessere Auth-Integration
• OAuth2- und OIDC-Anbieter
• Fehlerbehebung
• Datenschutzmanifest und iOS-URL-Handler
• Migrieren von Ionic Auth Connect
• Auth Connect-Migration für Social Login
• Migrieren von Legacy-Anbietern
• Lösung für die Migration von Ionic-Unternehmensplugins

Weitermachen von Getting Started

Wenn Sie Getting Started zum Planen der Authentifizierung und der Kontoflows verwenden, verbinden Sie es mit Verwenden Sie @capgo/capacitor-social-login für die native Fähigkeit in Verwenden Sie @capgo/capacitor-social-login Verwenden Sie @capgo/capacitor-social-login für die Implementierungsdetails in Verwenden Sie @capgo/capacitor-social-login Verwenden Sie @capgo/capacitor-passkey für die Implementierungsdetails in Verwenden Sie @capgo/capacitor-passkey Verwenden Sie @capgo/capacitor-native-biometric für die Implementierungsdetails in Verwenden Sie @capgo/capacitor-native-biometric und Zweifaktor-Authentifizierung für die Implementierungsdetails in der Zweifaktor-Authentifizierung.