Zum Hauptinhalt springen

Soziale Anmeldung mit Alipay (Web) einrichten

Der offizielle Logto-Connector für die Alipay-Sozialanmeldung in Web-Apps.

tipp

In diesem Leitfaden gehen wir davon aus, dass du grundlegende Kenntnisse über Logto Connectors hast. Falls nicht, schaue dir den Leitfaden Connectors konfigurieren an, um loszulegen.

Erste Schritte​

Der Alipay Web-Connector ist für Desktop-Webanwendungen konzipiert. Er nutzt den OAuth 2.0-Authentifizierungsworkflow von Alipay und ermöglicht es Alipay-Nutzern, sich mit öffentlichen Alipay-Benutzerprofilen bei anderen Apps anzumelden, ohne einen umständlichen Registrierungsprozess durchlaufen zu müssen.

Alipay-Entwicklerkonto registrieren​

Registriere ein Alipay-Entwicklerkonto, wenn du noch keines hast.

Alipay-App erstellen und konfigurieren​

  1. Melde dich mit dem gerade registrierten Konto bei der Alipay-Konsole an.
  2. Gehe zum Tab "Web & Mobile Apps" (网页&移动应用) im Panel "Meine Anwendung" (我的应用).
  3. Klicke auf die Schaltfläche "App erstellen" (立即创建), um mit der Konfiguration deiner Anwendung zu beginnen.
  4. Benenne deine Anwendung im Feld "Anwendungsname" (应用名称) gemäß den Namenskonventionen und lade dein "Anwendungssymbol" (应用图标) hoch. Stelle sicher, dass du "Webanwendung" (网页应用) als "App-Typ" (应用类型) auswählst.
  5. Nachdem du die Anwendung erstellt hast, gelangst du zur Übersichtsseite, auf der du "Fähigkeit hinzufügen" (添加能力) klicken solltest, um "Drittanbieter-Anwendungsautorisierung" (第三方应用授权), "Mitgliederinformationen abrufen" (获取会员信息) und "App Alipay-Login" (App 支付宝登录) hinzuzufügen, bevor du die Alipay-Anmeldung aktivierst.
  6. Gehe zum Alipay-Kundencenter und melde dich mit dem Alipay-Entwicklerkonto an. Klicke auf "Kontozentrum" (账号中心) in der oberen Leiste und gehe zu "APPID-Bindung" (APPID 绑定), deren Eingang sich unten in der Seitenleiste befindet. "Bindung hinzufügen" (添加绑定), indem du die APPID der Webanwendung eingibst, die du in Schritt 4 erstellt hast.
  7. Klicke auf die Schaltfläche "Signieren" von "App Alipay-Login" und beende den Signierungsprozess gemäß der Anleitung. Nach Abschluss dieses Schritts sollten die in Schritt 5 hinzugefügten Fähigkeiten wirksam werden.
  8. Kehre zur Alipay-Open-Platform-Konsole zurück, und du findest "Schnittstellen-Signiermethode" (接口加签方式（密钥/证书）) im Abschnitt "Entwicklungsinformationen" (开发信息). Klicke auf die Schaltfläche "Einrichten" (设置), und du gelangst auf eine Seite zur Einstellung der Signiermethode. "Öffentlicher Schlüssel" (公钥) ist der bevorzugte Signiermodus, und fülle die Inhalte aus der Datei des öffentlichen Schlüssels, die du generiert hast, in das Texteingabefeld ein.
  9. Richte die "Autorisierungs-Redirect-URI" (授权回调地址) ein, indem du auf die Schaltfläche "Einrichten" (设置) unten auf der Alipay-Konsole klickst. ${your_logto_origin}/callback/${connector_id} ist die standardmäßige Redirect-URI, die im Logto-Kern verwendet wird. Die connector_id kann in der oberen Leiste der Logto Admin Console auf der Seite mit den Connector-Details gefunden werden.
  10. Nachdem du alle diese Schritte abgeschlossen hast, gehe zurück zur oberen rechten Ecke der Alipay-Konsole und klicke auf "Zur Überprüfung einreichen" (提交审核). Sobald die Überprüfung genehmigt ist, kannst du mit einem reibungslosen Alipay-Anmeldefluss fortfahren.

ℹ️ Hinweis

Du kannst openssl verwenden, um Schlüsselpaaren auf deinem lokalen Rechner zu generieren, indem du den folgenden Code-Schnipsel im Terminal ausführst.

openssl genrsa -out private.pem 2048
openssl rsa -in private.pem -outform PEM -pubout -out public.pem

Beim Ausfüllen des öffentlichen Schlüssels auf der Alipay-App-Einrichtungswebsite musst du den Header und Footer von public.pem entfernen, alle Zeilenumbrüche löschen und den Rest der Inhalte in das Texteingabefeld für den "öffentlichen Schlüssel" einfügen.

Logto Alipay Web-Connector-Einstellungen einrichten​

  1. Gehe im Alipay-Konsole-Arbeitsbereich zum Panel "Meine Anwendung" (我的应用) und klicke auf den Tab "Web & Mobile Apps" (网页&移动应用), dort findest du die APPID aller Anwendungen.
  2. In Schritt 7 des vorherigen Teils hast du bereits ein Schlüsselpaar einschließlich eines privaten Schlüssels und eines öffentlichen Schlüssels generiert.
  3. Fülle die Logto-Connector-Einstellungen aus:
    • Fülle das Feld appId mit der APPID aus, die du in Schritt 1 erhalten hast.
    • Fülle das Feld privateKey mit den Inhalten aus der in Schritt 2 erwähnten privaten Schlüsseldatei aus. Bitte stelle SICHER, dass du '\n' verwendest, um alle Zeilenumbrüche zu ersetzen, und entferne nicht den Header und Footer in der privaten Schlüsseldatei.
    • Fülle das Feld signType mit 'RSA2' aus, aufgrund des Öffentlicher Schlüssel-Signiermodus, den wir in Schritt 7 von "Alipay-Apps erstellen und konfigurieren" gewählt haben.
    • Fülle das Feld charset mit entweder 'gbk' oder 'utf8' aus. Du kannst dieses Feld leer lassen, da es OPTIONAL ist. Der Standardwert ist 'utf8'.
    • Fülle das Feld scope mit entweder 'auth_base' oder 'auth_user' aus. Du kannst dieses Feld leer lassen, da es OPTIONAL ist. Der Standardwert ist 'auth_user'. Du kannst den Unterschied zwischen den verschiedenen Werten überprüfen.

Konfigurationstypen​

NameTypEnum-Werte
appIdstringN/A
privateKeystringN/A
signTypeenum string'RSA' | 'RSA2'
charsetenum string (OPTIONAL)'gbk' | 'utf8' | undefined
scopeenum string (OPTIONAL)'auth_user' | 'auth_base'

Alipay Web-Connector testen​

Das war's. Vergiss nicht, Sozialen Connector in der Anmeldeerfahrung aktivieren.

Sobald der Alipay Web-Connector aktiviert ist, kannst du deine Web-App erstellen und ausführen, um zu sehen, ob sie funktioniert.

Referenzen​