Getting Started

Installation

Sie können unsere AI-gestützte Einrichtung verwenden, um das Plugin zu installieren. Fügen Sie die Capgo Fähigkeiten Ihrem AI-Tool mit der folgenden Befehl hinzu:

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 folgen Sie den Plattform-spezifischen Anweisungen unten:

1. Installieren Sie das Paket

   bun add @capgo/capacitor-social-login

2. Synchronisieren mit native Projekten

   bunx cap sync

3. In 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 den 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 Hilfen

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 dem Login. In dieser Modus sind Logout, isLoggedIn, getAuthorizationCode und refresh nicht verfügbar.

Use serverAuthCode nur als Eingabe für Ihren Backend-Token-Wechsel. Wenn Sie einen Aufruf SocialLogin.refresh() im App verwenden google.mode: 'online' Apple

Apple

Set useProperTokenExchange: true für eine vereinfachte Einrichtung für Android. useBroadcastChannel: true OAuth2-Web-Redirect-Flow

Abschnitt mit dem Titel „OAuth2-Web-Redirect-Flow“

Use OAuth2LoginOptions.flow: 'redirect' für Web-Flows, die sich von der Seite entfernen.

Dynamische Anbieterabhängigkeiten

Sie können die zu verwendenden Anbieter konfigurieren, um die Größe der nativen App 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;

Wert der Anbieter bedeutet:

• true: Der Anbieter ist aktiviert und seine nativen Abhängigkeiten werden gebündelt.
• false: Der Anbieter ist deaktiviert und seine nativen Abhängigkeiten werden nicht gebündelt.

Wichtige Details:

• Ausführen bunx cap sync nachdem die Anbieterkonfiguration geändert wurde.
• Wenn keine Anbieterkonfiguration bereitgestellt wird, gehen alle Anbieter auf true für die Rückwärtskompatibilität.
• Ein Anbieter deaktivieren, indem man false macht ihn auf der Laufzeit nicht verfügbar, selbst wenn dieser Anbieter nur System-APIs verwendet.
• Diese Konfiguration wirkt sich nur auf iOS und Android aus, nicht auf Web.
• 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,
    },
  },
}

Zugehörige Dokumentation

• Übersicht über die Integrations
• Bessere Auth-Integration
• OAuth2- und OIDC-Anbieter
• Fehlersuche
• Datenschutzmanifest und iOS-URL-Handler
• Migrieren von Ionic Auth Connect
• Auth Connect-Migration-Leitfaden für soziale Anmeldungen
• Migrieren von Legacy-Anbietern
• Migrationslösung für Ionic-Unternehmens-Plugins

Weitermachen von Getting Started

Wenn Sie Ionic Auth Connect verwenden Anfängsunterstützung um die Authentifizierung und die Kontoflussplanung zu planen, 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, @capgo/capacitor-native-biometrisch Für die Implementierungsdetail in @capgo/capacitor-native-biometric, und Zwei-Faktor-Authentifizierung Für die Implementierungsdetail in Zwei-Faktor-Authentifizierung.