spring boot + vue3 接入钉钉实现扫码登录
应用类型介绍 - 钉钉开放平台 (dingtalk.com)应用能力介绍 - 钉钉开放平台 (dingtalk.com)扫码登录第三方网站 - 钉钉开放平台 (dingtalk.com)
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); //先删除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; }
更多推荐
所有评论(0)