五行代码搞定微信授权登录 原创

引文：Authing 是国内首款以开发者为中心的全场景身份云产品，集成了所有主流身份认证协议，为企业和开发者提供完善安全的用户认证和访问管理服务。Authing 被科技部认定为「2020 国家高新技术企业」，被中国信息通信研究院评选为「国内身份管理与访问控制领域创新企业」，并被录入《2019 网络安全产业白皮书》。Authing 已为中国石油、国家电网、招商银行、日本丰田、德高集团等国内外优秀企业打造了卓越的开发方式、高效的办公流程和安全的 IT 管理体系。

通过 SDK 为开发者提供了一种快速在微信网页中获取用户信息并完成登录的方法。如果用户在微信客户端中访问第三方网页、公众号可以通过微信网页授权机制，来获取用户基本信息，进而实现业务逻辑。

• 应用场景：微信网页、公众号；

• 概述：在微信 APP 内的网页内弹出微信授权框，用户授权之后可以获取当前用户的信息。

第一步：在微信公众平台创建一个微信服务号

请前往微信公众平台**指引创建一个微信服务号。

你需要记录下该应用的开发者 ID（App ID）和开发者密钥（App Secret），后面需要用到。在微信公众平台后台的设置->公众号设置->功能设置页面设置网页授权范围名为 core.authing.cn。在此过程中你需要检验域名的合法性，详情请见下一步。

第二步：在 Authing 控制台配置微信网页授权应用

在控制台的社会化登录配置页面，找到微信网页授权登录应用，填入以下配置：

• App ID: 开发者 ID；

• App Secret: 开发者密钥；

• Callback URL：这是你的业务回调域名，和社会化登录应用配置的回调链接不一样。比如你的网站域名是 https://example.com ， 处理 Authing 回调请求的 url 为 /auth/callback ， 那么你应该填写为 [https://example.com/auth/callback。

• Txt Filename: 用于验证域名的 txt 文件名。

• Txt Content: 用于验证域名的 txt 文件内容。

配置完成后请点击「确定」保存信息。

第三步：开始开发接入

使用 SDK 接入

首先使用 CDN 引入 authing-wxmp-sdk：

<script src="https://cdn.jsdelivr.net/npm/@authing/wxmp/dist/authing-wxmp-sdk.min.js"></script>

初始化 SDK

使用用户池 ID 初始化 SDK：

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

发起微信授权

调用 getAuthorizationUrl 方法获取微信授权登录链接，修改 window.location 跳转到微信登录授权页面：

// 跳转到微信授权页面
window.location = authingWx.getAuthorizationUrl()

获取用户信息

跳回业务回调链接之后通过 getUserInfo 方法获取用户信息：

// 若在回调页面 authingWx 未初始化，需要先初始化，具体初始化方式参考上文

const { ok, userinfo, message } = authingWx.getUserInfo()
if (ok) {
  // do with userinfo
  console.log(userinfo)
} else if (message) {
  // message 中包含了错误提示
  alert(message)
}

接下来

获取到用户信息之后，你可以得到用户的身份凭证（用户信息的 token 字段），你可以在客户端后续发送给后端服务器的请求中携带上此 token, 以 axios 为例：

const axios = require("axios");
axios
  .get({
    url: "https://yourdomain.com/api/v1/your/resources",
    headers: {
      Authorization: "Bearer YOUR_JWT_TOKN",
    },
  })
  .then((res) => {
    // custom codes
  });

在后端接口中需要检验此 token 的合法性，来验证用户的身份，验证方式详情请见验证用户身份凭证（token）。识别用户身份之后，你可能还需要对该用户进行权限管理，以判断用户是否对此 API 具备操作权限。

使用内嵌登录组件接入

以 React 为例。

安装 @authing/react-ui-components

$ yarn add @authing/react-ui-components

# OR

$ npm install @authing/react-ui-components --save

初始化

import React from 'react'
import ReactDOM from 'react-dom'
import { AuthingGuard } from '@authing/react-ui-components'
// 引入 css 文件
import '@authing/react-ui-components/lib/index.min.css'

const App = () => {
  const appId = 'AUTHING_APP_ID'
  const onLogin = (userInfo) => {
    console.log(userInfo)
  }
  return <AuthingGuard appId={appId} onLogin={onLogin} />
}

ReactDOM.render(<App />, root)

使用

初始化完成后在微信中打开页面会见到如下按钮，点击即可进行授权，授权完成后会跳转到应用回调链接，且可使用AuthenticationClient获取用户信息。