Soziale Anmeldung mit Alipay einrichten (Set up social login with Alipay) (Native)

Der offizielle Logto Connector für Alipay Social Sign-in in nativen Apps auf Mobilgeräten.

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.

Erste Schritte

Der Alipay Native Connector arbeitet eng mit dem Logto SDK auf mobilen Plattformen zusammen. 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 mit dem gerade registrierten Konto in der Alipay Konsole 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 "Mobile Anwendung" (移动应用) als "App-Typ" (应用类型) auswählst. Für iOS-Apps ist eine eindeutige "Bundle ID" erforderlich. Außerdem sind "Anwendungssignatur" (应用签名) und "Anwendungspaketname" (应用包名) für Android-Apps erforderlich.
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 in Schritt 4 erstellten mobilen Anwendung eingibst.
7. Klicke auf die Schaltfläche "Signieren" von "App Alipay Login" und schließe den Signiervorgang gemäß der Anleitung ab. Nach Abschluss dieses Schrittes sollten die in Schritt 5 hinzugefügten Fähigkeiten aktiv sein.
8. Kehre zur Alipay Open Platform Konsole zurück. Im Abschnitt "Entwicklungsinformationen" (开发信息) findest du die "Schnittstellen-Signaturmethode" (接口加签方式（密钥/证书）). Klicke auf die Schaltfläche "Einrichten" (设置), um die Signaturmethode festzulegen. "Öffentlicher Schlüssel" (公钥) ist der bevorzugte Signaturmodus. Trage den Inhalt der von dir generierten Public-Key-Datei 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üsselpaaren 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 Rest des Inhalts in das Textfeld für den "öffentlichen Schlüssel" einfügen.

Logto Alipay Native Connector Einstellungen konfigurieren

1. Im Alipay Console Workspace 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 (privater und öffentlicher Schlüssel) generiert.
3. Fülle die Logto Connector Einstellungen aus:
   • Trage in das Feld appId die APPID aus Schritt 1 ein.
   • Trage in das Feld privateKey den Inhalt der in Schritt 2 erwähnten privaten Schlüsseldatei ein. ERSETZE ALLE Zeilenumbrüche durch '\n'. Du musst den Header und Footer in der privaten Schlüsseldatei NICHT entfernen.
   • Trage in das Feld signType 'RSA2' ein, da wir im Schritt 7 von "Alipay Apps erstellen und konfigurieren" den Modus Public key gewählt haben.

Konfigurationstypen

Name	Typ	Enum-Werte
appId	string	N/A
privateKey	string	N/A
signType	enum string	'RSA' / 'RSA2'

Alipay Native Anmeldung in deiner App aktivieren

iOS

Wir gehen davon aus, dass du das Logto iOS SDK in deiner App integriert hast. In diesem Fall ist alles ziemlich einfach und du musst nicht einmal die Alipay SDK Dokumentation lesen:

1. Füge LogtoSocialPluginAlipay zu deinem Xcode-Projekt hinzu

Füge das Framework hinzu:

hinweis:

Das Plugin enthält das Alipay "Minimalist SDK" (极简版 SDK). Du kannst nach dem Import des Plugins direkt import AFServiceSDK verwenden.

2. Füge das Plugin zu den LogtoClient Init-Optionen hinzu

let logtoClient = LogtoClient(
  useConfig: config,
  socialPlugins: [LogtoSocialPluginAlipay(callbackScheme: "your-scheme")]
)

Dabei ist callbackScheme eines der benutzerdefinierten URL-Schemata, das zu deiner App navigieren kann.

Android

Wir gehen davon aus, dass du das Logto Android SDK in deiner App integriert hast. In diesem Fall ist alles ziemlich einfach und du musst nicht einmal die Alipay SDK Dokumentation lesen:

1. Lade das Alipay "Minimalist SDK" herunter und füge es deinem Projekt hinzu

Lade das Alipay "Minimalist SDK" (极简版 SDK) von Logto 3rd-party Social SDKs in den app/libs-Ordner deines Projekts herunter:

project-path/app/libs/alipaySdk-15.7.9-20200727142846.aar

2. Füge das Alipay "Minimalist SDK" als Abhängigkeit hinzu

Öffne deine build.gradle Datei:

project-path/app/build.gradle

Füge die Abhängigkeit hinzu:

dependencies {
  // ...
  implementation(files("./libs/alipaySdk-15.7.9-20200727142846.aar"))  // kotlin-script
  // oder
  implementation files('./libs/alipaySdk-15.7.9-20200727142846.aar')  // groovy-script
}

Alipay Native Connector testen

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

Sobald der Alipay Native Connector aktiviert ist, kannst du deine App bauen und ausführen, um zu sehen, ob alles funktioniert.

Referenzen

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

Alipay Docs – Web & Mobile Apps – App erstellen