跳至主要內容

設定 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）。

備註:

你需要簽署應用才能取得簽名。詳情請參考 簽署你的應用。

完成簽署後，可以執行 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: [UIApplication.OpenURLOptionsKey: Any] = [:]
) -> Bool {
  LogtoClient.handle(url: url)
  return true
}

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 套件，並在其中新增 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 會在登入時自動隱藏此連接器（這也是 官方開發指南 建議的做法）。