Einstieg

Installation

Sie können unsere KI-gestützte Einrichtung verwenden, um das Plugin zu installieren. Fügen Sie die Capgo-Fähigkeiten zu Ihrer KI-Tool 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 das Plugin, indem Sie die folgenden Befehle ausführen und die Plattform-spezifischen Anweisungen unten befolgen:

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 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' 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() stattdessen. 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.

Dynamische Anbieterabhängigkeiten

Sie können festlegen, welche Anbieter enthalten 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 System-APIs auf der Laufzeit nicht verfügbar, 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,
    },
  },
}

Zugehörige 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-Unternehmens-Plugins

Weitermachen von Getting Started

Wenn Sie Getting Started zur Planung der Authentifizierung und der Kontoflows verwenden, verbinden Sie es mit Mit @capgo/capacitor-social-login Für die native Fähigkeit in Mit @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. Zwei-Faktor-Authentifizierung für die Implementierungsdetails in Zwei-Faktor-Authentifizierung.