企业微信H5_身份验证,H5应用网页授权登录获取身份

已于 2022-02-28 18:40:14 修改
阅读量1.3w 收藏 85
点赞数 25
分类专栏： 企业微信 文章标签： 获取用户信息
于 2022-02-27 11:26:28 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_40816738/article/details/123155437
版权

文章目录

一、调用流程

官网文档：https://developer.work.weixin.qq.com/document/path/91335

1. 企业微信OAuth2接入流程

在这里插入图片描述
我根据上图画的便于理解的可实施图
在这里插入图片描述

步骤如下->
①前端项目->前端项目检查自身是否登录，如果没有登录携带redirect_url调用->后端api获取企业微信授权登录链接
②后端api->返回生成redirect_ur及app_id等信息的企业微信oauth授权链接->前端项目
③前端项目->windows.location.href跳转->企业微信授权链接
④企业微信->企业微信授权，携带code回调redirect_url->前端项目
⑤前端项目->携带将state、code等调用->后端api接口获取用户信息等
⑥后端api->服务端通过code调用->企业微信获取用户信息
⑦后端api->返回token及用户信息->前端项目

2. 使用OAuth2前须知

重点阅读，比较重要
核心思想：就是调用之前需要配置可信任域名+端口，下面会进行演示。
在这里插入图片描述

3. 构造网页授权链接

这个链接一般为了安全，由前端触发请求后端构造网页授权链接（回调redirect_uri）

https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect_uri=REDIRECT_URI&response_type=code&scope=snsapi_base&state=STATE#wechat_redirect

在这里插入图片描述

  • 参数说明
    appid的取值和redirect_uri授权后重定向的回调链接地址，请使用urlencode对链接进行处理，这个比较重要
    在这里插入图片描述
4. 获取访问用户身份

通过后端后取的ACCESS_TOKEN的前端传递过来的code，调用“获取访问用户身份”请求地址即可
在这里插入图片描述

二、调试前准备
2.1. 配置域名映射
127.0.0.1 apitest.tobdev.com
127.0.0.1 test.tobdev.com

在这里插入图片描述

2.2. 跨域+域名请求

在这里插入图片描述

2.3. 设置可信任域名

登录管控台：https://work.weixin.qq.com/wework_admin/frame#apps
在这里插入图片描述
网页授权及JS-SDK
申请域名校验
在这里插入图片描述
在这里插入图片描述

2.4. 登录企微

建议使用PC端企业微信进行调试，手机调试也可以，如果是手机调试的话，请参考：
host配置及代理相关，H5应用如何本地及真机调试https://blog.csdn.net/weixin_40816738/article/details/122431390

2.5. 选择自建应用

选择企业内部自建应用
在这里插入图片描述

三、实战演练

步骤如下->

3.1. 前端编码触发后端api

①前端项目->前端项目检查自身是否登录，如果没有登录携带redirect_url调用->后端api获取企业微信授权登录链接

在这里插入图片描述

3.2. 后端构造授权链接

②后端api->返回生成redirect_ur及app_id等信息的企业微信oauth授权链接->前端项目
在这里插入图片描述

3.3. 请求授权链接

③前端项目->windows.location.href跳转->企业微信授权链接
在这里插入图片描述

3.4. 回调前端

④企业微信->企业微信授权，携带code回调redirect_url->前端项目
在这里插入图片描述

3.5. 携带code请求后端

⑤前端项目->携带将state、code等调用->后端api接口获取用户信息等
在这里插入图片描述

3.6. 请求企业微信，获取用户信息

这里给大家进行步骤拆解：
⑥后端api->服务端通过code调用->企业微信获取用户信息

  • 后端接收前端的code
    在这里插入图片描述
  • 后端携带corpId请求企业微信获取access_token

⑦后端api->返回token及用户信息->前端项目
在这里插入图片描述

  • 后端获取token其实需要2个参数（AccessTokenUrl(),corpId,agentSecret）这一步通过查询数据库的信息，最后拼接而成的
    在这里插入图片描述
  • 后端构造“获取访问用户身份”请求地址，调用企业微信即可
    在这里插入图片描述
  • 后端接收企业微信返回的用户信息，这里只是简要的用户信息，最重要的是userid，等会会携带userid获取用户的详细信息（后续会讲）
    在这里插入图片描述
  • 前端接收后端推送过来的用户信息进行展示
    在这里插入图片描述
四、代码讲解

步骤如下->

4.1. 前端编码触发后端api

①前端项目->前端项目检查自身是否登录，如果没有登录携带redirect_url调用->后端api获取企业微信授权登录链接

在这里插入图片描述
【H5应用OAuth授权登录】按钮
在这里插入图片描述
地址编码处理，官网文档有讲到
在这里插入图片描述
请求后端api
在这里插入图片描述
在这里插入图片描述

4.2. 后端构造授权链接

②后端api->返回生成redirect_ur及app_id等信息的企业微信oauth授权链接->前端项目
在这里插入图片描述
service组装网页授权连接
在这里插入图片描述

4.3. 请求授权链接

③前端项目->windows.location.href跳转->企业微信授权链接
在这里插入图片描述
在这里插入图片描述

4.4. 回调前端

④企业微信->企业微信授权，携带code回调redirect_url->前端项目
在这里插入图片描述
在这里插入图片描述

4.5. 携带code请求后端

⑤前端项目->携带将state、code等调用->后端api接口获取用户信息等
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

4.6. 请求企业微信，获取用户信息

这里给大家进行步骤拆解：
⑥后端api->服务端通过code调用->企业微信获取用户信息

  • 后端接收前端的code
    在这里插入图片描述
  • 后端携带corpId请求企业微信获取access_token

⑦后端api->返回token及用户信息->前端项目
在这里插入图片描述

  • 后端获取token其实需要2个参数（AccessTokenUrl(),corpId,agentSecret）这一步通过查询数据库的信息，最后拼接而成的
    在这里插入图片描述
  • 后端构造“获取访问用户身份”请求地址，调用企业微信即可
    在这里插入图片描述
  • 后端接收企业微信返回的用户信息，这里只是简要的用户信息，最重要的是userid，等会会携带userid获取用户的详细信息（后续会讲）
    在这里插入图片描述
  • 前端接收后端推送过来的用户信息进行展示

在这里插入图片描述
用户信息

{
"errcode": 0,
"UserId": "ZeXin",
"DeviceId": "b4f2f8f9-6a51-4f1b-a927-2140b9253c17",
"errmsg": "ok",
"token": "tobdeveyJhbGciOiJIUzI1NiJ9.eyJzdWIiOiJ0b2JkZXYiLCJjb3JwX2lkIjoid3dlYTk4MjIwZmRjZDhhMzhkIiwiaWF0IjoxNjQ1OTMwMjYxLCJleHAiOjE2NDY1MzUwNjF9.NCfLR5fnYubuRnSDojXmV4BbTCVNw7Yu-IKZpywvhMQ"
}

在这里插入图片描述

在这里插入图片描述

五、源码分享
5.1. 后端源码

后端：https://gitee.com/gblfy/qywx-inner-java
在这里插入图片描述

5.2. 前端源码

前端：https://gitee.com/gblfy/qywx-vuejs
在这里插入图片描述//gitee.com/gblfy/qywx-vuejs)

公司自研的H5系统嵌入企业微信并实现免登录
平凡的世界
03-17 1139
通过以上步骤，即可实现H5系统在企业微信内无缝嵌入及免登录功能。若需更复杂功能（如消息推送、审批流），可进一步调用企业微信API扩展。
企业自建应用（H5）实现上下游之间下游企业授权单点登录的实现
Yaaaac的博客
08-18 653
vue 企业微信 企业微信上下游授权单点登录
h5应用调用企业微信api过程(获取当前外部联系人userId方法)
jared.wang
07-27 2497
【代码】h5应用调用企业微信api过程(获取当前外部联系人userId方法)
微信网页 H5 授权获取用户信息
最新发布
weixin_45289656的博客
04-10 518
文档地址：https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_webpage_authorization.html。申请地址：https://mp.weixin.qq.com/debug/cgi-bin/sandbox?画圈的这几个都是有用的，得有个测试号，就用自己的手机扫一下就行，还得再加个网页账号。代码就这么写，不用改，就能直接用，就能获取到用户信息。最后看一下在微信开发工具中获取到账号信息。
企业微信H5授权登录
qq_35946021的博客
05-28 2530
在企业中如果需要在打开的网页里面携带用户的身份信息，第一步需要获取code参数如何实现企业微信H5获取当前用户信息即accessToken？
在企业微信里面添加h5页面 进行登录授权
susanliy的博客
03-27 3412
1.需求：在企业微信里面添加h5页面 进行登录授权，获取到用户的code，进行登入id的验证。在企业微信内部进行配置，拿到appid，redirect_uri，agentid参数。② 直接将授权的操作写在首页中，在首页进行授权，然后再跳转首页（我用的是这种方式）① 有一个页面用于授权，然后在跳转首页。
h5-企业微信单点登录
c1o2c3o4的博客
05-23 6443
H5页面增加企业微信单点登录-前端获取code
企业微信集成H5授权登录相关知识（二）
VV的博客
05-11 731
客户端通过令牌，去请求数据。我理解就是我们去外国，拿到了护照你才能过去买东西。注意：回调连接地址必须域名能访问的，必须在企业微信里面调用。二：企业微信接口说明。
vue 实现企业微信内部H5应用获取授权并本地调试
靈的博客
06-17 8621
实现在企业微信中进入H5应用自动授权并进行单点登录
h5接入企业微信登录以及本地开发调试
青春正在燃烧的博客
06-07 3785
企业微信第三方H5应用本地开发联调，登录，详细教程
企业微信开发（自建应用h5）
qq_38969618的博客
12-26 5402
如何在企业微信中开发h5应用
企业微信开发第三方应用开发篇
12-09
此外，企业微信支持第三方应用和内部应用的开发者身份验证和扫码授权登录。 企业微信开发者需要掌握的另一个关键点是应用的上架流程。上架流程包括应用的概述、开发流程、上线与上架推广。此外，注册创建第三方网页...
企业微信 创建应用后如何构造网页授权 获取token 获取用户信息
荼蘼_的博客
06-21 6315
第一次对接企业微信，上网找了各种方案。目的是在企业微信中，公司发给员工一个地址，员工点开后打开画面，在这个画面上可以获取到这个员工的userid（后续功能操作就是各自不同的功能了哈，就不详细说了）。然后根据官网内容，分析了一下，我需要连接官网的【构造网页授权】【获取token】【获取用户信息】。然后调查了别人怎么写，查来查去除了写内容，还需要一些配置。前端使用的vue的uniapp框架。后台使用Java。如果符合你现在的需求，可以参照下面的方法~ ^-^~
Java-企业微信获取登录用户的userid问题点解决记录
Conquer_l的博客
12-26 2640
Java-企业微信获取登录用户的userid问题点解决，包括redirect _ uri需使用应用可信域名错误提示和域名所有权检验不通过错误提示的解决方法，另附获取userid的具体代码
人脸核身 微信h5_微信小程序人脸核身---快速入门到实战(附开发工具类，复制即用)...
weixin_39724362的博客
12-22 1184
这里咱们使用腾讯云的人脸核身来给你们作一个基础的介绍和使用java1、基本介绍1.概述人脸核身：通常是对一组对用户身份信息真实性进行验证审核的服务套件提供各种认证功能模块，包含证件 OCR 识别、活体检测、人脸1 : 1对比等能力，以解决行业内大量对用户身份信息核实的需求。web2.功能特色OCR 识别支持识别身份证正反面，一次扫描便可返回身份证号、姓名、有效时间等全部字段，数字识别准确率达到 9...
企业微信 自建服务器,企业微信对接企业自建应用（小程序、h5登陆认证）
weixin_34377186的博客
07-30 2242
企业微信与自建h5应用和小程序对接1.企业微信对接h5网页授权登登陆链接https://open.weixin.qq.com/connect/oauth2/authorize?appid=CORPID&redirect_uri=REDIRECT_URI&response_type=code&scope=SCOPE&agentid=AGENTID&state=...
企业微信H5手动授权
wu1198949718的博客
11-12 499
企业微信 手动授权
企业微信H5登录流程，以及遇到的问题解决
pig_is_duck的博客
11-08 2933
在开发企业微信H5应用的时候，遇到的第一个问题，就是登录问题，在这里也遇到了一些问题，特此总结出来
企业微信创建应用；企业微信接入H5应用；企业微信创建自己的企业并创建应用；
热门推荐
i_am_a_div的博客
09-22 1万+
企业微信创建应用；企业微信接入H5应用；企业微信创建自己的企业并创建应用；
怎么调用企业微信内部浏览器
10-18
在企业微信中，如果你想通过API或者网页链接调用内部浏览器打开特定页面，你需要利用企业微信提供的Webview API或者OAuth流程。以下是一个基本步骤： 1. **获取授权码**: 首先，用户需要在企业微信客户端点击授权，这会返回一个临时授权码。 2. **调用微信JS-SDK**: 使用这个授权码，通常在一个`login`函数里调用`wx.authorize`方法，请求用户的授权。 ```javascript wx.authorize({ scope: 'snsapi_base', // 或者其他你需要的权限 success: function (res) { var code = res.authCode; // 获取到临时授权码 // 进行后续处理，如发送到服务器换取access_token }, fail: function (err) { console.error('授权失败'); } }); ``` 3. **换取access_token**: 将授权码发送到你的服务器，使用它去企业微信开放平台换取access_token，然后可以使用该token调用`wx.miniProgram.reLaunch`或`wx.navigateToMiniProgram`等方法。 ```javascript // 示例 axios.post('/api/login', { code }).then((response) => { const accessToken = response.data.accessToken; wx.miniProgram.reLaunch({ url: 'your-page-url-in-mbp' // 要打开的内部小程序页面路径 }); }); ``` 4. **打开内部浏览器**: 成功获得access_token后，就可以使用`reLaunch`或`navigateToMiniProgram`打开企业微信内嵌的H5或小程序页面了。 记得要在企业微信开发者后台配置相应的应用信息，并确保你的公众号或小程序已经获得了必要的权限。
评论 5
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

gblfy

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值