使用 Authing 五分钟接入微信网页授权登录

Authing 官方2019.11.07阅读 602

Authing 发布新功能啦！从现在开始，Authing 支持了新的社会化登录手段：微信内网页授权登录。

微信网页授权，即当你在微信客户端内访问网页时，可以调用微信的授权接口获取用户信息，如下图所示：

这对于很多应用来说，这是不可或缺的功能，却又属于繁琐的重复性劳动，借助 Authing，可以让你非常快速地接入微信授权登录。

为了理解 Authing 微信网页授权的原理，需要区分参与的四方：

微信服务器：保存用户的身份信息，包括昵称、头像等。
Authing 服务器：和微信服务器进行交互，获取用户信息（这个过程使用的是 OAuth 协议，是完全安全的）。
Authing 平台开发者：不需要直接和微信服务器进行交互，因为这部分繁琐的过程 Authing 已经解决了。
终端用户：真正访问页面的用户，整个过程对 Authing 无感知，用户体验不会受到任何影响。

完整的流程如下：

开发者引导用户跳转到微信授权页面：https://oauth.authing.cn/oauth/wechatmp/url/:userPoolId。
终端用户同意授权。
Authing 和微信根据 OAuth 协议完成用户信息交互。
Authing 将用户信息（包含 token）发送到开发者自定义的业务回调链接。
终端用户后续的请求将 token 携带上。
开发者在后端调用Authing 提供的方法检验 token 的合法性以及登录状态。
根据 Authing 返回的登录状态和开发者自己的业务逻辑，对请求进行相应处理。

开始之前需要进行一些必要的配置，具体可以参考：https://github.com/Authing/authing-wxmp-sdk#%E5%BC%80%E5%8F%91%E5%87%86%E5%A4%87

我们提供了 SDK，帮助开发者更方便地完成上述任务，如何安装 SDK 请看https://github.com/Authing/authing-wxmp-sdk#%E5%AE%89%E8%A3%85。

第一步首先初始化，"YOUR_USERPOOLID" 填入你的用户池 ID（用户池是 Authing 的一个重要概念，如果你还不了解，可以点击这里查看）。

const authingWx = new AuthingWxmp({
  userPoolId: "YOUR_USERPOOLID"
})

引导用户跳转，可以有很多方式，比如：

当用户通过微信客户端网页打开时，让浏览器自动跳转。
当用户通过微信客户端网页打开时，点击登录按钮之后跳转，可以参考掘金的做法：点击微信图标之后，浏览器就会跳转到微信的授权页面。

用下面这一行代码即可完成跳转：

window.location = authingWx.getAuthorizationUrl()

如果用户同意了授权，Authing 将会返回用户信息，开发者可以通过下面的代码获取用户信息：

// 跳回业务回调链接之后获取用户信息
// 若在回调页面 authingWx 未初始化，需要先初始化，具体初始化方式参考上文
const { ok, userinfo, message } = authingWx.getUserInfo()
if (ok) {
    // do with userinfo
    console.log(userinfo)
} else if (message) {
    // message 中包含了错误提示
    alert(message)
}

用户信息示例如下，其中包含了头像、昵称、openid、unionid、token 等信息：

{
    "_id": "5dc10bcb6f94c178c6ffffb9",
    "email": null,
    "emailVerified": false,
    "unionid": "oiPbDuG4S7msrKHPKDc8MECSe8jM",
    "openid": "oiPbDuG4S7msrKHPKDc8MECSe8jM",
    "oauth": "{\\"openid\\":\\"oiPbDuG4S7msrKHPKDc8MECSe8jM\\",\\"nickname\\":\\"廖长江\\",\\"sex\\":1,\\"language\\":\\"zh_CN\\",\\"city\\":\\"海淀\\",\\"province\\":\\"北京\\",\\"country\\":\\"中国\\",\\"headimgurl\\":\\"<http://thirdwx.qlogo.cn/mmopen/vi_32/GkxYERPDdTMk7bOk3BgBmEEYul8oMcOoLgNHLoibZn5ibe4EulWBp1xo6uN4az59eoSBYBW0QmXB9TrsJEM0EoPw/132\\",\\"privilege\\":[]}">,
    "registerMethod": "oauth:wxmp",
    "username": "廖长江",
    "nickname": "廖长江",
    "company": "",
    "photo": "<https://usercontents.authing.cn/avatar-5dc10bcb6f94c178c6ffffb9-1572932555337>",
    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7InVuaW9uaWQiOiJvaVBiRHVHNFM3bXNyS0hQS0RjOE1FQ1NlOGpNIiwiaWQiOiI1ZGMxMGJjYjZmOTRjMTc4YzZmZmZmYjkiLCJjbGllbnRJZCI6IjVkYTdlZGFiNTAzOTZjMWFkOTYyMzc4YSJ9LCJpYXQiOjE1NzI5NTY0MjUsImV4cCI6MTU3NDI1MjQyNX0.OTgl72WZS8So3R5DbWCJ7I_Bd0LaZa4S0TAVMg9qaYQ",
    "tokenExpiredAt": "11/20/2019, 8:20:25 PM",
    "loginsCount": 43,
    "lastLogin": "11/5/2019, 8:20:25 PM",
    "lastIP": "127.0.0.1",
    "signedUp": "11/5/2019, 1:42:35 PM",
    "blocked": false,
    "isDeleted": false
}

其中的token是登录凭证，开发者应当妥善保存，并且后续的请求需要携带上此 token，即设置 Authorization 请求头为 "Bearer " + token，如：

Authorization: "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7InVuaW9uaWQiOiJvaVBiRHVHNFM3bXNyS0hQS0RjOE1FQ1NlOGpNIiwiaWQiOiI1ZGMxMGJjYjZmOTRjMTc4YzZmZmZmYjkiLCJjbGllbnRJZCI6IjVkYTdlZGFiNTAzOTZjMWFkOTYyMzc4YSJ9LCJpYXQiOjE1NzI5NTY0MjUsImV4cCI6MTU3NDI1MjQyNX0.OTgl72WZS8So3R5DbWCJ7I_Bd0LaZa4S0TAVMg9qaYQ"

如果你使用 NodeJS 的 axios，可以这样写：

axios.get(SOME_SERVICE_URL, {
  headers: {
    Authorization: `Bearer ${userinfo.token}`
  }
})

其中SOME_SERVICE_URL是开发者自己的业务接口，开发者在后端获取了token之后，Authing 提供了几种方法帮助检验token的合法性和对应用户的登录状态（具体的方法请看：https://docs.authing.cn/advanced/authentication/jwt-token.html），开发者可以把这个方法封装成一个函数，比如说check_authing_token_status（为了方便我使用了 Python ）：

def check_authing_token_status(token: str) -> bool:
    """
    :param token: Authing 返回用户信息中携带的 token
    :return: 布尔值，表示是否处于登录状态
    """
                # 调用 Authing 提供的方法，具体过程省略，请参见上文提到的文档
                pass

然后就可以通过登录状态和自己的业务逻辑对请求进行响应了，比如：

logged_in = check_authing_token_status(token)
if not logged_in:
    # 返回错误提示
# 正常继续下面的逻辑

到此，整个认证流程就算是完成了，开发者需要完成的代码量很少很少，同时终端用户的使用体验也不会受到任何影响。这也是 Authing 的使命：将开发者从繁琐的重复性劳动中解放出来，让开发者有更多的时候去做和业务相关的事情，从而提升社会生产力！

如果你想快速体验，可以访问以下链接：https://sample.authing.cn/

如果你想了解更多技术细节以及 SDK ，可以访问这个 GitHub repo：https://github.com/Authing/authing-wxmp-sdk。

如果你想了解 Authing 与微信服务器进行 OAuth 协议交互的细节，可以访问微信的官方文档：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html。

如果你还想体验一下如何使用 Authing 快速实现 SSO 单点登录，可以访问：https://sample.authing.cn。

如果你想了解 Authing 更多功能，可以访问 Authing 官网：https://authing.cn。

文章作者