¶ 微信内网页使用微信授权登录

更新时间: 2022-04-20 11:18:51

编辑

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

应用场景：微信网页、公众号；
概述：在微信 APP 内的网页内弹出微信授权框，用户授权之后可以获取当前用户的信息；
查看微信官方文档 (opens new window)。

¶ 示例代码

你可以在此获取示例代码：https://github.com/authing/wechat-eco-solution (opens new window)，访问线上示例应用 (opens new window)。

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

请前往微信公众平台 (opens new window)指引创建一个微信服务号。

你需要记录下该应用的开发者 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.authing.co/packages/authing-wxmp-sdk/1.2.0/authing-wxmp-sdk.min.js"></script>

authing-wxmp-sdk 的详细文档请见：微信网页授权登录 SDK。

¶ 初始化 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 ID_TOKEN",
    },
  })
  .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 获取用户信息。