"dingtalk QR login" frontend

controllers/AccountController.go

@@ -37,6 +37,7 @@ func (c *AccountController) Prepare() {
 	c.Data["xsrfdata"] = template.HTML(c.XSRFFormHTML())
 	c.Data["corpID"] = beego.AppConfig.String("dingtalk_corpid")
 	c.Data["ENABLE_QR_DINGTALK"] = (beego.AppConfig.String("dingtalk_corpid") != "")
+	c.Data["dingtalk_qr_key"] = beego.AppConfig.String("dingtalk_qr_key")
 
 	if !c.EnableXSRF {
 		return

static/js/dingtalk-ddlogin.js

@@ -0,0 +1,18 @@
+!function (window, document) {
+    function d(a) {
+        var e, c = document.createElement("iframe"),
+            d = "https://login.dingtalk.com/login/qrcode.htm?goto=" + a.goto ;
+        d += a.style ? "&style=" + encodeURIComponent(a.style) : "",
+            d += a.href ? "&href=" + a.href : "",
+            c.src = d,
+            c.frameBorder = "0",
+            c.allowTransparency = "true",
+            c.scrolling = "no",
+            c.width =  a.width ? a.width + 'px' : "365px",
+            c.height = a.height ? a.height + 'px' : "400px",
+            e = document.getElementById(a.id),
+            e.innerHTML = "",
+            e.appendChild(c)
+    }
+    window.DDLogin = d
+}(window, document);

views/account/login.tpl

@@ -72,7 +72,7 @@
                 </div>
                 {{if .ENABLE_QR_DINGTALK}}
                 <div class="form-group">
-                    <a href='https://oapi.dingtalk.com/connect/qrconnect?appid=dingoa0wp8qg6gyqtlyno1&response_type=code&scope=snsapi_login&state=1&redirect_uri={{ urlfor "AccountController.QRLogin" ":app" "dingtalk"}}' id="btn-dingtalk-qr" class="btn btn-default" style="width: 100%"  data-loading-text="" autocomplete="off">钉钉扫码登录</a>
+                    <a id="btn-dingtalk-qr" class="btn btn-default" style="width: 100%" data-loading-text="" autocomplete="off">钉钉扫码登录</a>
                 </div>
                 {{end}}
                 {{if .ENABLED_REGISTER}}
@@ -83,6 +83,10 @@
                 {{end}}
                 {{end}}
             </form>
+            <div class="form-group dingtalk-container" style="display: none;">
+                <div id="dingtalk-qr-container"></div>
+                <a class="btn btn-default btn-dingtalk" style="width: 100%" data-loading-text="" autocomplete="off">返回账号密码登录</a>
+            </div>
         </div>
     </div>
     <div class="clearfix"></div>
@@ -92,6 +96,8 @@
 <script src="{{cdnjs "/static/bootstrap/js/bootstrap.min.js"}}" type="text/javascript"></script>
 <script src="{{cdnjs "/static/layer/layer.js"}}" type="text/javascript"></script>
 <script src="{{cdnjs "/static/js/dingtalk-jsapi.js"}}" type="text/javascript"></script>
+<script src="{{cdnjs "/static/js/dingtalk-ddlogin.js"}}" type="text/javascript"></script>
+
 <script type="text/javascript">
     $(function () {
         if (dd.env.platform !== "notInDingTalk"){
@@ -132,6 +138,34 @@
     })
 
 </script>
+
+<script type="text/javascript">
+    var url = 'https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid={{.dingtalk_qr_key}}&response_type=code&scope=snsapi_login&state=1&redirect_uri={{ urlfor "AccountController.QRLogin" ":app" "dingtalk"}}'
+    var obj = DDLogin({
+        id:"dingtalk-qr-container",
+        goto: encodeURIComponent(url), 
+        style: "border:none;background-color:#FFFFFF;",
+        width : "338",
+        height: "300"
+    });
+    var handleMessage = function (event) {
+        var origin = event.origin;
+        if( origin == "https://login.dingtalk.com" ) { //判断是否来自ddLogin扫码事件。
+            layer.load(1, { shade: [0.1, '#fff'] })
+            var loginTmpCode = event.data; 
+            //获取到loginTmpCode后就可以在这里构造跳转链接进行跳转了
+            console.log("loginTmpCode", loginTmpCode);
+            url = url + "&loginTmpCode=" + loginTmpCode
+            window.location = url
+        }
+    };
+    if (typeof window.addEventListener != 'undefined') {
+        window.addEventListener('message', handleMessage, false);
+    } else if (typeof window.attachEvent != 'undefined') {
+        window.attachEvent('onmessage', handleMessage);
+    }
+</script>
+
 <script type="text/javascript">
     $(function () {
         $("#account,#password,#code").on('focus', function () {
@@ -145,6 +179,16 @@
             }
         });
 
+        $("#btn-dingtalk-qr").on('click', function(){
+            $('form').hide()
+            $(".dingtalk-container").show()
+        })
+
+        $(".btn-dingtalk").on('click', function(){
+            $('form').show()
+            $(".dingtalk-container").hide()
+        })
+
         $("#btn-login").on('click', function () {
             $(this).tooltip('destroy').parents('.form-group').removeClass('has-error');
             var $btn = $(this).button('loading');