QQ互聯登入- 前端為 vue.js
阿新 • • 發佈:2019-02-19
1.設定個圖示點選請求後臺,後臺通過相應引數生成URL返回給前臺,前臺在指定div開啟url,使用者在QQ頁面登入完成後會回撥到剛剛返回的URL裡面的redirect_uri 中,設定個定時器1秒鐘去掃一次返回的資訊,掃到相應的資料進行相應的處理
登入頁面 <div class="dsflogin_1"><a class="icon-qq" href="#" @click.stop.prevent="login_qq" title="QQ登入"></a></div> //定義引數 App._$declare({ ewmDiv_qq : false, qq_url : '', setinterval_qq : null }); 方法 //qq登入 login_qq : function(){ var _this = this; if(_this.setinterval_qq != null){//有定時器先關閉 clearInterval(_this.setinterval_qq); } App._$get('${ctxPath}/api/qq-login.json?_type=requestQQ&_batch=true',null,null,null,null, function(data){ _this.ewmDiv_qq = true; _this.qq_url = data.url;//回傳url //監聽返回引數 _this.setinterval_qq = setInterval(function(){ if(_this.ewmDiv_qq == false){//關閉二維碼視窗 clearInterval(setinterval_qq) } var qqStatus = $("#qqStatus",$('#ewmDiv_qq iframe')[0].contentDocument).val();//$('#ewmDiv_qq iframe')[0].contentDocument 在哪裡獲得 if(qqStatus != null){ clearInterval(_this.setinterval_qq) if(qqStatus == 200){//成功登入 var login_jwt = $("#login_jwt",$('#ewmDiv_qq iframe')[0].contentDocument).val(); var login_t = $("#login_t",$('#ewmDiv_qq iframe')[0].contentDocument).val(); window.localStorage['_authorization'] = login_jwt; window.localStorage['_t'] = login_t; setTimeout(function(){ //登入成功,跳轉到指定頁面 window.location.href = '${ctxPath}/member/'; },100) }else if(qqStatus == 201){//未註冊 _this.ewmDiv_qq = false; _this.registerDiv = true;//註冊 _this.memberForm.dsfType = 2;//登入型別 } } },1000); },function(err){ _this.$message.error("qq登入失敗"); }); }, <!--QQ登入頁面 --> <el-dialog id="ewmDiv_qq" style="text-align: center;" :visible.sync="ewmDiv_qq" width="1000px"> <iframe id="iframe_qq" :src="qq_url" style="width: 800px;height: 400px;border : none;" v-if="ewmDiv_qq"> </iframe> <br> <el-button @click="ewmDiv_qq = false">關 閉</el-button> </el-dialog>
1.後臺程式碼
// 應用唯一標識 appid 申請的appid private String appid = "10150967905"; /** * * @category 回撥地址 * @author hjj * @date 2018年10月13日 * @return * @return String * @throws UnsupportedEncodingException */ public static String queryRelationCallbackUri(HttpServletRequest request, String upath) throws UnsupportedEncodingException{ String path = request.getContextPath(); String ServerName = request.getServerName(); //String ServerName = "1608e55a.all123.net";//測試ip 不加ip String basePath = request.getScheme() + "://" + ServerName + path ; basePath += upath; basePath = URLEncoder.encode(basePath, "UTF-8"); return basePath; } /** * * @category 登入請求微信操作 (步驟1) * @author hjj * @date 2018年10月13日 * @return void */ public void _$indexBatchRequestQQ(){///we-chat-login Resp result = initResult(); try { String redirect_uri = queryRelationCallbackUri(request, "/qq-login"); String url = "https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id=" +appid+"&redirect_uri="+redirect_uri+"&state="+"requestQQ"; result.dataMap("url", url); } catch (Exception e) { e.printStackTrace(); } }
2.回撥地址及處理,判斷使用者是否註冊等相關資訊返回給頁面qq-login.tpl
// 應用唯一標識 private String appid = "10150967905"; // 應用金鑰AppSecret,在微信開放平臺提交應用稽核通過後獲得 private String APP_KEY = "00af379f60d2248ab7201b80bdf215de05"; private Integer status = null;//狀態 private String statusTitle = "";//文字說明 private String access_token = ""; /** * * @category (步驟1)回撥地址 獲得使用者openid並處理資料 * @author hjj * @date 2018年10月31日 * @return void */ @Override public String execute(){ String code = param("code"); String state = param("state"); String msg = param("msg",null); //錯誤時會返回 Resp result = initResult(); if(msg == null){//異常資訊為空 try { JsonObject json = queryData(); if(json != null ){//獲得到使用者openid資訊 String openid = json.get("openid").getAsString(); Members members = memberService.queryUserDate(null,openid); if(members != null){//0 正常 1不正常 2為註冊 App app = WebHelper.getApp(request); if(Constants.USER_STATUS_NORMAL.equals(members.getStatus())){//使用者轉態正常 JsonObject userJson = sessionService.thirdPartyLogin(members, null, response, request, app); attr("jwt",userJson.get("jwt").getAsString()); attr("_t",userJson.get("_t").getAsString()); status = 200; statusTitle = "登入成功"; }else{//狀態異常 status = -4; statusTitle = "使用者狀態異常"; } }else{//未繫結賬號 //{"ret":0,"msg":"","is_lost":0,"nickname":"酒丿精","gender":"男","province":"廣東","city":"廣州","year":"1994","constellation":"","figureurl":"http://qzapp.qlogo.cn/qzapp/101509679/9471D2E4C63F087EBE8C0AB2B51FCFE3/30","figureurl_1":"http://qzapp.qlogo.cn/qzapp/101509679/9471D2E4C63F087EBE8C0AB2B51FCFE3/50","figureurl_2":"http://qzapp.qlogo.cn/qzapp/101509679/9471D2E4C63F087EBE8C0AB2B51FCFE3/100","figureurl_qq_1":"http://thirdqq.qlogo.cn/qqapp/101509679/9471D2E4C63F087EBE8C0AB2B51FCFE3/40","figureurl_qq_2":"http://thirdqq.qlogo.cn/qqapp/101509679/9471D2E4C63F087EBE8C0AB2B51FCFE3/100","is_yellow_vip":"0","vip":"0","yellow_vip_level":"0","level":"0","is_yellow_year_vip":"0"} JsonObject json2 = queryUserData(access_token, openid); if(json2.get("ret").getAsInt() != 0){//獲得使用者資訊 status = -5; statusTitle = json2.get("msg").getAsString();//返回資訊 }else{ HttpSession session = request.getSession(); json2.addProperty("openid", openid);//追加openid session.setAttribute(Constants.SESSION_USER_QQ, json2);//設定到Session中 status = 201; statusTitle = "";//未繫結賬號 } } } } catch (Exception e) { e.printStackTrace(); status = -999; statusTitle = "系統異常,請重新操作!"; } }else{ status = -1; statusTitle = msg; } attr("status",status); attr("statusTitle",statusTitle); return SUCCESS; } /** * * @category 獲得qq使用者資訊 * @author hjj * @date 2018年10月17日 * @param ACCESS_TOKEN 呼叫憑證 * @param openid 普通使用者的標識,對當前開發者帳號唯一 * @return void * * ret 返回碼 msg 如果ret<0,會有相應的錯誤資訊提示,返回資料全部用UTF-8編碼。 nickname 使用者在QQ空間的暱稱。 figureurl 大小為30×30畫素的QQ空間頭像URL。 figureurl_1 大小為50×50畫素的QQ空間頭像URL。 figureurl_2 大小為100×100畫素的QQ空間頭像URL。 figureurl_qq_1 大小為40×40畫素的QQ頭像URL。 figureurl_qq_2 大小為100×100畫素的QQ頭像URL。需要注意,不是所有的使用者都擁有QQ的100x100的頭像,但40x40畫素則是一定會有。 gender 性別。 如果獲取不到則預設返回"男" */ public JsonObject queryUserData(String ACCESS_TOKEN, String openid){ String url = "https://graph.qq.com/user/get_user_info?access_token="+ACCESS_TOKEN+"&oauth_consumer_key="+appid+"&openid="+openid; String fhz = UrlUitl.sendGet(url); return JsonUtil.fromJson(fhz); } /** * * @category qq返回字串轉物件json * @author hjj * @date 2018年11月1日 * @param str access_token=4EA7D04DC15AB2AEE86F5B6812ADC0CB&expires_in=7776000&refresh_token=4CD647A8C4ECE3A362BEEB981AD0BD3F * @return JsonObject */ public JsonObject dataToObject(String str){ str = "{"+str.replaceAll("=", ":").replaceAll("&", ",")+"}"; return JsonUtil.fromJson(str); } /** * * @category 切割返回資料轉JsonObject物件 * @author hjj * @date 2018年11月1日 * @param str callback( {"client_id":"101509679","openid":"D008664CA03401B781C7F96E015DE959"} ); * @return * @return JsonObject */ public JsonObject dataToObject2(String str){ str = str.split("\\(")[1].split("\\)")[0]; return JsonUtil.fromJson(str); } /** * * @category 登入回撥獲得使用者 openid 資訊 * @author hjj * @date 2018年11月2日 * @return * @throws UnsupportedEncodingException * @return JsonObject */ public JsonObject queryData() throws UnsupportedEncodingException{ String code = param("code"); String state = param("state"); String msg = param("msg",null); //錯誤時會返回 JsonObject reJson = null; if(msg == null){//異常資訊為空 String redirect_uri = UrlUitl.queryRelationCallbackUri(request, "/api/qq-login"); String url = "https://graph.qq.com/oauth2.0/token?grant_type=authorization_code&client_id="+appid +"&client_secret="+APP_KEY+"&code="+code+"&redirect_uri="+redirect_uri; String fhz = UrlUitl.sendGet(url); JsonObject json = dataToObject(fhz); if(json.get("msg") != null){ status = -2; statusTitle = json.get("msg").toString(); }else{//獲得access_token 那這個去獲得使用者資訊 access_token = json.get("access_token").getAsString(); url = "https://graph.qq.com/oauth2.0/me?access_token="+access_token; fhz = UrlUitl.sendGet(url); json = dataToObject2(fhz); if(json.get("msg") != null){ status = -3; statusTitle = json.get("msg").toString(); }else{ reJson = json; } } }else{ status = -1; statusTitle = msg; } return reJson; }
3.qq-login.tpl 1中定時器不斷掃面的資料
<div>
<input type="hidden" id="qqStatus" value="${status!}"/>
<input type="hidden" id="login_jwt" value="${jwt!}"/>
<input type="hidden" id="login_t" value="${_t!}"/>
<div style="text-align: center;margin-top: 100px;">
<div class="thirdParty_1">
<span class="thirdParty_1_1" style="font-size: 18px;">${statusTitle!}</span>
</div>
</div>
</div>