qq授权登录及绑定注册

app_Web/public/assets/qqRedirect.html

@@ -13,11 +13,10 @@
         $(function () {
             var code = getUrlParam('code');
             var state = getUrlParam('state');
-            alert("code:" + code + "\n state:" + state);
+            // alert("code:" + code + "\n state:" + state);
 
             if (code && state) {
                 // 通过授权code请求后台
-                // alert(window.location.hostname);
                 var opt = {"code": code, "state": state};
                 $.ajax({
                     type: "post",
@@ -42,7 +41,7 @@
                                 window.location.href = "../index";
                             } else {
                                 // 跳转微信绑定
-                                window.location.href = "../#/weixinLoginRedirect?code=" + code + "&state=" + state;
+                                window.location.href = "../#/qqLoginRedirect?code=" + code + "&state=" + state;
                             }
                         }
                     },

app_Web/src/components/login/login.vue

@@ -280,7 +280,54 @@ export default class Login extends Vue {
      * @param thirdpart
      */
     public tencentHandleClick(thirdpart: any) {
-        this.$Message.warning("qq授权登录暂未支持")
+        // 截取地址，拼接需要部分组成新地址
+        const baseUrl = this.getNeedLocation();
+
+        // 从后台获取qq互联创建的网站应用appid
+        const get: Promise<any> = this.$http.get('/uaa/getQQAppId');
+        get.then((response: any) => {
+            if (response && response.status === 200) {
+                const data = response.data;
+                if (data && data.appid) {
+                    // 1.qq互联创建的网站应用appid
+                    const client_id = data.appid;
+                    // 2.回调地址,即授权登录成功后跳转的地址,需要UrlEncode转码
+                    const redirect_uri = baseUrl + 'assets/qqRedirect.html';
+                    const redirect_uri_encode = decodeURIComponent(redirect_uri);
+                    // 3.随机生成一段字符串，防止CSRF攻击的
+                    const state = Math.random().toString(36).substr(2);
+                    // 4.qq授权登录地址
+                    const url = 'https://graph.qq.com/oauth2.0/authorize?response_type=code'
+                        + '&client_id=' + client_id
+                        + '&redirect_uri=' + redirect_uri_encode
+                        + "&scope=get_user_info"
+                        + "&state=" + state;
+                    // 5.跳转qq授权
+                    window.location.href = url;
+                }else {
+                    this.$Message.error({
+                        content: "获取网站应用appid失败，" + data.detail,
+                        duration: 5,
+                        closable: true
+                    });
+                }
+            }
+        }).catch((error: any) => {
+            const data = error.data;
+            if (data && data.detail) {
+                this.$Message.error({
+                    content: "获取网站应用appid失败，" + data.detail,
+                    duration: 5,
+                    closable: true
+                });
+            } else {
+                this.$Message.error({
+                    content: "获取网站应用appid失败",
+                    duration: 5,
+                    closable: true
+                });
+            }
+        });
     }
 
     /**

app_Web/src/components/login/qqLoginRedirect.vue

@@ -81,6 +81,23 @@
         public BtnContent: any = "注册并绑定QQ";
 
 
+        /**
+         * QQ互联授权成功返回的code和state
+         */
+        public code: any;
+        public state: any;
+
+        /**
+         *　QQ用户身份的唯一标识
+         */
+        public openid: any;
+
+        /**
+         * QQ用户名称
+         */
+        public nickname: any;
+
+
         /**
          * 应用名称
          *
@@ -113,12 +130,6 @@
             }
         };
 
-        // 注册方式
-        public registerType: any = "commom";
-        // 用户身份的唯一标识。建议保存在本地，以便用户下次登录时可对应到其之前的身份信息，不需要重新授权。
-        public openId: any;
-        // 表示当前用户在此网站/应用的登录状态与授权信息，建议保存在本地。
-        public accessToken: any;
 
         /**
          * 生命周期Create
@@ -134,39 +145,78 @@
          */
         public mounted() {
             let _this = this;
-            // 获取qq授权登录的信息，用于后台请求
-            if (window.QC.Login.check()) {
-                console.log("qq已经登录");
-                window.QC.Login.getMe(function(openId:string, accessToken:string){
-                    _this.openId = openId;
-                    _this.accessToken = accessToken;
-                    _this.registerType = "qq";
-                    localStorage.setItem("openId",openId);
-                    localStorage.setItem("accessToken",accessToken);
-                });
-                // 根据openId查用户
-                this.queryUserByOpenId(this.openId);
+            // 从url获取授权code和state
+            this.code = this.$route.query.code;
+            if (!this.code) {
+                this.code = this.getUrlParam('code');
             }
+            this.state = this.$route.query.state;
+            if (!this.state) {
+                this.state = this.getUrlParam('state');
+            }
+            // alert("code:" + this.wechatCode + "\nstate:" + this.wechatState);
+            // 获取失败，回到登录页
+            if (!this.code || !this.state) {
+                this.$message.error("微信授权，获取code失败");
+                this.goLogin();
+            }
+            else {
+                // 根据code获取QQ用户信息
+                this.getQQUserInfoByCode(this.code);
+            }
+        }
+
+
+        /**
+         * 监听语言变化
+         *
+         * @memberof Login
+         */
+        @Watch('$i18n.locale')
+        onLocaleChange(newval: any, val: any) {
+            this.setRules();
+        }
+
+        /**
+         * 跳转登录页面
+         *
+         * @memberof Register
+         */
+        public goLogin(): void {
+            const _this = this;
+            _this.$router.push('/login');
+        }
+
+
+        /**
+         * 获取url参数
+         */
+        public getUrlParam(name: any) {
+            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)"); //构造一个含有目标参数的正则表达式对象
+            var r = window.location.search.substr(1).match(reg); //匹配目标参数
+            if (r != null) return unescape(r[2]);
+            return null; //返回参数值
         }
 
         /**
-         * 根据openId查用户
-         * 1.没系统账号的，进行注册并绑定QQ
-         * 2.有系统账号的，直接登录
-         * @param openId
+         *  根据code获取微信用户信息
          */
-        private queryUserByOpenId(openId: any) {
+        private getQQUserInfoByCode(code: any) {
             var param: any = {};
-            param.openId = openId;
-            const post: Promise<any> = this.$http.post('uaa/queryUserByOpenId', param, true);
+            param.code = code;
+            const post: Promise<any> = this.$http.post('/uaa/getQQUserInfoByCode', param, true);
             post.then((response: any) => {
                 if (response && response.status === 200) {
                     const data = response.data;
-                    if (data.ibzuser) {
-                        this.form.loginname = data.ibzuser.loginname;
-                        this.form.password = data.ibzuser.password;
-                        // 直接登录
-                        this.countDown(0);
+                    if (data && data.openid) {
+                        this.openid = data.openid;
+                        this.nickname = data.nickname;
+                    } else {
+                        this.$Message.error({
+                            content: "获取QQ用户信息失败,请重新授权",
+                            duration: 3,
+                            closable: true
+                        });
                     }
                 }
             }).catch((e: any) => {
@@ -179,34 +229,12 @@
                     });
                 } else {
                     this.$Message.error({
-                        content: "错误",
+                        content: "获取QQ用户信息失败,请重新授权",
                         duration: 3,
                         closable: true
                     });
                 }
             });
-
-        }
-
-
-        /**
-         * 监听语言变化
-         *
-         * @memberof Login
-         */
-        @Watch('$i18n.locale')
-        onLocaleChange(newval: any, val: any) {
-            this.setRules();
-        }
-
-        /**
-         * 跳转登录页面
-         *
-         * @memberof Register
-         */
-        public goLogin(): void {
-            const _this = this;
-            _this.$router.push('/login');
         }
 
 
@@ -228,38 +256,40 @@
             }
 
             var param: any = this.form;
-            if (this.registerType === "qq") {
-                param.registerType = "qq";
-                param.openId = this.openId;
-                param.accessToken = this.accessToken;
+            if (this.code && this.state) {
+                param.code = this.code;
+                param.state = this.state;
+                param.openid = this.openid;
+                param.nickname = this.nickname;
             }
             else {
-                this.$Message.error({
-                    content: "注册并绑定QQ失败",
-                    duration: 3,
-                    closable: true
-                });
+                this.$message.error("QQ授权，获取code失败");
                 return;
             }
-            const post: Promise<any> = this.$http.post('/uaa/register', param, true);
+
+            const post: Promise<any> = this.$http.post('/uaa/bindQQtoRegister', param, true);
             post.then((response: any) => {
                 if (response && response.status === 200) {
                     const data = response.data;
-                    if (data && data.ibzuser) {
-                        this.$Message.success({
-                            content: "注册成功，用户名:" + data.ibzuser.loginname + "，密码:" + data.ibzuser.password,
-                            duration: 3,
-                            closable: true
-                        });
-                    } else {
+                    if (data) {
                         this.$Message.success({
-                            content: "注册成功",
-                            duration: 3,
-                            closable: true
+                            content: "注册成功,正在登录"
                         });
+                        if (data.token) {
+                            localStorage.setItem('token', data.token);
+                        }
+                        if (data.user) {
+                            localStorage.setItem('user', JSON.stringify(data.user));
+                        }
+                        if (data.ibzuser) {
+                            let ibzuser: any = JSON.stringify(data.ibzuser);
+                            // 设置cookie,保存账号密码7天
+                            this.setCookie(ibzuser.loginname, ibzuser.password, 7);
+                            // 跳转首页
+                            const url: any = '*';
+                            this.$router.push({path: url});
+                        }
                     }
-                    // 3s后自动登录
-                    this.countDown(3);
                 }
             }).catch((e: any) => {
                 const data = e.data;

app_Web/src/router/index.ts

@@ -4,6 +4,10 @@ export const globalRoutes:Array<any> = [
         path: '/register',
         component: ()=> import('@components/login/register.vue')
     },
+    {
+        path: '/qqLoginRedirect',
+        component: ()=> import('@components/login/qqLoginRedirect.vue')
+    },
     {
         path: '/weixinLoginRedirect',
         component: ()=> import('@components/login/weixinLoginRedirect.vue'),