H5应用集成到钉钉，完成免登录

最新推荐文章于 2024-04-27 02:02:54 发布

jarry.liu

最新推荐文章于 2024-04-27 02:02:54 发布

阅读量1.9k

点赞数

分类专栏：知识储备文章标签：钉钉前端 html5

本文链接：https://blog.csdn.net/lsfhack/article/details/128400519

版权

知识储备专栏收录该内容

2 篇文章 0 订阅

订阅专栏

钉钉创建H5应用--->访问H5主页--->获取钉钉用户信息（唯一ID）--->绑定H5应用用户--->H5模拟登录

1.页面获取authcode，用于后台获取钉钉用户信息；

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head lang="zh">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta charset="utf-8" />
    <meta content="yes" name="apple-mobile-web-app-capable"/>
    <meta content="yes" name="apple-touch-fullscreen"/>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <title>钉钉授权CRM登录</title>
    <script src="https://g.alicdn.com/dingding/dingtalk-jsapi/3.0.12/dingtalk.open.js"></script>

    <script>
        var corpId = '[[${corpId}]]';//钉钉后台可查到
        console.log(corpId);
        dd.runtime.permission.requestAuthCode({

            corpId: corpId,
            onSuccess : function(res) {
                document.getElementById("authCode").value= res.code;
               document.form1.submit();
                console.log(res.code)
            },
            onFail : function(err) {
                console.log("fail"+res);
            }
        });
    </script>
    <style>

        .myButton{
            background: #3296fb;
            color: #fff;
            border:#3296fb;
            font-size:16px;
            border-radius:5px;
            line-height: 20px;
            letter-spacing:5px;
            padding:10px 5px;
        }

    </style>
</head>
<body>
<form action="checkUser" method="post" name="form1" id="form1" style="margin-top: 30px;text-align: center;">
    <div style="line-height:50px;vertical-align:middle;padding-top:20px;">
        <img src="../dingding.png" style="width:100px;"/>
        <img src="../sq.png" style="width:50px;"/>
        <img src="../cloudcc.png" style="width:100px;"/>
    </div>

    <input type="hidden" name="authCode" id="authCode" />
    <div style="width:100%;clor:#999;font-size:20px;line-height:50px;padding:10px 5px;">您正在操作钉钉授权登录CRM系统会获取您的钉钉用户信息</div>
    <div>
        <input type="submit" value="&nbsp;确定授权" class="myButton"/>
    </div>
</form>
</body>
</html>

2.根据authcode获取钉钉用户id

 public String getUserId(String code) throws Exception{

        // URL_GET_USER_INFO   https://oapi.dingtalk.com//user/getuserinfo
        log.info(urlConstant.URL_GET_USER_INFO+"?access_token="+accessToken);
        //此处crmapi工具类，只使用了其中的get方法。可以自己写
        String getUserId = crmapi.sendGetRequest(urlConstant.URL_GET_USER_INFO,
                "access_token="+accessToken+"&code="+code);
        log.info("使用缓存中的token，userJson:"+getUserId);
        JSONObject json  = JSONObject.fromObject(getUserId);

        if(json.getString("errcode").equals("40014")){
            log.info("===请求新token");
            getUserId = crmapi.sendGetRequest(urlConstant.URL_GET_USER_INFO,
                    "access_token="+this.getToken()+"&code="+code);
            json  = JSONObject.fromObject(getUserId);
        }
        String userId =  json.getString("userid");

        return userId;
    }

3.H5应用内部逻辑

a.用户信息绑定钉钉用户id；

b.模拟登录；

4.下次访问直接通过钉钉用户id在H5系统里查询用户信息，访问系统。

jarry.liu

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
打赏
1
评论
H5应用集成到钉钉，完成免登录

钉钉创建H5应用--->访问H5主页--->获取钉钉用户信息（唯一ID）--->绑定H5应用用户--->H5模拟登录。1.页面获取authcode，用于后台获取钉钉用户信息；2.根据authcode获取钉钉用户id。a.用户信息绑定钉钉用户id；3.H5应用内部逻辑。
复制链接

扫一扫