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

news2024/9/20 20:46:58

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);
        //先删除key
        redisUtil.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.coloradmin.cn/o/1970523.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

DLT相机标定算法

本教程介绍了直接线性变换 (DLT)&#xff0c;这是一种用于解决以下类型方程组的通用方法&#xff1a; 这种类型的方程经常出现在射影几何中。一个非常重要的例子是场景中的 3D 点与它们在相机图像平面上的投影之间的关系。这就是为什么我们要使用此设置来激发 DLT 的使用。 NSD…

二百五十二、OceanBase——Linux上安装OceanBase数据库(二):新用户配置ssh免密登录

一、目的 在OBD页面上部署OceanBase数据库时发现&#xff0c;需要把新用户也要配置ssh免密登录 二、前提 root用户已经设置免密登录 三、配置步骤 1 切换到新用户obadmin [roothurys23 ~]# su obadmin 2 执行命令生成秘钥文件 [obadminhurys23 oceanbase]$ ssh-keygen …

动态规划:基础篇

目录 1. 斐波那契数(LeetCode509) 解法1&#xff1a;动态规划(基础版) 解法2&#xff1a;动态规划(优化版) 2. 爬楼梯(方案个数)(斐波那契数列扩展)(LeetCode70) 解法1&#xff1a;动态规划(基础版) 解法2&#xff1a;动态规划(优化版) 3. 爬楼梯(最小花费)(LeetCode746…

品牌进行网络控价的原因和方法

品牌的控价管理是一项关乎其生存与发展的关键举措。在当今竞争激烈的市场环境中&#xff0c;价格的稳定与合理不仅影响着品牌的形象和声誉&#xff0c;更是直接关系到品牌的市场份额和盈利能力。 那些不重视控价管理的品牌&#xff0c;往往会陷入一片混乱。参差不齐的价格使得消…

Delphi5实现文件拷贝程序

效果图 opendialog、savedialog组件 对于类似TOpenDialog和TSaveDialog的功能&#xff0c;在Delphi 5中&#xff0c;你可能需要这样做&#xff1a; 查找或创建&#xff1a;首先&#xff0c;在Delphi 5的组件面板中查找是否有现成的文件对话框组件&#xff08;拖拉组件下来到f…

【通俗理解】概率图模型——从概率到图形的直观映射

【通俗理解】概率图模型——从概率到图形的直观映射 概率与图形的类比 你可以把概率看作是一个“烹饪配方”&#xff0c;它告诉我们每个成分&#xff08;事件&#xff09;出现的可能性。而图形则是一个“食谱的图表”&#xff0c;它直观地展示了这些成分之间的关系和依赖。 概率…

深入探索:GPT系列模型揭秘

Transformer发展 之 GPT系列模型结构 我按照Transformer的发展路线来学习入门 Transformer–BERT—GPT—DETR—ViT—Swin ViT / DeiT 上一篇写了Transformer&#xff0c;听了李宏毅和李沐老师的课一下子就懂了&#xff0c;今天学习GPT-123 核心思想&#xff1a; GPT和BERT的…

服务器数据恢复—SAN环境下LUN被重复映射导致写操作不互斥的数据恢复案例

服务器存储数据恢复环境&#xff1a; 一台存储中有一组由6块硬盘组成的RAID6&#xff0c;划分为若干LUN&#xff0c;MAP到不同业务的SOLARIS操作系统服务器上。 服务器存储故障&#xff1a; 由于业务变化需要增加一台服务器&#xff0c;在存储在线的状态下将该存储中的某个LUN映…

打造沉浸式展厅空间,哪些高科技手段必不可少?

在人生的旅途中&#xff0c;我们或许会踏遍千山万水&#xff0c;将大地的壮丽景色尽收眼底。然而&#xff0c;总有一些地方&#xff0c;如同深邃的海底两万里&#xff0c;或是浩瀚无垠的宇宙银河&#xff0c;遥不可及&#xff0c;这时我们便可以在展厅的沉浸式空间中&#xff0…

Postman请求问题 connect ECONNREFUSED 127.0.0.1:80解决方法

问题描述&#xff1a; 解决方法&#xff1a; &#xff08;1&#xff09;点击file-settings &#xff08;2&#xff09;点击Proxy&#xff0c;并将右边的Use the system proxy 取消选中 &#xff08;3&#xff09;勾选use custom proxy configuration 这个8080是默认的&#xf…

MySQL学习(17):SQL编程:存储过程

1.什么是存储过程 存储过程是事先经过编译并存储在数据库中的一段 SQL语句的集合。 存储过程的特点&#xff1a; &#xff08;1&#xff09;封装&#xff0c;复用 &#xff08;2&#xff09;可以接收参数&#xff0c;可以返回数据 2.存储过程语法 2.1创建 create procedu…

查看Keepalived 的 VIP 有效、高可用、单播和组播

VIP&#xff08;虚拟 IP&#xff09; VRRP&#xff08;Virtual Router Redundancy Protocol&#xff09; 验证 VIP 是否有效 1、没有部署之前&#xff0c;PING要设置的VIP地址&#xff0c;不通 ping 10.119.108.602、部署之后&#xff0c;所有节点进行PING要设置的VIP地址&a…

代码实现yolov3主干网络,可以直接运行

1. 主干网head版本1 import torch from torch import nn import torch.nn.functional as F class ConvBnLeakRelu(nn.Module):def __init__(self,in_ch,out_ch,k3,s1):super().__init__()self.layernn.Sequential(nn.Conv2d(in_ch, out_ch, kernel_sizek, paddingk // 2,stride…

H264记录和翻译

官方中文文档&#xff1a; &#x1f4ce;H.264_ITU官方中文版.pdf 官方下载地址&#xff1a; https://www.itu.int/rec/T-REC-H.264/en JM源码&#xff1a; https://iphome.hhi.de/suehring/tml/download/ 博客参考学习&#xff1a;H.264官方软件JM源代码简单分析-解码器ld…

真免费!10 款必备的语言类 AI 大模型

好多小伙伴反映&#xff0c;买了好多AI工具&#xff0c;但并不好用&#xff0c;今天我给你推荐10个好用且免费的语言类AI大模型。 以后就别去花冤枉钱了。 排名不分先后。 各有所长&#xff0c;大家收藏自行去测试甄选适合自己的AI工具。 — 1 — 文心一言 文心一言是百度…

Android12 显示框架之getSurface

目录&#xff1a;Android显示终极宝典 在上篇文章中&#xff0c;我们讲到了应用通过createSurface()在surfaceflinger内生成了一个Layer&#xff0c;并且获取到了该Layer的Handle且将其和其他信息保存到了SurfaceControl。应用拿到了这个SurfaceControl&#xff0c;那么接下来…

uniapp APP端使用web-view,跳转回APP指定页面

URL Scheme 首先我一开始想到的是UrlSchemes&#xff0c;发现UrlSchemes不好实现就转为下面的方法 URL Scheme 是一种用于在移动应用程序中打开另一个应用程序或执行特定操作的机制。通过使用 URL Scheme&#xff0c;应用程序可以将用户重定向到其他应用程序或执行特定的任务…

大模型在自动驾驶领域是怎么应用的?最新综述一览

写在前面 大语言模型&#xff08;LLMs&#xff09;是在海量文本语料库上训练的人工智能模型&#xff0c;具备卓越的语言理解和生成能力&#xff0c;正在改变自动驾驶&#xff08;AD&#xff09;领域。随着自动驾驶系统从基于规则和优化的方法向基于学习的技术&#xff08;如深…

关于企微群聊天工具功能的开发---PHP+JS+CSS+layui (手把手教学)

文章目录 前言准备工作PHP代码示例前端代码示例 主要是js踩的小坑&笔记最终达成的效果总结 前言 公司要求开发企微群聊天工具。首先一个客户一个群&#xff0c;其余群成员都是公司销售、设计师、工长、售后等人员。要求开发一个群聊天工具&#xff0c;工长点击进来以后就可…

selenium自动化代码报错“NoSuchElementException”——解决方案详解

假设自动化代码报错“NoSuchElementException”&#xff1a; 第一步&#xff1a;在报错的代码前&#xff0c;添加Thread.sleep(秒)&#xff0c;设置的时间长一点。 第二步&#xff1a; 执行自动化&#xff0c;在自动化打开的页面里&#xff0c;打开前端开发者工具&#xff0c…