美文网首页
2020-02-12 钉钉扫码登陆

2020-02-12 钉钉扫码登陆

作者: 炸鸡星球 | 来源:发表于2020-02-12 13:47 被阅读0次

    <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>

    <script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.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 appid = 'appid';

            var url =encodeURIComponent('后端地址');

            // 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="+url+"&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="+url;

            });

    </script>

    相关文章

      网友评论

          本文标题:2020-02-12 钉钉扫码登陆

          本文链接:https://www.haomeiwen.com/subject/tzsumctx.html