微信 APP 内网页登录
微信 APP 内网页登录提供在线体验地址:https://sample.authing.cn/wxmobile/ (请在微信客户端内打开哦)。以及 GitHub Demo 源码:https://github.com/Authing/authing-wxmp-sdk
准备工作
你一共需要准备以下内容:
注册一个微信服务号并通过微信认证。
在 Authing 控制台填入微信服务号信息
注册微信服务号
按照微信官方文档指引注册成功之后,你可以在微信公众平台后台的 开发 -> 基本配置 页面获取开发者ID(AppID) 和开发者密码(AppSecret)。
之后需在微信公众平台后台的 设置 -> 公众号设置 -> 功能设置 页面设置 网页授权域名 为 oauth.authing.cn:
出于安全验证考虑,微信服务器需要和 Authing 服务器做一次请求验证,开发者需要下载 txt 文件,并记录 文件名 和 文本内容,之后需要填入 Authing 控制台。
将公众号信息填入 Authing 控制台
在微信公众平台创建完服务号之后,请按照下图指示在 Authing 控制台找到 Github 社会化登录配置:
在此需要填入你的公众号信息:
AppID: 公众号的 AppID
AppSecret: 公众号的 App Secret
Redirect:这是你的业务回调域名。比如你的网站域名是 https://example.com , 处理 Authing 回调请求的 url 为 /auth/wechatmp/callback , 那么你应该填写为
https://example.com/auth/github/callback
。Txt Filename: 上一步配置网页授权域名中下载的的 txt 文件文件名。
Txt Content: 上一步配置网页授权域名中下载的的 txt 文件内容。
Scopes(可选):详情请见配置登录授权 Scopes。
开始接入
提供两种方式:手动接入与使用 Authing 提供的 SDK。
方式一:使用 Authing SDK
1. 安装 @authing/wxmp
包:
@authing/wxmp
包:或者
你也可以直接引用 cdn 文件:
然后通过以下方式引入:
2. 初始化 AuthingWxmp
需要传入你的用户池 ID(userPoolId)。
3. 获取微信授权链接
此链接请在微信客户端内访问!你可以在 Web 页面上放置一个可点击的按钮或 Logo 链接到上面的链接以便用户可以点击登录。
4. 处理 Authing 回调请求
Authing 的回调请求数据中包含了用户信息。
5. 完整 API 列表
请见:https://github.com/Authing/authing-wxmp-sdk
方式二:手动接入
1. 生成微信授权链接
链接格式为:https://oauth.authing.cn/oauth/wechatmp/url/:userPoolId 。其中 userPoolId 替换为你的用户池链接。
访问该链接会直接 302 跳转至微信授权页面,用户同意授权之后会先经过 Authing 的服务器,之后 Authing 会将用户信息跳转到你在 Authing 控制台配置的业务回调链接。
2. 处理 Authing 回调请求
上一步用户同意授权之后,会先跳转到 Authing 服务器,之后 Authing 会携带用户信息跳转到开发者在 Authing 控制台中配置的业务回调链接,并附带以下 Get 请求参数:
参数 | 说明 |
code | 错误或成功代码,200 为成功,非 200 为失败 |
message | 成功或错误信息 |
data | userInfo,若 code 为非 200 不返回此参数 |
部分浏览器和 Web Server 在 URL 过长的情况下有可能出现 404,如 ASP.NET,这个时候需要修改一下配置,具体方式请见这个 StackOverflow 回答。
data 数据示例:
以下是使用 JavaScript 从 URL 参数中获取用户数据的代码:
完成接入
恭喜你,此时已经接入了微信 App 内网页登录。获取到用户信息之后,你可以得到登录凭证 token,你可以在后续的 API 请求中携带上此 token, 然后在后端接口中根据此 token 区分不同用户,详情请见验证 token。
Last updated