支持微信登录

package.json

@@ -121,6 +121,7 @@
     "vue-loader": "^15.9.8",
     "vue-style-loader": "^4.1.3",
     "vue-template-compiler": "^2.6.14",
+    "vue-wxlogin": "^1.0.4",
     "webpack": "^5.59.1",
     "webpack-bundle-analyzer": "2.9.1",
     "webpack-cli": "^4.9.1",

src/api/login.js

@@ -143,3 +143,17 @@ export function validEmailCode(params) {
     params:params
   })
 }
+
+
+/**
+ * 获取第三方登录需要state参数，防止crfs攻击
+ * @param 
+ * @returns 
+ */
+export function getTpaState( ) {  
+  return axios({
+    url: '/tpa/login/wechat/wxpub/state',
+    method: 'post', 
+    data:{}
+  })
+}

src/views/login/components/login.vue

@@ -1,5 +1,6 @@
 <template>
     <div>
+        
         <div v-if="!isRestPwd">
             <div class="login_form">
                 <el-form autoComplete="on" :model="loginForm" :rules="loginRules" ref="loginForm">
@@ -35,9 +36,11 @@
             </div>
             <div class="bottom">
                 <el-divider content-position="center">第三方登录方式</el-divider>
-                <div class="other">
-                    <img src="@/assets/image/module/weixin.png">
-                    <img src="@/assets/image/module/qq.png">
+                <div class="other"> 
+                    <el-popover trigger="manual" v-model="wxLoginCodeVisible" placement="top-start"> <div id="login_container"></div>
+                        <img  slot="reference"  src="@/assets/image/module/weixin.png" @click="weixinLogin">
+                        <el-button type="text" @click="wxLoginCodeVisible=false">关闭</el-button>
+                    </el-popover> 
                 </div>
             </div>
         </div>
@@ -71,7 +74,7 @@
                 </el-button>
             </div>
         </div>
-
+       
     </div>
 
 </template>
@@ -80,8 +83,7 @@
 import { sendSmsCode } from '@/api/sms/sms';
 import { mapGetters } from 'vuex'; 
 import md5 from 'js-md5';
-import { resetPasswordByPhoneno } from '@/api/login';
-
+import { resetPasswordByPhoneno,getTpaState } from '@/api/login'; 
 
 export default {
     name: 'login',
@@ -178,6 +180,7 @@ export default {
             abledBut: false, //是否禁止
 		    setTimeNum: 60,  // 倒计时时间
             timeWrap: null,  // 定时器标识
+            wxLoginCodeVisible:false,
         }
     },
 
@@ -324,6 +327,26 @@ export default {
             this.addBranchFormVisible=false;
             this.handleLogin();
         },
+        weixinLogin(){
+            getTpaState().then(res=>{
+                var tips = res.data.tips;
+                if(tips.isOk){
+                    this.wxLoginCodeVisible=true;
+                     var state=res.data.data
+                    var obj = new WxLogin({
+                        self_redirect:true,
+                        id:"login_container", 
+                        appid: "wx2671d5db8346b6fc", 
+                        scope: "snsapi_login", 
+                        redirect_uri: encodeURIComponent("https://www.maimengcloud.com/api/m1/tpa/login/token?authType=wechat_wxpub&authId=mmxmcloud_wxopen_pc"),
+                        state: state,
+                        style: "",
+                        href: ""
+                    }); 
+                }
+            })
+           
+        },
 
         afterQRScan() {
             // const hash = window.location.hash.slice(1)
@@ -350,6 +373,12 @@ export default {
     destroyed() {
         // window.removeEventListener('hashchange', this.afterQRScan)
     },
+    mounted(){
+        const s = document.createElement('script');
+        s.type = 'text/javascript';
+        s.src = 'https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js';
+        document.body.appendChild(s);
+    }
 
 }