VUE 实现钉钉扫码登录

1.引入钉钉SDK

在public文件夹下的index.html中引入钉钉SDK

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

2.初始钉钉登录生成二维码

let url = encodeURIComponent(
                    `${UPLOAD_BASE_URL}/dist/index.html#/login`
);
//这里的url为重定向域名，就是扫码登录后钉钉会带着登录需要的code 跳转到这个地址。

let appid = 'xxxxxxxxxxx'; //你钉钉的appid。

 let goto = encodeURIComponent(`https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url});
//在这里将之前的重定向URL跟APPID拼接到地址栏中。

 this.$nextTick(() => {
                    let obj = DDLogin({
                    id: "login_container", //这里需要你在自己的页面定义一个HTML标签并设置id，例如<div id="login_container"></div>或<span id="login_container"></span>
                    goto: goto, //请参考注释里的方式
                    style: "border:none;background-color:#FFFFFF;",
                    width: "100%", //官方参数 生成的iframe的宽度
                    height: "300" //官方参数  生成的iframe的高度
                    });
});
//最后生成钉钉登录的二维码会以iframe的形式嵌入到容器#login_container中。

这时候二维码就生成成功了。

3.获取code发起登录 

扫码确认登录后，钉钉会带着code重定向到我们之前指定的地址。

 mounted() {
           
            const {
                code
            } = this.$route.query;
          
            if (code) {
                this.QRLogin(code); //拿到code 向后端发起登录
            }
}