Zum Hauptinhalt springen

Schritt-für-Schritt-Anleitung zur Entwicklung eines sozialen Connectors

Der schnellste Weg, um loszulegen, besteht darin, den Code eines bestehenden offiziellen Connectors zu kopieren und ihn an deine Bedürfnisse anzupassen. Nehmen wir den GitHub-Connector als Beispiel.

Schritt 1: Klone ein bestehendes Connector-Paket​

In einem Connector-Quellordner findest du die folgenden Dateien:

  • index.ts: Die Haupteinstiegsdatei des Connectors.
  • constant.ts: Die im Connector verwendeten Konstanten.
  • types.ts: Die im Connector verwendeten TypeScript-Typen.
  • index.test.ts: Die Testfälle für den Connector.
  • mock.ts: Die im Connector-Testfall verwendeten Mock-Daten.

Neben diesen Dateien musst du auch eine README.md-Datei bereitstellen, um den Connector zu beschreiben, ein logo.svg (optional ein logo-dark.svg für eine bessere Benutzererfahrung im Dunkelmodus) und eine package.json-Datei, um die npm-Paketinformationen zu definieren.

Schritt 2: Ändere die Haupteinstiegsdatei (index.ts)​

In der index.ts-Datei findest du die meisten Logiken des Connectors. Es gibt typischerweise 4 Funktionen, die du implementieren musst:

  • getAuthorizationUri: Generiere die Autorisierungs-URI für die Drittanbieter-Social-Plattform. Für GitHub wäre es: https://github.com/login/oauth/authorize?client_id={clientId}&redirect_uri={redirectUri}&state={state}. Sieh dir die Entwicklerdokumentation deiner Ziel-Social-Plattform an, um die korrekte URI zu erhalten.
  • authorizationCallbackHandler: Sichere die zurückgegebenen Parameterwerte in der Autorisierungs-Callback-URI, extrahiere den Autorisierungs-code und behandle potenzielle Fehler.
  • getAccessToken: Tausche den Autorisierungs-code gegen ein Zugangstoken aus.
  • getUserInfo: Hole Benutzerinformationen von der Drittanbieter-Social-Plattform mit dem Zugangstoken.

Die meisten anderen allgemeinen Logiken wurden im Logto-Connector-Kit berücksichtigt, was deine Arbeit erleichtern sollte.

Schließlich musst du am Ende der Datei nur das Connector-Objekt exportieren, indem du die gleiche Code-Struktur wie der GitHub-Connector verwendest.

const createGithubConnector: CreateConnector<SocialConnector> = async ({ getConfig }) => {
  return {
    metadata: defaultMetadata,
    type: ConnectorType.Social,
    configGuard: githubConfigGuard,
    getAuthorizationUri: getAuthorizationUri(getConfig),
    getUserInfo: getUserInfo(getConfig),
  };
};

Schritt 3: Teste den Connector​

Unit-Test​

Schreibe zunächst einige Unit-Testfälle und stelle sicher, dass die grundlegenden Funktionen wie erwartet funktionieren.

Lokaler Test​

  • Richte Logto in deiner lokalen Umgebung ein: Logto bietet mehrere Möglichkeiten, lokal zu laufen, du kannst entweder CLI, Docker oder sogar den Quellcode verwenden. Sieh dir die Dokumentationen für weitere Details an.
  • Verknüpfe deinen benutzerdefinierten Connector mit deiner Logto-Instanz: Verwende die CLI, um einen symbolischen Link deines Connectors zur Logto-Instanz zu erstellen. Weitere Details. 
    cd logto
    npx @logto/cli connector link -p .
  • Nach dem Verknüpfen des Connectors solltest du ihn im <logto-root-path>/packages/core/connectors-Ordner sehen.
  • Starte deine Logto-Instanz neu, gehe zur Logto Admin-Konsole, du solltest ihn in der Liste der sozialen Connectors sehen.
  • Konfiguriere deinen Connector in Konsole > Anmeldeerfahrung > Anmeldung und Anmeldung > Soziale Anmeldung. Und probiere es in unserer Demo-App mit der "Live-Vorschau"-Funktion aus.