跳到主要内容

设置 WeChat 社交登录 (Set up social login with WeChat)（原生）

Logto 官方为原生应用（iOS 和 Android）提供的 WeChat 社交登录连接器。

提示:

本指南假设你对 Logto 连接器 (Connectors) 有基本的了解。对于不熟悉的人，请参考 连接器 (Connectors) 指南以开始了解。

入门指南​

如果你不了解连接器的概念，或者不知道如何将此连接器添加到你的登录体验中，请参阅 Logto 教程。

在原生应用中，不能使用网页作为 WeChat 的登录方式：需要跳转到 WeChat 应用，并且还需要使用他们的 SDK。

我们知道这听起来有点吓人，但别担心。我们会在本教程中轻松搞定。

在微信开放平台创建移动应用​

提示:

如果你已经完成了部分步骤，可以跳过相应部分。

创建账号​

打开 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

填写 应用签名 和 应用包名。

备注:

你需要对应用进行签名以获取签名信息。详情请参考 应用签名。

签名完成后，可以执行 signingReport 任务获取签名信息。

./gradlew your-android-project:signingReport

对应构建变体报告中的 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 项目仓库中包含 mavenCentral()：

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 包，并在该包下添加 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 应用的设备没有解决方案。如果未检测到 WeChat 应用，Logto 会在登录时隐藏该连接器（这是 官方开发指南 推荐的做法）。