PC 网站使用微信扫码登录

更新时间: 2022-03-22 10:58:40

微信 PC 扫码登录可以让用户使用微信身份安全登录第三方应用或网站，在 Authing 中开启微信扫码登录之后，可实现通过 Authing 快速获取微信用户基本开放信息和帮助用户实现基础开放功能。

• 应用场景：PC 网站；
• 概述：在 PC 网站应用中跳转到微信二维码页面，然后使用微信扫码登录应用；
• 查看微信官方文档 (opens new window)。

示例代码

你可以在此获取示例代码：https://github.com/Authing/wechat-eco-solution (opens new window)。

第一步：在微信开放平台创建一个网站应用

请在 微信开放平台 (opens new window)指引创建一个微信网站应用，你需要记录下该应用的 App ID 和 App Secret，后面需要用到。请确保该应用获取到了微信登录的权限，并将授权回调域设置为 core.authing.cn。

第二步：在 Authing 控制台配置微信扫码应用

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

• App ID: 微信应用 ID；
• App Secret: 微信应用密钥；
• Callback URL：这是你的业务回调域名，和自建应用配置的回调链接不是一个概念，也和第三方社会化登录控制台的回调地址配置无关。比如你的网站域名是 https://example.com ， 处理 Authing 回调请求的 url 为 /auth/callback ， 那么你应该填写为 https://example.com/auth/callback。这个参数已经不推荐使用，建议在应用中单独配置回调链接，此处地址可填入 `#``。

第三步：开始开发接入

Authing 社会化登录支持四种接入方式：使用 JavaScript SDK、使用嵌入登录组件、 使用托管登录页 和 手动调用社会化登录接口。每种不同的接入方式各有优劣点，你可以根据自己的业务需求来选择合适的方式。

以下是各种方式的优劣对比：

接入方式	优势	劣势	是否推荐
使用 JavaScript SDK	接入简单，只需要几行代码。可自定义程度最高。		是
使用嵌入登录组件	接入简单，只需要几行代码。可以将该组件集成到你的应用。自定义程度相对较高		是
使用托管登录页	运维简单，由 Authing 负责运维。每个用户池有一个独立的二级域名。	如果需要嵌入到你的应用，需要使用弹窗模式登录，即：点击登录按钮后，会弹出一个窗口，内容是 Authing 托管的登录页面，或者将浏览器重定向到 Authing 托管的登录页。	是
手动调用社会化登录接口		需要手动从 URL 解析用户信息。接入相对较为复杂麻烦。	不推荐

选择接入方式

使用 SDK

Loading...

实现微信 PC 扫码登录，你只需要实现以下几行代码：

• 通过应用 ID 初始化 AuthenticationClient，你可以在控制台的应用列表页查看应用 ID。
• 调用 authenticationClient.social.authorize 方法，第一个参数传入 wechat:pc, 第二个参数指定 onSuccess 和 onError 回调函数。
• 用户成功登录之后，你可以在 onSuccess 回调函数中得到用户信息；如果登录失败，可以在 onError 回调函数中获取到错误码和错误信息。完整的错误码请见: 错误码列表。

import { AuthenticationClient } from "authing-js-sdk";

const authenticationClient = new AuthenticationClient({
  appId: "YOUR_APP_ID",
  appHost: 'https://xxx.authing.cn',
});

// 使用 GitHub 登录
await authenticationClient.social.authorize("wechat:pc", {
  onSuccess: (user) => {
    console.log(user);
  },
  onError: (code, 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 具备操作权限。