Zum Hauptinhalt springen

Soziale Anmeldung mit WeChat (Native) einrichten

Der offizielle Logto Connector für WeChat Social Sign-in in nativen Apps (iOS und Android).

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​

Wenn du das Konzept des Connectors nicht kennst oder nicht weißt, wie du diesen Connector zu deiner Anmeldeerfahrung hinzufügst, siehe Logto Tutorial.

In nativen Apps kannst du das Web nicht als Anmeldemethode für WeChat verwenden: Die Navigation zur WeChat-App ist erforderlich und es muss auch deren SDK verwendet werden.

Wir wissen, das klingt abschreckend, aber keine Sorge. Wir zeigen dir in diesem Tutorial, wie es einfach geht.

Erstelle eine mobile App in der WeChat Open Platform​

tipp:

Du kannst einige Abschnitte überspringen, wenn du sie bereits abgeschlossen hast.

Konto erstellen​

Öffne https://open.weixin.qq.com/, klicke auf die Schaltfläche „Sign Up“ oben rechts und schließe den Registrierungsprozess ab.

Mobile App erstellen​

Melde dich mit dem gerade erstellten Konto an. Im Tab „Mobile Application“ (移动应用) klicke auf die große grüne Schaltfläche „Create a mobile app“ (创建移动应用).

App tabs

Fülle die erforderlichen Informationen im Antragsformular aus.

Create mobile app

Grundlegende Informationen​

Die meisten Angaben sind selbsterklärend, hier ein paar Tipps:

  • Wenn du WeChat Sign-in nur testen möchtest und die App nicht im App Store ist, wähle im Abschnitt „App is available“ die Option „No“, um den „App download link“ zu überspringen.
  • Das „App operation flow chart“ sieht kompliziert aus. Nach unserer Erfahrung solltest du ein einfaches Flussdiagramm und einige App-Screenshots vorbereiten, um die Wahrscheinlichkeit zu erhöhen, die Überprüfung zu bestehen.

Klicke auf „Next step“, um fortzufahren.

Plattform-Informationen​

Du kannst entweder iOS, Android oder beide Plattformen konfigurieren, um Logto mit WeChat Native Sign-in zu integrieren.

iOS-App

Wähle „iOS app“ (iOS 应用) aus und dann entsprechend den Zielgerätetyp deiner App.

App platform

Wenn du „No“ für die App Store-Verfügbarkeit gewählt hast, kannst du die Angabe der „AppStore download address“ hier überspringen.

Trage Bundle ID, Test version Bundle ID und Universal Links ein (tatsächlich reicht ein Link 😂).

hinweis:

Bundle ID und Test version Bundle ID können denselben Wert haben.

tipp:

WeChat verlangt einen Universal Link für das native Sign-in. Wenn du ihn noch nicht eingerichtet hast oder nicht weißt, wie das geht, siehe die offizielle Apple-Dokumentation.

Android-App

Wähle „Android app“ (Android 应用) aus.

Android app platform

Trage Application Signing Signature (应用签名) und Application Package Name (应用包名) ein.

hinweis:

Du musst deine App signieren, um eine Signatur zu erhalten. Siehe Sign your app für weitere Informationen.

Nach dem Signieren kannst du die signingReport-Aufgabe ausführen, um die Signatur zu erhalten.

./gradlew your-android-project:signingReport

Der MD5-Wert des Berichts der entsprechenden Build-Variante ist die Application Signing Signature (应用签名), aber entferne alle Doppelpunkte aus dem Wert und schreibe ihn klein.

Z. B. 1A:2B:3C:4D -> 1a2b3c4d.

Auf das Überprüfungsergebnis warten​

Nachdem du die Plattform-Informationen ausgefüllt hast, klicke auf „Submit Review“, um fortzufahren. In der Regel geht die Überprüfung schnell und ist innerhalb von 1-2 Tagen abgeschlossen.

Wir vermuten, dass der Prüfer bei jeder Einreichung zufällig zugewiesen wird, da der Standard schwankt. Es kann sein, dass du beim ersten Mal abgelehnt wirst, aber gib nicht auf! Erkläre deine aktuelle Situation und frage den Prüfer, wie du sie anpassen kannst.

WeChat Native Sign-in 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 WeChat SDK-Dokumentation lesen:

1. Universal Link und URL-Scheme im Xcode-Projekt konfigurieren

Im Xcode-Projekt -> Tab „Signing & Capabilities“ die Fähigkeit „Associated Domains“ und den zuvor konfigurierten Universal Link hinzufügen.

Universal link

Gehe dann zum Tab „Info“ und füge ein benutzerdefiniertes URL-Scheme mit der WeChat App ID hinzu.

Custom URL scheme

Öffne abschließend deine Info.plist und füge weixinULAPI und weixin unter LSApplicationQueriesSchemes hinzu.

Plist
hinweis:

Wir wissen, dass diese Schritte nicht sehr sinnvoll erscheinen, aber dies ist die minimal funktionsfähige Lösung, die wir gefunden haben. Siehe den magischen offiziellen Leitfaden für weitere Informationen.

2. LogtoSocialPluginWechat zu deinem Xcode-Projekt hinzufügen

Füge das Framework hinzu:

Add framework

Und füge -ObjC zu deinen Build Settings > Linking > Other Linker Flags hinzu:

Linker flags
hinweis:

Das Plugin enthält das WeChat Open SDK 1.9.2. Du kannst nach dem Import des Plugins direkt import WechatOpenSDK verwenden.

3. Das Plugin zu den LogtoClient-Init-Optionen hinzufügen

let logtoClient = LogtoClient(
  useConfig: config,
  socialPlugins: [LogtoSocialPluginWechat()]
)

4. onOpenURL korrekt behandeln

hinweis:

Die Funktion LogtoClient.handle(url:) behandelt alle nativen Connectoren, die du aktiviert hast. Du musst sie nur einmal aufrufen.

// SwiftUI
YourRootView()
  .onOpenURL { url in
      LogtoClient.handle(url: url)
  }

// oder AppDelegate
func application(
  _ app: UIApplication,
  open url: URL,
  options: [UIApplication.OpenURLOptionsKey: Any] = [:]
) -> Bool {
  LogtoClient.handle(url: url)
  return true
}

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 WeChat SDK-Dokumentation lesen:

1. Wechat Open SDK zu deinem Projekt hinzufügen

Stelle sicher, dass das Repository mavenCentral() in deinen Gradle-Projekt-Repositories enthalten ist:

repositories {
  // ...
  mavenCentral()
}

Füge das Wechat Open SDK zu deinen Abhängigkeiten hinzu:

dependencies {
  // ...
  api("com.tencent.mm.opensdk:wechat-sdk-android:6.8.0")  // kotlin-script
  // oder
  api 'com.tencent.mm.opensdk:wechat-sdk-android:6.8.0'   // groovy-script
}

2. WXEntryActivity in dein Projekt einführen

Erstelle ein wxapi-Paket unter deinem Paket-Root und füge die WXEntryActivity im wxapi-Paket hinzu (Beispiel: com.sample.app):

// WXEntryActivity.kt
package com.sample.app.wxapi

import io.logto.sdk.android.auth.social.wechat.WechatSocialResultActivity

class WXEntryActivity: WechatSocialResultActivity()
// WXEntryActivity.java
package com.sample.app.wxapi

import io.logto.sdk.android.auth.social.wechat.WechatSocialResultActivity

public class WXEntryActivity extends WechatSocialResultActivity {}

Die endgültige Position der WXEntryActivity im Projekt sollte so aussehen (Beispiel für Kotlin):

src/main/kotlin/com/sample/app/wxapi/WXEntryActivity.kt

3. Die AndroidManifest.xml anpassen

Füge die folgende Zeile zu deiner AndroidManifest.xml hinzu:

\<?xml version="1.0" encoding="utf-8"?>
\<manifest xmlns:android="http://schemas.android.com/apk/res/android"
  package="com.sample.app">

  \<application>
    \<!-- Zeile hinzufügen -->
    \<activity android:name=".wxapi.WXEntryActivity" android:exported="true"/>
  \</application>

\</manifest>

WeChat Native Connector testen​

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

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

vorsicht:

WeChat hat keine Lösung für Geräte ohne installierte WeChat-App. Logto blendet diesen Connector während der Anmeldung aus, falls dies zutrifft (was auch die empfohlene Vorgehensweise im offiziellen Entwicklungsleitfaden ist).