网站上做企业微信扫码授权登录怎么做?(超详细教程)

news/2024/5/20 7:22:33/文章来源:https://blog.csdn.net/weixin_43991241/article/details/120886476

企业微信已经搞了这一套完整的教程!

https://developer.work.weixin.qq.com/tutorial/detail/56

 第1步:企业微信自建应用

第2步:浏览企业微信开发文档

企业微信的开发文档: 企业微信API

第3步:企业微信自建应用设置授权域名

点击你创建好的自建应用:

点击网页授权及js-sdk设置可信域名(设置好的就显示"已启用")

要验证域名

点击企业微信授权登录的设置按钮(这个是一定要做的!!!)

此处域名与之前的一样,并且接下来提到的redirect_uri也是要用这个域名。

第4步:根据你的登录逻辑看官方文档进行联调。

简单步骤分析(公司需求,所以有弄过)

1 获取access_token,有access_token才可以访问企业微信服务端的api

官方文档链接:获取access_token - 企业微信API

我的建议:需要把你的企业ID corpid、自建应用id 、自建应用的secret写在配置里(nacos)

access_token还需要存在redis里,因为频繁调用获取access_token的接口会频率拦截,所以要做缓存。

企业ID corpid: 

2 构造内嵌登录二维码(这个是一定要做的)

官方文档链接: 构造扫码登录链接 - 企业微信API

前提:引入wwLogin-1.X.X.js文件

1 如果是简单的html,那就是是script引入

2 如果是vue,就在入口文件index.html 引入js文件

public/index.html 引入js文件

也有可能直接在项目的 index.html 引入js文件

我的建议:把"redirect_uri"配置在nacos里,不过返回给前端的时候,要进行UrlEncode。

redirect_uri一定要有http、https的协议,不然就会一直显示参数错误

下图为在nacos中企业微信的配置信息。配置的几个信息,不建议在前端直接使用,所以放在后台配置里,用接口返回。

同时前端上有id为"wx_reg"的标签容器:

到这一步,就已经能够成功在网页上看到要扫描的码了,用户扫码后点击登录,就跳转到你配置的"redirect_uri"上。

注意:"redirect_uri"一定要是你之前自建应用里设置的可信域名,才会看到这个二维码,否则会显示 "redirect_uri" 与配置的授权完成回调域名不一致。同时还要记得,带上http或者https,不然显示参数错误,然后如果是写的是域名,则域名要进行备案,不然访问不到。我之前的有篇博客写了这个问题:redirect_uri 与配置的授权完成回调域名不一致 ==> 企业微信要这样设置_女IT玩家-彬彬的博客-CSDN博客

3 这个"redirect_uri" 的几种处理

用户扫码后点击登录,会进行redirect_uri 的跳转(我是跳转到下面的接口/codeLogin) ,跳转的时候会带上code和state参数。

根据返回的code,我们要验证用户的信息,数据库里是否有这个企业微信用户号,如果没有就提示注册或者该企业微信没有被绑定,请先绑定再进行企业微信扫码登录。

根据code获取用户的企业微信信息官方API:获取访问用户身份 - 企业微信API 

第一种重定向到当前页面:

vue中用watch监听路由变化取code,传到接口做处理

watch:{$route(r) {if (r.query.code) {# 请求后台接口,code = r.query.code}}
}

第二种直接重定向后台的接口

# 后台接口代码
@GetMapping(value = "/codeLogin", produces = {"application/json;charset=UTF-8"})
public void setKey(@RequestParam("action") String action,
@RequestParam("code") String code,
@RequestParam("state") String state,
HttpServletResponse response) throws IOException {// 验证成功后要跳转到的urlString url = weChatConfig.getRedirectLoginResultUri();// 获取用户身份,验证该用户信息是否在数据库try {String accessToken = weChatConfig.getAccessToken(weChatConfig.getGdkAppSecret(), weChatConfig.WECHAT_ACCESS_TOKEN_KEY_DPY_APP);Map<String,Object> params = new HashMap<>();params.put("access_token",accessToken);params.put("code",code);String result = HttpUtil.get(weChatConfig.GET_USER_INFO_URL, params,30000);JSONObject jsonObject = JSON.parseObject(result);Integer errcode = (Integer) jsonObject.get("errcode");if (errcode == 0) {String userId = (String) jsonObject.get("UserId");QueryWrapper<AdminQywx> adminParams = new QueryWrapper<>();adminParams.eq("wx_user_id",userId);List<AdminQywx> adminQywxes = adminQywxService.list(adminParams);if (CollectionUtils.isNotEmpty(adminQywxes)) {AdminQywx adminQywx = adminQywxes.get(0);// 将admin的id+4位uuid作为key,admin绑定的企业微信id作为value,存在redis中,用户登录验证String key = LOGIN_TOKEN_PREFIX + adminQywx.getUserId();String value = UUID.randomUUID().toString().replaceAll("-","");redisUtil.set(key,value,300);url = url + "?user=" + adminQywx.getUserId() + "&key=" + value;}}// 请求重定向response.sendRedirect(url);} catch (Exception e) {response.sendRedirect(url);}
}

总结

企业微信扫码授权登录要先建立在用户的企业微信号与用户在系统中的绑定关系。根据redirect_uri来做用户的扫码绑定或者扫码登录。并不是说redirect_uri就一定是登录。

简易demo代码

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>企业微信扫码登录demo</title><!-- 生产环境版本,优化了尺寸和速度 --><script src="https://cdn.jsdelivr.net/npm/vue@2"></script><script src="http://wwcdn.weixin.qq.com/node/wework/wwopen/js/wwLogin-1.2.7.js"></script><style>* {margin: 0;padding: 0;}body {width: 100%;background: #fff;}</style>
</head><body><div id="app"><div id="wx_reg" style="height: 400px; width: 400px; border: 1px solid red;"></div></div>
</body><script>var app = new Vue({el: '#app',data: {message: 'Hello Vue!'},methods: {createCode() {var wwLogin = new WwLogin({"id": "wx_reg","appid": "", // 填你的企业微信企业id"agentid": "",// 填你的自建应用id"redirect_uri": "http://", // 填你的可信域名里的跳转链接,一定要有http或者https"state": "","href": "","lang": "zh",});},},created: function () {this.createCode()}})
</script></html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_801622.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

三、自定义网站(一) Previewing and applying a theme

Orchard提供了功能强大并且简单易用的主题系统。Orchard默认包含了一个主题。 Managing Themes 在控制面板中点击 Themes进入主题管理. 转载于:https://www.cnblogs.com/ibrady/archive/2012/03/20/2407433.html

head first python 支持网站(可下载所有的代码和示例)

http://examples.oreilly.com/0636920003434/ 转载于:https://www.cnblogs.com/apple2016/p/5298907.html

5个功能强大的工具网站,实用性超强,收藏起来吧!

1.音乐搜索器 一个汇集了许多音乐的网站。支持用户下载网易云&#xff0c;QQ 音乐&#xff0c;酷狗等各大主流网站的音乐&#xff0c;只需要输入歌名、音乐ID或者复制链接&#xff0c;就可以一键下载。 2.最美应用 一个推荐一些实用、创新应用的网站&#xff0c;各种类型都…

10个资源满满的网站,偷偷收藏起来吧!

大家一般找资源肯定会先想到百度搜索&#xff0c;可是有时候度娘资源也是有限的。想要的资源找不到怎么办&#xff1f;别担心&#xff0c;今天给大家分享10个资源超级丰富的网站&#xff0c;赶快来看看吧&#xff01; 1.有妖气 中国唯一且最大的纯原创漫画网站&#xff0c;数…

推荐6个鲜为人知的强力网站,每一个都让你大开眼界

1&#xff1a;全国电视直播 http://bddn.cn/zb.htm 全国电视直播是最近发现的一个非常良心的电视直播网站&#xff1b;它支持几百个电视直播的网站&#xff0c;包括&#xff1a;港澳台卫视&#xff1b;网站界面简洁&#xff0c;没有任何广告&#xff0c;并且播放速度和加载速…

10个免费高清图片网站,良心推荐,收藏就是学会了

我来分享一波无版权的高清素材库。 1、Pixabay 一个拥有160万个可在任何地方使用的免费无版权图片&#xff0c;有需要的小伙伴都可以下载。 2、Pexels 网站上提供大量的高清图片&#xff0c;上面的所有图片都可以免费商用。 3、Unsplash 这个网站上主打风景摄影图&#xff0…

交互设计必备的10个网站|每一个都是精挑细选,请低调使用

我来啦&#xff0c;给大家分享一些个人觉得比较好的设计网站&#xff1a; 为了帮助你快速的获得设计灵感&#xff0c;我准备了一份设计师必备素材库大礼包&#xff0c;包含多个APP设计、电商设计、HTML5、插画、logo设计、ICON等行业优秀作品案例&#xff0c;私信即可获取。 1…

给你5分钟白漂:这些都是我的常用在线工具网站

小伙伴们大家好&#xff0c;本期再托一次家底&#xff0c;和大家分享十几个自己日常工作学习过程中的常用在线工具和网站&#xff0c;希望能有帮助。 也欢迎小伙伴们分享和安利出你们觉得有用的工具&#xff0c;不要停啊。 在线绘图神器 很多小伙伴咨询说博客文章里的技术图怎…

linux平台驱动运行空间,构造和运行模块 - Linux设备驱动程序笔记_Linux编程_Linux公社-Linux系统门户网站...

&#xff1a;设置测试系统首先准备好一个内核源码树&#xff0c;构造一个新内核&#xff0c;然后安装到自己的系统中。&#xff1a;HelloWorld模块#include //定义了驱动的初始化和退出相关的函数#include //定义了内核模块相关的函数、变量及宏MODULE_LICENSE("Dual BSD/…

linux 基因组数据下载,phytozome植物基因组下载网站

Phytozome 作为专门收录植物基因组的网站&#xff0c;在基因组数据的下载、查询、可视化浏览等方面做的也很不错&#xff0c;也是一个不错的基因组数据下载数据库。今天主要介绍一下该网站基因组如何下载&#xff0c;如何通过blast查询同源基因&#xff0c;以及根据基因相关功能…

10个免费的python学习网站 赶紧收藏吧!!!

1.Learn Python The Hard Way(笨办法学python) https://learnpythonthehardway.org/ 这绝对是学习Python最简单的方法。你会被如此简单的基础学习感到震惊&#xff0c;真实地感受到自己的学习历程&#xff0c;一步一步地获取新的知识。它非常鼓励学习者去尝试并创造出自己的程…

学习Python必去的8个网站!

作为一个现时代的程序员初学者&#xff0c;除了看书之外&#xff0c;互联网的学习手段也是断不能少的&#xff01; 以下这些网站&#xff0c;虽说不上全方位的满足你的需求&#xff0c;但是大部分也都能&#xff01; 0.国外的大神GitHub &#xff1a; https://github.com/py…

图解大型互联网网站系统架构的演进过程

前言 一个成熟的大型网站&#xff08;如淘宝&#xff0c;京东等&#xff09;的系统架构并不是开始设计就具备完整的高性能&#xff0c;高可用&#xff0c;安全等特性&#xff0c;它总是随着用户量的增加&#xff0c;业务功能的扩展逐渐演变完善的&#xff0c;在这个过程中&…

不是 HTTPS 拖慢网站速度,而是优化做的不够优秀

HTTPS&#xff08;全称&#xff1a;Hyper Text Transfer Protocol over SecureSocket Layer&#xff09;&#xff0c;是以安全为目标的 HTTP 通道&#xff0c;简单讲是 HTTP 的安全版&#xff0c;即 HTTP 下加入 SSL 层。 HTTPS 的安全基础是 SSL&#xff0c;因此加密的详细内容…

深入理解大型网站架构的核心——了解性能

大型网站打造并不是件容易的事情&#xff0c;即使是从小开始慢慢迭代。从本期“问底”开始&#xff0c;我们将为大家带来李平的大型网站打造系列&#xff0c;从理论和实践两个方面进行讲解。 在前一篇随笔大型网站系统架构的演化中&#xff0c;介绍了大型网站的演化过程&#x…

亿级网站大数据量下的高并发同步讲解

对于我们开发的网站&#xff0c;如果网站的访问量非常大的话&#xff0c;那么我们就需要考虑相关的并发访问问题了。而并发问题是绝大部分的程序员头疼的问题&#xff0c; 但话又说回来了&#xff0c;既然逃避不掉&#xff0c;那我们就坦然面对吧~今天就让我们一起来研究一下常…

小程序实现分享图片_网站图片优化的小技巧分享

随着网站建设越来越多样化&#xff0c;网站的形式也逐渐随着用户的习惯在不断的变化&#xff0c;尤其是近来网站图文结合的形式给企业网站带来了更多的流量。但运用图文的方式也需要注重图片的优化才能更好的帮助网站赢取更多的推广效果&#xff0c;那么网站图片该如何进行优化…

linux定时备份网站发布目录,Linux 定时备份网站文件至七牛云存储 | 厘米天空

网站数据是站长的命根子&#xff0c;所以每日备份就很重要。如果你没有FTP空间&#xff0c;可以申请一个七牛云存储&#xff0c;免费10G空间备份一般的小站足够了。这里介绍一个备份网站文件和数据库到七牛的脚本&#xff0c;实测效果还不错&#xff0c;Linux vps下弄个定时任务…

html主题网站设计代码示例,网页设计参考:很不错的15个HTML网页表单设计实例

网页制作poluoluo文章简介&#xff1a;虽然HTML无法制作出十分酷的表单&#xff0c;不过也能制作出许多出色的表单页面&#xff0c;本文中的表单都是HTML形式&#xff0c;可以参考这些设计以及HTML页面&#xff0c;同时也能访问相关网站查看这些HTML的写法。通过PS我们可以设计…

HTML5期末大作业:体育运动网站设计—— 体育铅球(5页) HTML+CSS+JavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码

HTML5期末大作业&#xff1a;体育运动网站设计—— 体育铅球(5页) HTMLCSSJavaScript 学生DW网页设计作业成品 web课程设计网页规划与设计 计算机毕设网页设计源码 常见网页设计作业题材有 个人、 美食、 公司、 学校、 旅游、 电商、 宠物、 电器、 茶叶、 家居、 酒店、 舞蹈…