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: Es ist eine Navigation zur WeChat-App erforderlich, und es muss auch deren SDK verwendet werden.

Wir wissen, das klingt abschreckend, aber keine Sorge. Wir werden das in diesem Tutorial einfach handhaben.

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 oben rechts auf die Schaltfläche „Sign Up“ und schließe dann 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 Felder sind selbsterklärend, und wir haben hier einige 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.

Fülle Bundle ID, Test version Bundle ID und Universal Links aus (tatsächlich wird nur ein Link benötigt 😂).

hinweis:

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

tipp:

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

Android-App

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

Android app platform

Fülle Application Signing Signature (应用签名) und Application Package Name (应用包名) aus.

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 Aufgabe signingReport ausführen, um die Signatur zu erhalten.

./gradlew your-android-project:signingReport

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

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

Warten auf das Überprüfungsergebnis​

Nachdem du die Plattforminformationen 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 deinen aktuellen Stand und frage den Prüfer, wie du es 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-Schema im Xcode-Projekt konfigurieren

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

Universal link

Gehe dann zum Tab „Info“ und füge ein benutzerdefiniertes URL-Schema 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 die magische offizielle Anleitung 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 direkt import WechatOpenSDK verwenden, sobald das Plugin importiert wurde.

3. Das Plugin zu deinen 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: /*...*/) -> Bool {
  LogtoClient.handle(url: url)
}

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 Sozialen Connector bei Anmeldung und Registrierung 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 die empfohlene Vorgehensweise aus der offiziellen Entwicklungsguide ist).