設定 WeChat 社交登入 (Native)

Logto 官方提供的 WeChat 社交登入連接器，用於原生應用程式（iOS 和 Android）。

提示:

本指南假設你已對 Logto 連接器 (Connectors) 有基本了解。若不熟悉，請參閱連接器 (Connectors) 指南以開始使用。

開始使用

如果你不瞭解連接器的概念或不知道如何將此連接器新增到你的登入體驗中，請參閱 Logto 教學。

在原生應用程式中，你無法使用網頁作為 WeChat 的登入方法：需要導航到 WeChat 應用程式，並且需要使用其 SDK。

我們知道這聽起來有點可怕，但別擔心。我們將在本教學中輕鬆處理。

在 WeChat 開放平台創建移動應用程式

提示:

如果你已經完成某些部分，可以跳過。

創建帳戶

打開 https://open.weixin.qq.com/，點擊右上角的「註冊」按鈕，然後完成註冊流程。

創建移動應用程式

使用你剛創建的帳戶登入。在「移動應用」(移动应用) 標籤中，點擊大綠色按鈕「創建移動應用」(创建移动应用)。

讓我們在應用程式表單中填寫所需資訊。

基本資訊

大多數都相當簡單，我們這裡有幾個提示：

如果你只是想測試 WeChat 登入且應用程式不在 App Store 上，在「應用程式是否上架」部分選擇「否」以跳過「應用程式下載連結」。
「應用操作流程圖」看起來有點棘手。根據我們的經驗，你需要準備一個簡單的流程圖和幾個應用程式截圖，以提高通過審核的可能性。

點擊「下一步」繼續。

平台資訊

你可以配置 iOS 和 Android 平台之一或兩者，以將 Logto 與 WeChat 原生登入整合。

iOS 應用程式

勾選「iOS 應用程式」(iOS 应用)，然後根據你的應用程式勾選目標設備類型。

如果你選擇了「否」作為 App Store 上架狀態，你可以跳過填寫「AppStore 下載地址」。

填寫 Bundle ID、測試版 Bundle ID 和 Universal Links（實際上只需要一個連結 😂）。

備註:

Bundle ID 和 測試版 Bundle ID 可以是相同的值。

提示:

WeChat 要求使用 universal link 進行原生登入。如果你尚未設置或不知道它，請參閱 Apple 官方文檔。

Android 應用程式

勾選「Android 應用程式」(Android 应用)。

填寫 應用簽名 (Application Signing Signature) 和 應用包名 (Application Package Name)。

備註:

你需要簽署你的應用程式以獲取簽名。更多資訊請參閱簽署你的應用程式。

完成簽署後，你可以執行 signingReport 任務以獲取簽名。

./gradlew your-android-project:signingReport

相應構建變體報告的 MD5 值將是 應用簽名 (Application Signing Signature)，但記得移除所有分號並將其轉為小寫。

例如：1A:2B:3C:4D -> 1a2b3c4d。

等待審核結果

完成平台資訊後，點擊「提交審核」繼續。通常，審核速度很快，會在 1-2 天內結束。

我們懷疑每次提交的審核員是隨機分配的，因為標準是浮動的。你可能第一次被拒絕，但不要放棄！說明你的現狀並詢問審核員如何修改。

iOS

我們假設你已在應用程式中整合 Logto iOS SDK。在這種情況下，事情相當簡單，你甚至不需要閱讀 WeChat SDK 文檔：

1. 在你的 Xcode 專案中配置 universal link 和 URL scheme

在 Xcode 專案 -> 簽署與能力標籤中，新增「關聯域」能力和你之前配置的 universal link。

然後進入「資訊」標籤，新增一個自訂 URL scheme 與 WeChat App ID。

最後打開你的 Info.plist，在 LSApplicationQueriesSchemes 下新增 weixinULAPI 和 weixin。

備註:

我們知道這些操作不是很合理，但這是我們找到的最低可行解決方案。更多資訊請參閱神奇的官方指南。

2. 將 LogtoSocialPluginWechat 新增到你的 Xcode 專案

新增框架：

並將 -ObjC 新增到你的 Build Settings > Linking > Other Linker Flags：

備註:

該插件包含 WeChat Open SDK 1.9.2。匯入插件後，你可以直接使用 import WechatOpenSDK。

3. 將插件新增到你的 LogtoClient 初始化選項

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

4. 正確處理 onOpenURL

備註:

函數 LogtoClient.handle(url:) 將處理你啟用的所有原生連接器。你只需調用一次。

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

// 或 AppDelegate
func application(_ app: UIApplication, open url: URL, options: /*...*/) -> Bool {
  LogtoClient.handle(url: url)
}

Android

我們假設你已在應用程式中整合 Logto Android SDK。在這種情況下，事情相當簡單，你甚至不需要閱讀 WeChat SDK 文檔：

1. 將 Wechat Open SDK 新增到你的專案

確保 mavenCentral() 存儲庫在你的 Gradle 專案存儲庫中：

repositories {
  // ...
  mavenCentral()
}

將 Wechat Open SDK 新增到你的依賴項：

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

2. 將 WXEntryActivity 引入到你的專案

在你的包根目錄下創建一個 wxapi 包，並在 wxapi 包中新增 WXEntryActivity（以 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 {}

專案中 WXEntryActivity 的最終位置應如下所示（以 Kotlin 為例）：

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

3. 修改 AndroidManifest.xml

將以下行新增到你的 AndroidManifest.xml：

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

  \<application>
    \<!-- 要新增的行 -->
    \<activity android:name=".wxapi.WXEntryActivity" android:exported="true"/>
  \</application>

\</manifest>

測試 WeChat 原生連接器

就是這樣。別忘了在登入體驗中啟用社交連接器。

一旦啟用了 WeChat 原生連接器，你可以構建並運行你的應用程式以查看其是否正常運作。

警告:

WeChat 沒有針對未安裝 WeChat 應用程式的設備的計劃。如果是這種情況，Logto 將在登入時隱藏此連接器（這是官方開發指南推薦的方式）。

開始使用​

在 WeChat 開放平台創建移動應用程式​

創建帳戶​

創建移動應用程式​

基本資訊​

平台資訊​

等待審核結果​

在你的應用程式中啟用 WeChat 原生登入​

iOS​

Android​

測試 WeChat 原生連接器​