Soziale Anmeldung mit Alipay (Web) einrichten

Der offizielle Logto Connector für Alipay Social Sign-in in Webanwendungen.

tipp:

Diese Anleitung setzt voraus, dass du ein grundlegendes Verständnis von Logto Connectors hast. Für diejenigen, die damit nicht vertraut sind, verweisen wir auf die Connectors Anleitung, um loszulegen.

Loslegen

Der Alipay Web Connector ist für Desktop-Webanwendungen konzipiert. Er nutzt den OAuth 2.0 Authentifizierungs-Workflow 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, falls du noch keines hast.

Alipay App erstellen und konfigurieren

1. Melde dich in der Alipay-Konsole mit dem gerade registrierten Konto an.
2. Gehe zum Tab "Web & Mobile Apps" (网页&移动应用) im Bereich "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. Nach dem Erstellen der Anwendung gelangst du zur Übersichtsseite. Dort solltest du auf "Fähigkeit hinzufügen" (添加能力) klicken, um "Drittanbieter-Anwendungsautorisierung" (第三方应用授权), "Mitgliederinformationen abrufen" (获取会员信息) und "App Alipay Login" (App 支付宝登录) hinzuzufügen, bevor du die Alipay-Anmeldung aktivierst.
6. Gehe zum Alipay Customer Center und melde dich mit dem Alipay Entwicklerkonto an. Klicke auf "Account Center" (账号中心) in der oberen Leiste und gehe zu "APPID-Bindung" (APPID 绑定), deren Zugang sich unten in der Seitenleiste befindet. "Bindung hinzufügen" (添加绑定), indem du die APPID der gerade in Schritt 4 erstellten Webanwendung eingibst.
7. Klicke auf die Schaltfläche "Signieren" von "App Alipay Login" und schließe den Signiervorgang gemäß der Anleitung ab. Nach Abschluss dieses Schritts sollten die in Schritt 5 hinzugefügten Fähigkeiten aktiv sein.
8. Kehre zur Alipay Open Platform Konsole zurück. Im Bereich "Entwicklungsinformationen" (开发信息) findest du die "Schnittstellen-Signaturmethode" (接口加签方式（密钥/证书）). Klicke auf die Schaltfläche "Einrichten" (设置), um die Signaturmethode festzulegen. "Öffentlicher Schlüssel" (公钥) ist die bevorzugte Signaturmethode. Trage den Inhalt der von dir generierten öffentlichen Schlüsseldatei in das Textfeld 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 Standard-Redirect-URI, die im Logto Core verwendet wird. Die connector_id findest du in der oberen Leiste der Logto Admin Console auf der Connector-Detailseite.
10. Nachdem du alle diese Schritte abgeschlossen hast, gehe zurück in die obere rechte Ecke der Alipay-Konsole und klicke auf "Zur Überprüfung einreichen" (提交审核). Sobald die Überprüfung genehmigt ist, kannst du einen reibungslosen Alipay-Anmeldeablauf nutzen.

hinweis:

Du kannst openssl verwenden, um Schlüsselpaar auf deinem lokalen Rechner zu generieren, indem du 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-Einrichtungsseite musst du den Header und Footer von public.pem entfernen, alle Zeilenumbrüche löschen und den restlichen Inhalt in das Textfeld für den "öffentlichen Schlüssel" einfügen.

Logto Alipay Web Connector Einstellungen konfigurieren

1. Im Alipay-Konsole-Arbeitsbereich gehe zum Bereich "Meine Anwendung" (我的应用) und klicke auf den Tab "Web & Mobile Apps" (网页&移动应用). Dort findest du die APPID aller Anwendungen.
2. Im Schritt 7 des vorherigen Abschnitts hast du bereits ein Schlüsselpaar mit privatem und öffentlichem Schlüssel generiert.
3. Fülle die Logto Connector Einstellungen aus:
   • Trage im Feld appId die APPID aus Schritt 1 ein.
   • Trage im Feld privateKey den Inhalt der in Schritt 2 erwähnten privaten Schlüsseldatei ein. Bitte STELLE SICHER, dass du '\n' für alle Zeilenumbrüche verwendest und den Header sowie Footer in der privaten Schlüsseldatei NICHT entfernst.
   • Trage im Feld signType 'RSA2' ein, da wir im Schritt 7 von "Alipay Apps erstellen und konfigurieren" die Signaturmethode Public key gewählt haben.
   • Trage im Feld charset entweder 'gbk' oder 'utf8' ein. Dieses Feld ist OPTIONAL und kann leer gelassen werden. Der Standardwert ist 'utf8'.
   • Trage im Feld scope entweder 'auth_base' oder 'auth_user' ein. Dieses Feld ist OPTIONAL und kann leer gelassen werden. Der Standardwert ist 'auth_user'. Du kannst den Unterschied zwischen den verschiedenen Werten nachlesen.

Konfigurationstypen

Name	Typ	Enum-Werte
appId	string	N/A
privateKey	string	N/A
signType	enum string	'RSA' / 'RSA2'
charset	enum string (OPTIONAL)	'gbk' / 'utf8' / undefined
scope	enum string (OPTIONAL)	'auth_user' / 'auth_base'

Alipay Web Connector testen

Das war's. Vergiss nicht, den Sozialen Connector für Anmeldung und Registrierung zu aktivieren.

Sobald der Alipay Web Connector aktiviert ist, kannst du deine Webanwendung bauen und ausführen, um zu prüfen, ob alles funktioniert.

Referenzen

Alipay Docs – Zugriffs-Vorbereitung – Wie man eine App erstellt

Alipay Docs – Web & Mobile Apps – App erstellen