钉钉登录

index.html

@@ -6,6 +6,8 @@
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
     <!-- 页面增加icon图标 -->
     <link rel="shortcut icon" type="image/x-icon" href="./favicon.ico" rel="external nofollow" />
+    <script src="https://g.alicdn.com/dingding/dinglogin/0.0.5/ddLogin.js"></script>
+
     <title>后端管理平台</title>
 </head>
 

src/components/BaseRegister.vue

@@ -132,12 +132,13 @@ export default {
 
       if (cellphone && smsCode) {
         phoneLogin({ cellphone: cellphone, smsCode: smsCode }).then(res => {
+          let tokenInfo = this.$jwtDecode(res.result.data.jwt.access_token)
           localStorage.setItem("token", res.result.data.jwt.access_token);
           localStorage.setItem('user',JSON.stringify(res.result.data.user))
-          localStorage.setItem('tokenInfo',JSON.stringify(this.$jwtDecode(res.result.data.jwt.access_token)))
+          localStorage.setItem('tokenInfo',JSON.stringify(tokenInfo))
           this.$message.success("登录成功!");
           this.$store.commit("login", "true");
-          this.$router.push({ path: "/orgs/Orgs" });
+          this.$router.push({ path: tokenInfo.role.includes('root') ? "/orgs/Orgs" : "/member/Member" });
           this.isLoginLoading = false;
         });
       } else {

src/views/login.vue

@@ -1,58 +1,76 @@
 <template>
   <div class="login-wrap">
     <!-- 账号密码登录 -->
-    <el-form label-position="left" v-if="!isShowRegister" :model="loginForm" :rules="rules" ref="loginForm" label-width="0px" class="demo-loginForm login-container">
-      <h3 class="title">欢迎登录</h3>
-      <el-form-item prop="username">
-        <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
-      </el-form-item>
-      <el-form-item prop="password" v-show="isLoginByPsw">
-        <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
-      </el-form-item>
-      <el-row>
-        <el-col :span="12">
-          <el-form-item prop="captcha">
-            <el-input
-              type="text"
-              v-model="loginForm.captcha"
-              auto-complete="off"
-              placeholder="图形验证码"
-            ></el-input>
-          </el-form-item>
-        </el-col>
-        <el-col :span="12" class="code-box">
-          <img :src="codeImgSrc" alt class="codeimg" @click="getCode()" />
-        </el-col>
-      </el-row>
-      <el-form-item v-show="!isLoginByPsw" prop="smsCode">
-        <el-input placeholder="请输入验证码" v-model="loginForm.smsCode" style="width:95%">
-          <template slot="append">
-            <span
-              @click="isCodeBtnAble ? getSmsCode() : ''"
-              :style="{background : isCodeBtnAble ? '#409eff' : '#aaaaaa'}"
-              class="btn-getSmsCode"
-            >{{ isCodeBtnAble ? '获取验证码' : `${ timer }秒后重新获取`}}</span>
-          </template>
-        </el-input>
-      </el-form-item>
-      <el-form-item style="width:100%;margin-bottom:10px">
-        <el-button
-          type="primary"
-          style="width:100%;"
-          @click="submitForm('loginForm')"
-          :loading="isLoginLoading"
-        >登录</el-button>
-      </el-form-item>
-      <el-form-item style="width:100%">
-        <el-button
-          type="primary"
-          style="width:100%;background:#258489;border:none;"
-          @click="isLoginByPsw = !isLoginByPsw"
-        >{{ isLoginByPsw ? '验证码登录' : '密码登录'}}</el-button>
-      </el-form-item>
-    </el-form>
-
-    <BaseRegister v-else :ticket='curTicket' :user='newUser' :smsCode='curSmsCode'></BaseRegister>
+    <div v-if="!isShowRegister">
+      <el-form
+        label-position="left"
+        v-if="!isDingLogin"
+        :model="loginForm"
+        :rules="rules"
+        ref="loginForm"
+        label-width="0px"
+        class="demo-loginForm login-container"
+      >
+        <h3 class="title">欢迎登录</h3>
+        <el-form-item prop="username">
+          <el-input type="text" v-model="loginForm.username" auto-complete="off" placeholder="账号"></el-input>
+        </el-form-item>
+        <el-form-item prop="password" v-show="isLoginByPsw">
+          <el-input type="password" v-model="loginForm.password" auto-complete="off" placeholder="密码"></el-input>
+        </el-form-item>
+        <el-row>
+          <el-col :span="12">
+            <el-form-item prop="captcha">
+              <el-input
+                type="text"
+                v-model="loginForm.captcha"
+                auto-complete="off"
+                placeholder="图形验证码"
+              ></el-input>
+            </el-form-item>
+          </el-col>
+          <el-col :span="12" class="code-box">
+            <img :src="codeImgSrc" alt class="codeimg" @click="getCode()" />
+          </el-col>
+        </el-row>
+        <el-form-item v-show="!isLoginByPsw" prop="smsCode">
+          <el-input placeholder="请输入验证码" v-model="loginForm.smsCode" style="width:95%">
+            <template slot="append">
+              <span
+                @click="isCodeBtnAble ? getSmsCode() : ''"
+                :style="{background : isCodeBtnAble ? '#409eff' : '#aaaaaa'}"
+                class="btn-getSmsCode"
+              >{{ isCodeBtnAble ? '获取验证码' : `${ timer }秒后重新获取`}}</span>
+            </template>
+          </el-input>
+        </el-form-item>
+        <el-form-item style="width:100%;margin-bottom:10px">
+          <el-button
+            type="primary"
+            style="width:100%;"
+            @click="submitForm('loginForm')"
+            :loading="isLoginLoading"
+          >登录</el-button>
+        </el-form-item>
+        <el-form-item style="width:100%">
+          <el-button
+            type="primary"
+            style="width:100%;background:#258489;border:none;"
+            @click="isLoginByPsw = !isLoginByPsw"
+          >{{ isLoginByPsw ? '验证码登录' : '密码登录'}}</el-button>
+          <div class="ding-box">
+            <img src="@/assets/img/ding.png" alt="" width="40" style="cursor:pointer" @click="isDingLogin = !isDingLogin">
+            <span style="color:#6d6d6d">第三方登录</span>
+          </div>
+        </el-form-item>
+      </el-form>
+      <div class="login-container ding-login-container" v-show="isDingLogin">
+          <p style="font-weight:bold;font-size:18px">钉钉扫码登录</p>
+          <div id="login_container"></div>
+          <p style="font-weight:bold;font-size:16px;margin-bottom:20px;cursor:pointer" @click="isDingLogin = !isDingLogin"><u>账号密码登录</u></p>
+      </div>
+    </div>
+    <BaseRegister v-else :ticket="curTicket" :user="newUser" :smsCode="curSmsCode"></BaseRegister>
   </div>
 </template>
 <script type="text/ecmascript-6">
@@ -65,11 +83,12 @@ export default {
   components: { BaseRegister },
   data() {
     return {
+      isDingLogin:true,
       timer: 10,
-      curTicket:'',
-      curSmsCode:'',
-      curPhone:'',
-      newUser:{},
+      curTicket: "",
+      curSmsCode: "",
+      curPhone: "",
+      newUser: {},
       isShowRegister: false,
       isLoginByPsw: false,
       isCodeBtnAble: true,
@@ -109,8 +128,38 @@ export default {
     this.getUUID();
     // 获取图形验证码
     this.getCode();
+
   },
   methods: {
+    testDing() {
+      const appid = 'dingoabikplouc0kaoq7io'
+      var url = encodeURIComponent('http://localhost:9999/');
+      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 obj = DDLogin({
+        id: "login_container",
+        goto: goto,
+        style: "border:none;background-color:#FFFFFF;",
+        width: "365",
+        height: "350"
+      });
+
+      var handleMessage = function (event) {
+        var origin = event.origin;
+        if( origin == "https://login.dingtalk.com" ) { //判断是否来自ddLogin扫码事件。
+          var loginTmpCode = event.data; 
+          const URL = `https://oapi.dingtalk.com/connect/oauth2/sns_authorize?appid=${appid}&response_type=code&scope=snsapi_login&state=STATE&redirect_uri=${url}&loginTmpCode=${loginTmpCode}`
+          window.location.href = URL
+        }
+      };
+      if (typeof window.addEventListener != 'undefined') {
+          window.addEventListener('message', handleMessage, false);
+      } else if (typeof window.attachEvent != 'undefined') {
+          window.attachEvent('onmessage', handleMessage);
+      }
+
+    },
+
     /** 发送短信验证码 */
     getSmsCode() {
       if (
@@ -156,19 +205,24 @@ export default {
           let isNewUser = res.result.data.status === 1;
           if (isNewUser) {
             this.$message.success("新用户请完善信息！");
-            this.curSmsCode = smsCode
-            this.curPhone = cellphone
+            this.curSmsCode = smsCode;
+            this.curPhone = cellphone;
 
-            this.curTicket = res.result.data.ticket
-            this.newUser = res.result.data.user
-            this.isShowRegister = true
+            this.curTicket = res.result.data.ticket;
+            this.newUser = res.result.data.user;
+            this.isShowRegister = true;
           } else {
-            localStorage.setItem('token',res.result.data.jwt.access_token)
-            localStorage.setItem('tokenInfo',JSON.stringify(this.$jwtDecode(res.result.data.jwt.access_token)))
-            localStorage.setItem('user',JSON.stringify(res.result.data.user))
-            this.$message.error("登录成功!");
+            let tokenInfo = this.$jwtDecode(res.result.data.jwt.access_token);
+            localStorage.setItem("token", res.result.data.jwt.access_token);
+            localStorage.setItem("tokenInfo", JSON.stringify(tokenInfo));
+            localStorage.setItem("user", JSON.stringify(res.result.data.user));
+            this.$message.success("登录成功!");
             this.$store.commit("login", "true");
-            this.$router.push({ path: "/orgs/Orgs" });
+            this.$router.push({
+              path: tokenInfo.role.includes("root")
+                ? "/orgs/Orgs"
+                : "/member/Member"
+            });
             this.isLoginLoading = false;
           }
         });
@@ -224,6 +278,10 @@ export default {
         }
       });
     }
+  },
+
+  mounted(){
+    this.testDing();
   }
 };
 </script>
@@ -236,6 +294,12 @@ export default {
   padding: 0 !important;
   cursor: pointer;
 }
+
+.login_qrcode_content{
+  width: 300px !important;
+  height: 300px !important;
+  margin-top: 50px !important;
+}
 </style>
 
 
@@ -253,6 +317,12 @@ export default {
   background-size: 100%;
   font-family: 微軟正黑體, "Heiti TC" !important;
 }
+.ding-login-container{
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
 .login-container {
   border-radius: 10px;
   margin: 0px auto;
@@ -292,4 +362,13 @@ export default {
   line-height: 40px;
   user-select: none;
 }
+
+
+.ding-box{
+  margin-top: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-items: center;
+}
 </style>