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

  • 对用户进行认证

  • 对用户进行权限管理

  • 授权

  • 管理用户账号

  • 管理用户目录

  • 同步中心

  • 应用

  • 成为联邦认证身份源

  • 连接外部身份源(IdP)

  • 微信生态全场景能力

  • 迁移用户到 Authing

  • 管理组织机构

  • 安全设置

  • 品牌化

  • 自动化

  • 审计日志

  • 设置

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

  • 常见问题 FAQ

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

更新时间: 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 获取用户信息。

  • 示例代码
  • 第一步:在微信公众平台创建一个微信服务号
  • 第二步:在 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号

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