欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

钉钉扫码登录网站(两种方式实现)

程序员文章站 2023-11-08 14:04:40
钉钉扫码登录网站(两种方式实现) 效果: 源代码地址:https://github.com/jellydong/DingQrCodeLogin 动手敲代码! 第一步,钉钉后台配置 参考链接: "获取appId及appSecret" . 点击进入钉钉开发者平台 的页面,点击左侧菜单的【移动接入应用 登 ......

钉钉扫码登录网站(两种方式实现)

效果:

钉钉扫码登录网站(两种方式实现)

源代码地址:https://github.com/jellydong/dingqrcodelogin

动手敲代码!

第一步,钉钉后台配置

参考链接:获取appid及appsecret.

点击进入钉钉开发者平台 的页面,点击左侧菜单的【移动接入应用-登录】,然后点击右上角的【创建扫码登录应用授权】,创建用于免登过程中验证身份的appid及appsecret,创建后即可看到appid和appsecret。

这里因为我是本地开发,所以回调地址直接写:http://localhost:5000/home/dinglogin
注意哦,回调地址后面是有使用的~

钉钉扫码登录网站(两种方式实现)

第二部 我们创建一个 asp.net core web项目
修改appsettings.json

修改appsettings.json,增加钉钉的配置信息:

  "dingding": {
     "qrappid": "qrappid", //你的钉钉扫码登录appid
    "qrappsecret": "qrappsecret" //你的钉钉扫码登录appsecret
  }
创建完成修改home控制器的index页面其实就是钉钉官网文档的代码啦~
@{
    viewdata["title"] = "home page";
}

<div class="text-center">
    <h1 class="display-4">welcome</h1>
    <div id="login_container"></div>
    <button type="button" class="btn btn-primary" id="jumptologin">跳转登录</button>
</div>


@section scripts
{
    <script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddlogin.js"></script>
    <script type="text/javascript">
        /*
        * 解释一下goto参数,参考以下例子:
        * var url = encodeuricomponent('http://localhost.me/index.php?test=1&aa=2');
        * var goto = encodeuricomponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=appid&response_type=code&scope=snsapi_login&state=state&redirect_uri='+url)
        */
        var url = "http://localhost:5000/home/dinglogin";
        var obj = ddlogin({
            id: "login_container",//这里需要你在自己的页面定义一个html标签并设置id,例如<div id="login_container"></div>或<span id="login_container"></span>
            goto: encodeuricomponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=appid&response_type=code&scope=snsapi_login&state=state&redirect_uri=' + url), //请参考注释里的方式
            style: "border:none;background-color:#ffffff;",
            width: "365",
            height: "400"
        });

        var handlemessage = function (event) {
            var origin = event.origin;
            console.log("origin", event.origin);
            if (origin == "https://login.dingtalk.com") { //判断是否来自ddlogin扫码事件。
                var logintmpcode = event.data; //拿到logintmpcode后就可以在这里构造跳转链接进行跳转了
                console.log("logintmpcode", logintmpcode);

                window.location.href =
                    "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=appid&response_type=code&scope=snsapi_login&state=state&redirect_uri=redirect_uri&logintmpcode=" +
                    logintmpcode;
            }
        };
        if (typeof window.addeventlistener != 'undefined') {
            window.addeventlistener('message', handlemessage, false);
        } else if (typeof window.attachevent != 'undefined') {
            window.attachevent('onmessage', handlemessage);
        }

        $("#jumptologin").click(function(){
            window.location.href =
                "https://oapi.dingtalk.com/connect/qrconnect?appid=appid&response_type=code&scope=snsapi_login&state=loginding&redirect_uri=http://localhost:5000/home/dinglogin";
        });
    </script>
}

官网介绍了两种方式,demo把两种方式都放到一个页面了。登录页面效果:
钉钉扫码登录网站(两种方式实现)

第三步 回调方法:

第一步的时候我们说回调地址是需要使用的,那么首先我们要有这个地址啊。
因为是demo,就直接写在homecontroller中了

 public string dinglogin(string code, string state)
        {
            //state 是前端传入的,钉钉并不会修改,比如有多种登录方式的时候,一个登录方法判断登录方式可以进行不同的处理。

            oapisnsgetuserinfobycoderesponse response = new oapisnsgetuserinfobycoderesponse();
            try
            {
                string qrappid= appconfigurtaionhelper.configuration["dingding:qrappid"];
                string qrappsecret = appconfigurtaionhelper.configuration["dingding:qrappsecret"];
                if (string.isnullorwhitespace(qrappid)||string.isnullorwhitespace(qrappsecret))
                {
                    throw new exception("请先配置钉钉扫码登录信息!");
                }

                defaultdingtalkclient client = new defaultdingtalkclient("https://oapi.dingtalk.com/sns/getuserinfo_bycode");
                oapisnsgetuserinfobycoderequest req = new oapisnsgetuserinfobycoderequest();
                req.tmpauthcode = code;
                response = client.execute(req, qrappid, qrappsecret); 

                //获取到response后就可以进行自己的登录业务处理了

                //xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
                //此处省略一万行代码


            }
            catch (exception e)
            {
                response.errmsg = e.message;
            }

            return response.body;
        }
登录结果

完成上述步骤后,我们就可以运行项目测试了,钉钉会给我们返回用户的nickopenidunionid,那么,我们可以用这些信息,为所欲为了?
钉钉扫码登录网站(两种方式实现)

总结

之前过于钉钉扫码,总觉得是很高大上的东西(原谅我是个菜鸡),也没有去尝试。
今天看完文档后,用在项目上,然后写了这个demo,因为我github没找到合适的,可能是大家觉得简单都不用写了。

1024 节日快乐!