钉钉扫码登录的实现

这是我参与更文挑战的第3天，活动详情查看： 更文挑战

这里我们使用Django来集成一下钉钉的企业自建应用，首先注册钉钉开发平台：open-dev.dingtalk.com/

首先创建一个H5微应用

填写好基础信息并在登录与分享中添加回调域名（注：不填写在扫描二维码的时候会显示错误信息）

django 模拟登录

class CurUserGenericAPIView(CustomGenericAPIView):
    queryset = get_user_model().objects.all()
    serializer_class = UserInfoSerializer

    def get(self, request, *args, **kwargs):
        user = request.user
        ser = UserInfoSerializer(instance=user)
        client = AuthUserListClient()

        if ser:
            res = ser.data
            res['logo_url'] = client.icon(portal=res['portal'])
            return Response(res)
        else:
            return TemplateResponse(request, 'dingtalkQrcode.html', {"title": "欢迎使用钉钉扫码登录", "appid": ""})

dingtalkQrcode.html

<p align="value" style="text-align:center">{{ title }}</p>
<div id="login_container" style="text-align:center"></div>

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

<script>
    var url = encodeURIComponent('/pc/v1/api/users/login/');
    var goto = encodeURIComponent('https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid={appid}&response_type=code&scope=snsapi_login&state=NvSxTQh&redirect_uri=' + window.location.protocol + "//" + window.location.host + url)

    var 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: "300",
        height: "400"
    });

    var hanndleMessage = 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);
            var url2 = "https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid={appid}&response_type=code&scope=snsapi_login&state=NvSxTQh&redirect_uri=" + window.location.protocol + "//" + window.location.host + url + "&loginTmpCode=" + loginTmpCode;
            console.log("url2", url2)
            window.location.href = url2;
        }
    };

    if (typeof window.addEventListener != 'undefined') {
        window.addEventListener('message', hanndleMessage, false);
    } else if (typeof window.attachEvent != 'undefined') {
        window.attachEvent('onmessage', hanndleMessage);
    }

</script>