跳至主要內容

設定 WeChat 社交登入（原生）

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

提示:

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

開始使用​

如果你還不清楚連接器的概念，或不知道如何將此連接器新增到你的登入體驗 (Sign-in experience)，請參閱 Logto 教學。

在原生應用中，無法使用網頁作為 WeChat 的登入方式：必須跳轉到 WeChat 應用，並且需要使用他們的 SDK。

我們知道這聽起來有點可怕，但別擔心，這份教學會帶你輕鬆完成。

在 WeChat 開放平台建立行動應用​

提示:

如果你已經完成部分步驟，可以跳過相關章節。

建立帳號​

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

建立行動應用​

使用剛剛建立的帳號登入。在「移動應用」分頁，點擊綠色大按鈕「創建移動應用」。

App tabs

接下來填寫應用申請表中的必要資訊。

Create mobile app

基本資訊​

大多數欄位都很直觀，這裡有幾個小提示：

  • 如果你只是想測試 WeChat 登入，且應用尚未上架 App Store，請在「應用是否上架」選擇「否」，即可略過「應用下載連結」。
  • 「應用操作流程圖」看起來有點棘手。根據經驗，準備一份簡單的流程圖和幾張應用截圖，有助於提高審核通過的機率。

點擊「下一步」繼續。

平台資訊​

你可以設定 iOS 和 / 或 Android 平台，將 Logto 與 WeChat 原生登入整合。

iOS 應用

勾選「iOS 應用」，然後根據你的應用選擇目標裝置類型。

App platform

如果你在 App Store 上架狀態選擇「否」，這裡可以略過「AppStore 下載地址」。

填寫 Bundle ID、測試版 Bundle ID 以及 Universal Links（其實只需填一個連結 😂）。

備註:

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

提示:

WeChat 要求原生登入必須設置 universal link。如果你還沒設置或不清楚，請參考 Apple 官方文件。

Android 應用

勾選「Android 應用」。

Android app platform

填寫 應用簽名（Application Signing Signature）和 應用包名（Application Package Name）。

備註:

你需要對應用進行簽名才能取得簽名值。詳情請參考 Sign your app。

簽名完成後，可以執行 signingReport 任務取得簽名值。

./gradlew your-android-project:signingReport

對應 build variant 報告中的 MD5 值即為 應用簽名，但請記得移除所有分號並轉為小寫。

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

等待審核結果​

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

我們推測每次送審分配的審核員是隨機的，因此標準會有浮動。第一次被拒也別灰心！如實說明現況並詢問審核員如何修改即可。

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

iOS​

假設你已在應用中整合 Logto iOS SDK。這種情況下步驟很簡單，甚至不用閱讀 WeChat SDK 文件：

1. 在 Xcode 專案中設定 universal link 與 URL scheme

在 Xcode 專案 -> Signing & Capabilities 分頁，新增「Associated Domains」功能，並填入你先前設定的 universal link。

Universal link

接著到「Info」分頁，新增一個 自訂 URL scheme，內容為 WeChat App ID。

Custom URL scheme

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

Plist
備註:

我們知道這些設定看起來不太合理，但這是我們找到的最小可行解。詳情請參考 神奇的官方指南。

2. 將 LogtoSocialPluginWechat 加入 Xcode 專案

新增 framework：

Add framework

並在 Build Settings > Linking > Other Linker Flags 加入 -ObjC：

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 加入專案

確保你的 Gradle 專案 repositories 中有 mavenCentral()：

repositories {
  // ...
  mavenCentral()
}

將 Wechat Open SDK 加入 dependencies：

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

在你的 package root 下建立 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 會在登入時自動隱藏此連接器（這也是 官方開發指南 建議的做法）。