spring boot + vue3 接入钉钉实现扫码登录

1:准备工作

        1.1:进入钉钉开放平台创建开发者应用。应用创建和类型介绍,参考下方。

应用类型介绍 - 钉钉开放平台 (dingtalk.com)

应用能力介绍 - 钉钉开放平台 (dingtalk.com)

扫码登录第三方网站 - 钉钉开放平台 (dingtalk.com)

        1.2:创建好的应用,给对应权限。

      我开通了个人权限和通讯录管理所有权限,建议是全部员工,因为这个权限只能api的权限,不会影响钉钉的权限

   

2:扫码登录具体实现和效果

2.1 前端和后端代码展示(前端不是很会)

工作流程介绍

用户扫码-->授权之后重定向给钉钉处理返回一个code--->钉钉处理之后执行回调域名并且携带code-->调用getBycodeResponse接口返回unionid --> 然后调用scanCodeLogin 登录接口---->成功之后进入首页。

先在 index.html 内引入一段脚本:
<script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
再编写如下代码:
const redirect_uri = 'http://192.168.0.137:3000/#/ddlogin';
onMounted(()=>{
const url = encodeURIComponent(redirect_uri);
const goto = encodeURIComponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=%E4%BD%A0%E7%9A%84APP_ID&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=icon-default.png?t=N7T8https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=%E4%BD%A0%E7%9A%84APP_ID&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=' + url);
const obj = window.DDLogin({
id:"ddLogin",
goto,
style: "border: none",
width : "350",
height: "350"
});
});
const handleMessage = function (event: any) {
const origin = event.origin;
if( origin == "https://login.dingtalk.com" ) { //判断是否来自ddLogin扫码事件。
// 下面这个连接会在钉钉那边处理完毕之后直接让浏览器的URL变成 redirect_uri
location.href = 'https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=%E4%BD%A0%E7%9A%84APP_ID&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=icon-default.png?t=N7T8https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=%E4%BD%A0%E7%9A%84APP_ID&response_type=code&scope=snsapi_login&state=STATE&redirect_uri='+ encodeURIComponent(redirect_uri) + '&loginTmpCode=' + event.data;
}
};收起链接预览无权限https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingtalk.com无权限https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=dingtalk.com

@ApiOperation(value = "根据sns临时授权码获取用户信息", notes = "根据sns临时授权码获取用户信息")
@RequestMapping(value = "/getBycodeResponse", method = RequestMethod.GET)
public OapiSnsGetuserinfoBycodeResponse getBycodeResponse(@RequestParam(value = "authCode")String authCode) throws JsonProcessingException, ApiException {OapiSnsGetuserinfoBycodeResponse bycodeResponse = sampleUtlis.getBycodeResponse(authCode, AppKey, appSecret);return  bycodeResponse;}

/*** 退出登录* @return*/
@ApiOperation(value = "扫码登录验证", notes = "扫码登录验证")
@GetMapping(value = "/scanCodeLogin")
public Result<Object> scanCodeLogin(@RequestParam("unionid") String unionid, HttpServletResponse response) {Result<Object>  result=new Result<>();try {ZuodouUser zuodouUser = zuodouUserMapper.selectOne(new LambdaQueryWrapper<ZuodouUser>().eq(StringUtils.isNotBlank(unionid), ZuodouUser::getUnionid, unionid));if (null==zuodouUser){result.error500("查无此人");return result;}String username = zuodouUser.getUsername();//判断用户是否存在ZuodouUser  bannerItem=zuodouUserMapper.selectOne(new LambdaQueryWrapper<ZuodouUser>().eq(ZuodouUser::getUsername,username));result =iZuodouUserService.verifyaccount(bannerItem);if(!result.isSuccess()) {return result;}UserModel userModel=new UserModel();BeanUtils.copyProperties(bannerItem,userModel);List<ZuodouUserRole> zuodouUserRoles = zuodouUserRoleService.list(new LambdaQueryWrapper<ZuodouUserRole>().eq(ZuodouUserRole::getUserId, bannerItem.getId()).eq(ZuodouUserRole::getStatus, StatusEum.getNameValue(CommonConstant.STATUSNAME_A)));if (!CollectionUtils.isEmpty(zuodouUserRoles)){userModel.setRole(zuodouUserRoles.stream().map(s->s.getRoleId()).collect(Collectors.toList()));List<String> zuodouRolePermissions = zuodouRolePermissionMapper.listPermission(userModel.getRole());if (!CollectionUtils.isEmpty(zuodouRolePermissions)){userModel.setPermission(zuodouRolePermissions);}}zuodouUser.setLastLogin(new Date());zuodouUserMapper.updateById(zuodouUser);String jwtToken = JwtUtils.getJwtToken(userModel);Cookie cookie = new Cookie(userTokenUtils.getTokenCode(), jwtToken);cookie.setPath("/");cookie.setMaxAge(Math.toIntExact(CommonConstant.TOKEN_EXPIRE));response.addCookie(cookie);//先删除keyredisUtil.del(userTokenUtils.getTokenCode()+bannerItem.getId());redisUtil.set(userTokenUtils.getTokenCode() + bannerItem.getId(), jwtToken,CommonConstant.REDIS_EXPIRE*2);log.info(userTokenUtils.getTokenCode() + bannerItem.getId());Map<String,Object> map=new HashMap<>();map.put(CommonConstant.TOKEN_MODEL,bannerItem);map.put(userTokenUtils.getTokenCode(),jwtToken);result.setResult(map);result.success("登录成功");} catch (Exception e) {e.printStackTrace();result.error500("操作失败");}return result;
}

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

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

相关文章

KaiwuDB 产品总监李月飞:让中国物联网用上放心的数据库产品

​2024年7月17日&#xff0c;KaiwuDB 产品总监李月飞受邀于 2024 可信数据库发展大会“能源与政务数据库应用创新”分论坛发表演讲。以下是李月飞主题演讲《深耕数据良田&#xff0c;KaiwuDB 洞见能源产业数字新生力》精华实录。 数据&#xff0c;给能源变革带来新的可能 众所…

TypeScript 简介

文档 typeScript官网中文文档&#xff1a;https://www.tslang.cn/index.html中文文档(简洁点)&#xff1a;https://typescript.bootcss.comMDN 前言 JavaScript 引入编程社区已有 20 多年&#xff0c;如今已成为有史以来使用最广泛的跨平台语言之一。JavaScript 最初是一种用…

SSL VPN详细概述

为什么会出现SSL VPN呢&#xff1f;在这之前不是有IPSEC VPN吗&#xff1f; 通过这两个问题我们可以发现多半是IPSEC VPN在某些方面肯定有所欠缺&#xff0c;所以后面在出现了SSL VPN。 之前说过根据组网方式划分&#xff0c;可以分为 client to LAN 和 LAN to LAN 两种 而…

CTF学习笔记汇总(非常详细)零基础入门到精通,收藏这一篇就够了

CTF学习笔记汇总 Part.01 Web 01 SSRF 主要攻击方式如下&#xff1a; 01 对外网、服务器所在内网、本地进行端口扫描&#xff0c;获取一些服务的banner信息。 02 攻击运行在内网或本地的应用程序。 03 对内网Web应用进行指纹识别&#xff0c;识别企业内部的资产信息。 …

深入分析 Android ContentProvider (十二)

文章目录 深入分析 Android ContentProvider (十二)Android 中 ContentProvider 的系统代码分析&#xff08;续&#xff09;1. ContentProvider 的内部实现机制1.1. ContentProvider 的创建与生命周期管理1.2. ContentProvider 的数据访问与处理1.3. ContentProvider 的权限管理…

Go语言---sync.WaitGroup

在Go语言中&#xff0c;给我们提供了用于线程同步的sync.WaitGroup&#xff0c;简单来讲&#xff0c;WaitGroup就是指等待一组&#xff0c;等待一个系列执行完成后才会继续向下执行。 WaitGroup数据结构 type WaitGroup struct {noCopy noCopystate atomic.Uint64 // 高 32 b…

无人驾驶的未来:AI如何重塑我们的出行世界

无人驾驶汽车&#xff0c;作为人工智能&#xff08;AI&#xff09;技术的集大成者&#xff0c;正以前所未有的速度改变着我们的出行方式。从机器学习到计算机视觉&#xff0c;再到人工智能生成内容&#xff08;AIGC&#xff09;&#xff0c;AI技术的每一次进步都在为无人驾驶汽…

华为手机连接电脑后电脑无反应、检测不到设备的解决方法

本文介绍华为手机与任意品牌电脑连接时&#xff0c;出现连接后电脑无反应、检测不到手机连接情况的解决方法。 最近&#xff0c;因为手机的存储空间愈发紧缺&#xff0c;所以希望在非华为电脑中&#xff0c;将华为手机内的照片、视频等大文件备份、整理一下。因此&#xff0c;需…

公司里的IT是什么?

公司里的IT是什么&#xff1f; 文章目录 公司里的IT是什么&#xff1f;1、公司里的IT2、IT技术3、IT行业4、IT行业常见证书 如果对你有帮助&#xff0c;就点赞收藏把&#xff01;(&#xff61;&#xff65;ω&#xff65;&#xff61;)&#xff89;♡ 前段时间&#xff0c;在公…

《Windows API每日一练》24.1 WinSock简介

本节将逐一介绍WinSock的主要特性和组件&#xff0c;套接字、WinSock动态库的使用。 本节必须掌握的知识点&#xff1a; Windows Socket接口简介 Windows Socket接口的使用 第178练&#xff1a;网络时间校验 24.1.1 Windows Socket接口简介 ■以下是WinSock的主要特性和组件…

实时转换,轻松编辑:2024年高效语音转文字解决方案

现在生活节奏越来越快了&#xff0c;很多时候一场会议内容的信息量就会呈几何式增长。用笔来记录肯定来不及&#xff0c;那还有一个方法就是录音或者录像。录制完成后我们可以使用语音转文字来快速获取会议内容是不是就方便了很多。 1.365在线转文字 链接传送&#xff1a;ww…

华为云依赖引入错误

问题&#xff1a;记录一次项目加载华为云依赖错误&#xff0c;如下&#xff1a; 错误信息&#xff1a;Could not find artifact com.huawei.storage:esdk-obs-java:pom:3.1.2.1 in bintray-qcloud-maven-repo (https://dl.bintray.com/qcloud/maven-repo/) 找到本地仓库&#…

【practise】string_atoi

今天来分享一道比较平常的练习题&#xff0c;说实话我自己写了半天&#xff0c;自己写的很烂最后还是看的答案… 1.题目概要 题目链接&#xff1a;LINK 2.题目难点 这个题目有两个难点&#xff0c;如下&#xff1a; 拿到了全部都是数字字符的字符串&#xff0c;怎么将这个…

从技术角度解读【与辉同行】文案(一)

视频文字内容 标题&#xff1a;走晋.山西 内容&#xff1a;将一段岁月熔成佳酿&#xff0c;三晋儿女荡气回肠。捧一把黄土架起火柴&#xff0c;华夏大地照亮火光。五千年黄土风云&#xff0c;历代千秋根固魂盈。三万顷汾河烟雨&#xff0c;唐风宋韵人杰地灵。当先辈手持石器抛挖…

秘密打造「AI陶哲轩」 震惊数学圈!谷歌IMO梦之队首曝光,菲尔兹奖得主深度点评

谷歌DeepMind正在做的&#xff0c;是要打造出世界上最强的AI数学家。 Perplexity AI的CEO对此做出了大胆预测——DeepMind继续研究下去的话&#xff0c;应该可以搞出一个「AI陶哲轩」了&#xff01; 这个预测可谓相当大胆。 要知道&#xff0c;陶哲轩在IMO竞赛圈&#xff0c;乃…

ADI - 通过5 V至24 V输入提供双极性、双向DC-DC流入和流出电流

大部分电子系统都依赖于正电压轨或负电压轨&#xff0c;但是有些应用要求单电压轨同时为正负电压轨。在这种情况下&#xff0c;正电源或负电源由同一端子提供&#xff0c;也就是说&#xff0c;电源的输出电压可以在整个电压范围内调节&#xff0c;并且可以平稳转换极性。例如&a…

【CORS 报错】跨域请求问题:CORS 多种环境下的解决方案

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、CORS错误的常见原因二、解决方案1. Vue3 Vite项目下的解决方案创建Vue3 Vite项目配置Vite的代理发送请求 2. jQuery项目下的解决方案使用CORS请求头使用JSONP 3. 其他环境下的解决方案使用服务器端代理设置CORS头使用…

“再来一单“业务功能开发

文章目录 概要整体架构流程技术细节小结 概要 再来一单”功能常见于餐饮、零售、外卖等行业&#xff0c;主要目的是为了简化用户的重复购买流程&#xff0c;提高用户体验和效率。 需求分析以及接口设计 再来一单就是将原订单中的商品重新加入到购物车中,所以本质上是"增…

java之WIFI信号模块

开发步骤分为以下几点&#xff1a; 1.在 AndroidManifest 中声明相关权限&#xff08;网络和文件读写权限&#xff09; 声明权限: <uses-permission android:name"android.permission.ACCESS_WIFI_STATE" /> <uses-permission android:name"android.…

matlab y=sin(x) - 2/π*(x)函数绘制

[TOC](matlab ysin(x) - 2/π*(x)函数绘制) ysin(x) - 2/π*(x) clc; clear; close all; x_axis_length 10; y_axis_length 10; % 创建 x 值向量 x_positive linspace(0.1, 10, 1000); % 正半轴上的 x 值 x_negative linspace(-10, -0.1, 1000); % 负半轴上的 x 值% 计算…