2. 程式人生 > >WAB QQ第三方登錄

WAB QQ第三方登錄

阿新 • • 發佈：2017-08-31
d參數 child pen itblog login 包括 ram 容易 nts

應用場景

web應用通過QQ登錄授權實現第三方登錄。

操作步驟

1 註冊成為QQ互聯平臺開發者，http://connect.qq.com/ 2 準備一個可訪問的域名，如dev.foo.com 3 創建網頁應用，配置必要信息，其中包括域名以及回調地址； 其中域名需要驗證，需確保對域名主機有足夠的控制權限 4 獲取應用appID、appKey進行開發

登錄流程

開發平臺的登錄授權采取oauth2.0機制，這也是目前幾乎所有互聯網開放平臺所采取的方式。 技術分享 需更多了解oauth2.0可參考阮老師的文章： http://www.ruanyifeng.com/blog/2014/05/oauth_2_0.html

實現方式

client-side 流程： 前端頁面通過Implict方式 登錄授權 -> 回調獲得accessToken -> 獲取openid -> 同步用戶信息並登錄 為了保證數據安全，在獲取用戶信息並登錄這一步必須由服務端實現。 這種方式的開發相對便捷，也是後面的實戰案例將要采取的方式。 server-side 流程： 由server端頁面跳轉到登錄授權頁面(Authorization code方式) -> 回調獲得code -> 置換accessToken -> 獲取openid -> 同步用戶信息並登錄 可參考：http://wiki.connect.qq.com/%E5%BC%80%E5%8F%91%E6%94%BB%E7%95%A5_server-side

SDK使用

JSSDK 可快捷實現前端登錄授權的功能，可自定制登錄按鈕 使用文檔：http://wiki.connect.qq.com/js_sdk%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E 缺點：存在瀏覽器兼容風險，此外登錄按鈕UI的定制也存在受限 JavaSDK 屏蔽了oauth授權的復雜度，方便後端實現授權及api操作 缺點：增加依賴jar包，項目容易變得臃腫，尤其是當前項目已經存在oauth功能實現時可不必采用。

案例實戰

功能描述 clientside + server-side 通過QQ網頁授權登錄，並獲取用戶信息

1 本地開發環境準備

修改hosts文件將dev.foo.com映射到127.0.0.1； 本地服務器以80端口啟動， windows下可能會出現80端口被系統進程占用的情況，解決方法可參考 http://www.cnblogs.com/littleatp/p/4414578.html 本地服務器啟動後，以dev.foo.com的域名進行訪問，在QQ登錄授權時可通過域名驗證這一步

2 登錄跳轉頁面

技術分享 
<html>
     <head>
        <title>QQ登錄跳轉</title>
        <script src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
        
        <script type="text/javascript">
        
        //切割字符串轉換參數表
        function toParamMap(str){
             var map = {};
             var segs = str.split("&");
             for(var i in segs){
                 var seg = segs[i];
                 var idx = seg.indexOf(‘=‘);
                 if(idx < 0){
                     continue;
                 }
                 var name = seg.substring(0, idx);
                 var value = seg.substring(idx+1);
                 map[name] = value;
             }
             return map;
         }
        
        //隱式獲取url響應內容(JSONP)
        function openImplict(url){
            var script = document.createElement(‘script‘);
            script.src = url;
            document.body.appendChild(script);        
        }
        
        //獲得openid的回調
        function callback(obj)
        {
           var openid = obj.openid;
           $("#openid").text(openid);
           
           //跳轉服務端登錄url
           var resulturl = "@{openapi.QQs.login_result()}"; 
           var accessToken = $("#accessToken").text();
           
           //向服務端傳輸access_token及openid參數
           document.location.href=resulturl + "?access_token=" + accessToken + "&openid=" + openid;
        }
        
        
        </script>
     </head>
     
     <body>
            <p>AccessToken:<span id="accessToken"></span>--ExpireIn<span id="expire"></span></p>
            <p>OpenID:<span id="openid"></span></p>
     
     <!-- 執行腳本 -->
     <script type="text/javascript">
     
     //應用的APPID
     var appID = "101207268";
     
     //登錄授權後的回調地址，設置為當前url
     var redirectURI = "@@{openapi.QQs.login()}";

     //初始構造請求
     if (window.location.hash.length == 0)
     {
        var path = ‘https://graph.qq.com/oauth2.0/authorize?‘;
        var queryParams = [‘client_id=‘ + appID,
                           ‘redirect_uri=‘ + redirectURI,
                           ‘scope=‘ + ‘get_user_info,list_album,upload_pic,add_feeds,do_like‘,‘response_type=token‘];

        var query = queryParams.join(‘&‘);
        var url = path + query;
        window.location.href= url;
     }
     //在成功授權後回調時location.hash將帶有access_token信息，開始獲取openid
     else
     {
        //獲取access token
        var accessToken = window.location.hash.substring(1);
        var map = toParamMap(accessToken);
        
        //記錄accessToken
        $("#accessToken").text(map.access_token);
        $("#expire").text(map.expires_in);
        
        //使用Access Token來獲取用戶的OpenID
        var path = "https://graph.qq.com/oauth2.0/me?";
        var queryParams = [‘access_token=‘+map.access_token, ‘callback=callback‘];
        var query = queryParams.join(‘&‘);
        var url = path + query;
        openImplict(url);
     }
     
     </script>
     </body>
</html>
技術分享 功能描述 頁面在第一次打開時跳轉到QQ登錄授權頁面； 授權成功之後回到當前頁面通過url參數(hash串)獲得accessToken； 此後可通過jsonp方式獲取用戶的openid，url如： 
https://graph.qq.com/oauth2.0/me?access_token=YOUR_ACCESS_TOKEN
獲取到用戶OpenID，返回包如下(JSONP方式獲取)： 
callback( {"client_id":"YOUR_APPID","openid":"YOUR_OPENID"} )
將access_token及openid傳到服務端進行處理

3 server端獲取用戶信息

接收openid的頁面方法 技術分享 
      /**
     * 登錄結果
     *
     * @param access_token
     * @param openid
     */
    public static void login_result(String access_token, String openid) {
        //調用api獲取qq用戶信息
        QQUserInfo user = QQApi.getUserInfo(access_token, openid);
 
        //此時若取得user信息，則可以進行保存，並執行用戶登錄操作
        ....
        
        //登錄成功後跳轉
        redirect(xxx);
    }
技術分享

QQApi的實現 技術分享 
/**
 * QQ互聯API
 * 
 * <pre>
 * 登錄流程：
 * 
 * 1 前端跳轉qq授權頁面
 * 2 js獲得access_token
 * 3 通過jsonp方式獲得openid
 * 4 server端根據上傳的access_token及openid獲取用戶信息，如昵稱、頭像
 * 
 * 參考文檔：
 * http://wiki.connect.qq.com/%E5%BC%80%E5%8F%91%E6%94%BB%E7%95%A5_client-side#Step2.EF.BC.9A.E8.8E.B7.E5.8F.96AccessToken
 * </pre>
 * 
 * @author xxx
 * @createDate 2015年3月10日
 * 
 */
public class QQApi {

    public static String appId = "xxx";
    public static String appSecret = "xxx";

    public static String baseUrl = "https://graph.qq.com";

    protected static final String URL_GET_USERINFO = baseUrl
            + "/user/get_user_info?access_token=%s&oauth_consumer_key=%s&openid=%s";

    protected static final long ACCESS_TIMEOUT = 15;

    protected static final String DEF_APP_TOKEN_EXPIRE = "3h";

    /**
     * 獲取用戶信息
     * 
     * <pre>
     * http://wiki.connect.qq.com/get_user_info
     * 
     * 
     * 調用地址：
     * https://graph.qq.com/user/get_user_info
     * 參數
     *   access_token=*************&
     *   oauth_consumer_key=12345&
     *   openid
     * 
     * 返回結果如下：
     * {
     *     "ret": 0,
     *     "msg": "",
     *     "is_lost": 0,
     *     "nickname": "小吞",
     *     "gender": "女",
     *     "province": "廣東",
     *     "city": "廣州",
     *     "year": "1993",
     *     "figureurl": "http://qzapp.qlogo.cn/qzapp/101207268/982C9FEADAF7B242C5069B8F390784BF/30",
     *     "figureurl_1": "http://qzapp.qlogo.cn/qzapp/101207268/982C9FEADAF7B242C5069B8F390784BF/50",
     *     "figureurl_2": "http://qzapp.qlogo.cn/qzapp/101207268/982C9FEADAF7B242C5069B8F390784BF/100",
     *     "figureurl_qq_1": "http://q.qlogo.cn/qqapp/101207268/982C9FEADAF7B242C5069B8F390784BF/40",
     *     "figureurl_qq_2": "http://q.qlogo.cn/qqapp/101207268/982C9FEADAF7B242C5069B8F390784BF/100",
     *     "is_yellow_vip": "0",
     *     "vip": "0",
     *     "yellow_vip_level": "0",
     *     "level": "0",
     *     "is_yellow_year_vip": "0"
     * }
     * </pre>
     * 
     * @param accessToken
     * @return
     */
    public static QQUserInfo getUserInfo(String accessToken, String openid) {
        if (StringUtils.isEmpty(accessToken) || StringUtils.isEmpty(openid)) {
            return null;
        }

        String url = String.format(URL_GET_USERINFO, accessToken, appId, openid);

        String resultString = DefaultHttp.get(url, ACCESS_TIMEOUT, GlobalConstants.UTF_8);

        Logger.debug("[sso-qq]get　userinfo. use url ‘%s‘", url);

        QQUserInfo userinfo = JsonUtil.fromJson(resultString, QQUserInfo.class);
        if (userinfo == null || !userinfo.hasGot()) {
            Logger.debug("[sso-qq]get userinfo failed, with result of ‘%s‘", resultString);
            return null;
        }

        Logger.debug("[sso-qq]get userinfo success, with result of ‘%s‘", resultString);
        return userinfo;
    }
技術分享

常見問題

網頁跳轉提示 "redirect_uri_mismatch" 通常是應用配置中的域名與當前開發服務器訪問地址不一致導致，參照案例中的本地開發環境準備小節 api調用返回錯誤 查看返回的ret字段，對於非0值的ret則表示異常結果，可通過以下地址查詢錯誤原因： http://wiki.connect.qq.com/%E5%85%AC%E5%85%B1%E8%BF%94%E5%9B%9E%E7%A0%81%E8%AF%B4%E6%98%8E 接口調用過於頻繁或超過限制 應用系統可做好access_token的存儲，此外對於用戶數據(昵稱、頭像)也做好緩存或持久化，以減少接口的調用頻度。

WAB QQ第三方登錄

相關推薦

WAB QQ第三方登錄

d參數 child pen itblog login 包括 ram 容易 nts 應用場景 web應用通過QQ登錄授權實現第三方登錄。 操作步驟 1 註冊成為QQ互聯平臺開發者，http://connect.qq.com/ 2 準備一個可訪問

QQ第三方登錄

前綴 ace 需要 pen 三個參數 讀取 auto 開始 mod 場景：註冊頁面顯示一個QQ圖標，用戶點擊qq圖標，跳轉登錄，用戶登錄後，獲取到qq用戶的信息，然後把信息綁定到自己的業務用戶中 這裏介紹下調用QQ第三方登錄的具體步驟; 第一步：進入qq官網 申請接入：

QQ第三方登錄（預備節）

qq第三方登錄 php 表單提交 lba com 分享 地址 所有 根據 第一次很多時候，用戶因為復雜的註冊程序，而不願意再體驗我們的網站服務，我們可以通過QQ第三方授權，這樣既保證了用戶數，而且也極大的提高了用戶體驗。廢話就不多說了，直接進入正題。。。 要實現QQ第三

web網站使用qq第三方登錄

地址 部分 請求參數 lib 名稱 ram 2.0 cep charset Html代碼： <a href=’/QQlogin’>qq登錄</a> //後臺代碼： @RequestMapping(value = "/QQlogin", m

實現QQ、微信、新浪微博和百度第三方登錄(Android Studio)

wiki protocol super cli 路徑 參考 syn jar包 all 前言： 對於大多數的APP都有第三方登錄這個功能，自己也做過幾次，最近又有一個新項目用到了第三方登錄，所以特意總結了一下關於第三方登錄的實現，並拿出來與大家一同分享； 各大開放平臺註冊

第三方登錄之qq

pools 定義 button context edm set init () div 主MainActivity public class MainActivity extends AppCompatActivity { private Button bt

PHP 接入（第三方登錄）QQ 登錄 OAuth2.0 過程中遇到的坑

體驗 獲取 get ref 通過 個人開發 ima 創建 key 前言 絕大多數網站都集成了第三方登錄，降低了註冊門檻，增強了用戶體驗。最近看了看 QQ 互聯上 QQ 登錄的接口文檔。接入 QQ 登錄的一般流程呢，是這樣的：先申請開發者 -> 然後創建應用（拿到一組

ThinkPHP第三方登錄-QQ登錄

esp tp3.2 mage control 鏈接地址 認證通過 htm quest user 參考：思夢教育 1、QQ互聯（鏈接地址：https://connect.qq.com/index.html），進行開發者認證（未認證的情況下），有公司和個人兩種認證方式，個人開發

第三方登錄SDK

conn 會有 批量 情況 _array value 本地 red key 緊接著上次的第三方登錄文檔，這一波又來了。 一、使用qq登錄https://connect.qq.com/ 首次登錄的話會跳轉到應用開發

關於電腦寬帶顯示連接 qq可以登錄 但是無法上網的問題

打開 連接 什麽 為什麽 自動配置 關於 無法打開 開始 nbsp ---恢復內容開始--- 大家都遇到過這種情況吧，右下角顯示網絡已連接，但就是上不了網，解決的辦法大都是什麽，打開網絡與共享中心設置什麽協議什麽的，當然，這些有可能是有用的，但是有一些

Android ShareSDKQQ 第三方登錄so easy？

實現 water == launch fmt tope 記錄 .text expire 昨天群裏有個群友看到我之前做的那個qq第三方登錄怎麽做的，於是乎思考了一下，還是決定寫一篇博客記錄下。事實上都不難的，事實上之前我又寫到FaceBook的第三方

微信第三方登錄與靜默授權和非靜默授權

網頁 簡單 關註 三方 裏的 信息 是否 登錄 授權 微信的授權登錄在日常應用中應用的非常廣泛，最多就是第三方登錄 微信登錄分為兩類：授權登錄（非靜默授權）與靜默授權 授權登錄：需要用戶確認登錄，這樣可以通過用戶的個人確認，獲取用戶全面的信息，無論是否關註相關微信公眾號等都

android使用友盟實現第三方登錄、分享以及微信回調無反應問題解決辦法

nta 社會 四大 線程池 down 混合app value int ring Leaning_wk每一次的進步都會拉近與成功的距離！ 帳號設置退出 關閉

微信第三方登錄

openid git reg ade ken clas emoji表情 log user 到這裏https://open.weixin.qq.com，申請成為開發者，然後等著審核通過 通過了，創建網站應用，微信的回調域寫個主域名就可以了，然後等著審核通過 通過了，得到正確的

Android 微信第三方登錄

ces style java 背景 logutil param bsp 新增 set 微信授權登錄，官方說的不是很清楚、所以導致有一部分的坑。 微信註冊應用平臺的應用簽名,下載 微信簽名生成工具 輸入項目的packageName也可以查看到。 （註意：debug、Rel

thinkphp3.2開發網頁實現第三方登錄

uestc span callback == pen err error lib user 1.在要添加登錄的html裏添加登錄按鈕： <a href="{:U(‘Public/login/‘,array(‘type‘=>‘weixin‘))}">&l

微信公眾號與APP微信第三方登錄賬號打通

class 微信服務號 成功 信用 lock 通用 管理中心 post 公眾 一個項目同時開發了APP和微信服務號，需要做到APP和微信服務號的賬號互通同步，也就是說一個賬號在2個地方都可以用，當然這個前提是保證你公司自己的服務器的數據庫用的是同一套。 為保證用戶數據的唯

第三方登錄

字段 不能 adjust show jar oauth2 getent jar文件 filter 各大開放平臺註冊賬戶獲取AppKey和AppSecret Mob開放平臺地址：http://www.mob.com/#/index QQ開放平臺地址：http://open.q

apiClould微信三方登錄，qq三方登錄

nio 微信 blog req bak ould tps 用戶信息 source 三方登錄需要在config.xml文件中配置一下，res文件下需要新建一個key.xml文件中也需要配置，請點擊鏈接查看詳情 微信：https://docs.apicloud.com/Clie

mac應用程序緩存保存目錄+qq單個qq號登錄異常處理

com mac 應用 container hub jce baidu con www. mac應用程序緩存保存目錄 ~/Library/Containers/qq單個qq號登錄異常處理 rm -r ~/Library/Containers/com.tencent.qqm