Authing 文档文档
快速开始
概念
使用指南
开发集成 arrow
  • V2 文档
  • V3 文档
应用集成
加入 APN
开发集成
多租户(内测版)
控制台文档
多租户控制台
租户控制台
Saas 应用 Demo
快速开始
概念
使用指南
开发集成 arrow
  • V2 文档
  • V3 文档
应用集成
加入 APN
开发集成
多租户(内测版)
控制台文档
多租户控制台
租户控制台
Saas 应用 Demo
旧版
使用指南
  • 快速开始

  • 对用户进行认证

  • 对用户进行权限管理

  • 授权

  • 管理用户账号

  • 管理用户目录

  • 同步中心

  • 应用

  • 成为联邦认证身份源

  • 连接外部身份源(IdP)

  • 微信生态全场景能力

  • 迁移用户到 Authing

  • 管理组织机构

  • 安全设置

  • 品牌化

  • 自动化

  • 审计日志

  • 设置

  • Authing 令牌
  • 私有化部署方案

  • 常见问题 FAQ

¶ PC 网站使用微信扫码登录

更新时间: 2022-11-05 20:05:04
编辑

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: "AUTHING_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 具备操作权限。

  • 示例代码
  • 第一步:在微信开放平台创建一个网站应用
  • 第二步:在 Authing 控制台配置微信扫码应用
  • 第三步:开始开发接入
  • 接下来

用户身份管理

集成第三方登录
手机号闪验 (opens new window)
通用登录表单组件
自定义认证流程

企业内部管理

单点登录
多因素认证
权限管理

开发者

开发文档
框架集成
博客 (opens new window)
GitHub (opens new window)
社区用户中心 (opens new window)

公司

400 888 2106
sales@authing.cn
北京市朝阳区北辰世纪中心 B 座 16 层(总)
成都市高新区天府五街 200 号 1 号楼 B 区 4 楼 406 室(分)

京ICP备19051205号

beian京公网安备 11010802035968号

© 北京蒸汽记忆科技有限公司