2020-02-12 钉钉扫码登陆

2020-02-12  本文已影响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>

上一篇下一篇

猜你喜欢

热点阅读