From 5404db07eb6096c8b237b9c9b5f6abdfc499e135 Mon Sep 17 00:00:00 2001
From: LawyZHENG <lawyzheng1106@gmail.com>
Date: Thu, 25 Mar 2021 16:30:12 +0800
Subject: [PATCH] "dingtalk QR login" frontend

---
 controllers/AccountController.go |  1 +
 static/js/dingtalk-ddlogin.js    | 18 +++++++++++++
 views/account/login.tpl          | 46 +++++++++++++++++++++++++++++++-
 3 files changed, 64 insertions(+), 1 deletion(-)
 create mode 100644 static/js/dingtalk-ddlogin.js

diff --git a/controllers/AccountController.go b/controllers/AccountController.go
index 2d3e34b1..f7e1f08b 100644
--- a/controllers/AccountController.go
+++ b/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
diff --git a/static/js/dingtalk-ddlogin.js b/static/js/dingtalk-ddlogin.js
new file mode 100644
index 00000000..f62433be
--- /dev/null
+++ b/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);
\ No newline at end of file
diff --git a/views/account/login.tpl b/views/account/login.tpl
index a7123fd1..2129f7b5 100644
--- a/views/account/login.tpl
+++ b/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');