Einstieg

Installation

Sie können unsere KI-gestützte Einrichtung verwenden, um den Plugin zu installieren. Fügen Sie die Capgo Fähigkeiten zu Ihrem KI-Tool hinzu, indem Sie die folgende Befehl ausführen:

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

1. Das Paket installieren

   npm install @capgo/capacitor-social-login

2. Synchronisieren mit native Projekten

   npx cap sync

3. 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

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

Verwenden serverAuthCode nur als Eingabe für Ihren Backend-Token-Wechsel. Wenn Sie in der App aufrufen müssen, verwenden SocialLogin.refresh() anstatt google.mode: 'online' Apple

Abschnitt mit dem Titel “Apple”

für strikte Token-Verwaltung und useProperTokenExchange: true für Android vereinfachte Einrichtung. useBroadcastChannel: true für eine einfache Einrichtung auf Android.

OAuth2 Web-Redirect-Flow

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

Dynamische Anbieterabhängigkeiten

Sie können die Anbieter konfigurieren, die eingeschlossen 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 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 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, gehen alle Anbieter aufgrund der Rückwärtskompatibilität auf true Deaktivieren Sie einen Anbieter mit
• macht ihn aufgrund der Sicherheit auf dem Laufenden, selbst wenn dieser Anbieter nur System-APIs verwendet. false 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 __CAPGO_KEEP_0__-Abhängigkeiten.
• Twitter/X verwendet standardmäßige OAuth 2.0 ohne externe SDK-Abhängigkeiten.
• Twitter/X uses standard OAuth 2.0 without external SDK dependencies.

Auf die Zwischenablage kopieren

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-Leitfaden für soziale Anmeldungen
• Migrieren von Legacy-Anbietern
• Lösung für die Migration von Ionic-Unternehmensplugins

Weitermachen von Getting Started

Wenn Sie Getting Started zur Planung 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 @capgo/capacitor-social-login Verwenden Sie @capgo/capacitor-passkey für die Implementierungsdetails in @capgo/capacitor-passkey Verwenden Sie @capgo/capacitor-native-biometric für die Implementierungsdetails in @capgo/capacitor-native-biometric und Zweifaktor-Authentifizierung für die Implementierungsdetails in Zweifaktor-Authentifizierung.