当前位置：首页 > news >正文

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

news 来源：原创 2024/9/21 17:11:40

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=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=' + 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=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='+ 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;
}