開(kāi)發(fā)攻略_Client-side
閱讀前提
本開(kāi)發(fā)攻略適用于使用Implicit Grant方式獲取Access Token的授權(quán)驗(yàn)證流程，適用于需要通過(guò)客戶端訪問(wèn)的方式，例如需要通過(guò)瀏覽器的javascript代碼，或者電腦/移動(dòng)終端上的客戶端訪問(wèn)時(shí)。
閱讀本開(kāi)發(fā)攻略前，請(qǐng)閱讀【QQ登錄】使用Implicit Grant方式獲取Access Token以了解認(rèn)證流程。
1. 體驗(yàn)一把
1. 瀏覽器訪問(wèn)：http://qzs.qq.com/qzone/openapi/client.html 。
2. 點(diǎn)擊頁(yè)面中的“登錄”按鈕：
3. 在彈出的登錄框中輸入QQ帳號(hào)和密碼：
4. 登錄成功后，跳轉(zhuǎn)到指定的回調(diào)地址，URL中帶有Access Token：
2. 快速上手
準(zhǔn)備工作
1. 請(qǐng)確保您的網(wǎng)站已經(jīng)提交接入QQ登錄的申請(qǐng)，并成功獲取到appid和appkey。申請(qǐng)接入
2. 請(qǐng)?jiān)谀愕姆?wù)器上ping openapi.qzone.qq.com ，保證網(wǎng)站和Qzone的連接暢通。
Step1：放置QQ登錄按鈕
網(wǎng)站需要下載“QQ登錄”按鈕圖片，并按照UI規(guī)范將按鈕放置在頁(yè)面合適的位置。
按鈕圖標(biāo)下載 按鈕放置規(guī)范
Step2：獲取Access Token
1. 打開(kāi)瀏覽器，訪問(wèn)如下地址（請(qǐng)將client_id，redirect_uri，scope等參數(shù)值替換為你自己的）：
https://graph.qq.com/oauth2.0/authorize?response_type=token&client_id=[YOUR_APPID]&redirect_uri=[YOUR_REDIRECT_URI]&scope=[THE_SCOPE]
2. 如果用戶已經(jīng)有登錄態(tài)，會(huì)彈出提示一個(gè)確認(rèn)頁(yè)。如果還沒(méi)有登錄，會(huì)彈出登錄頁(yè)，如下圖所示：
3. 成功登錄后，彈出授權(quán)框引導(dǎo)用戶授權(quán)（僅在第一次訪問(wèn)某個(gè)OpenAPI會(huì)出現(xiàn)授權(quán)頁(yè)），如下圖所示：
注意：
如果用戶不允許，則訪問(wèn)操作將被中止。
建議第三方應(yīng)用控制授權(quán)項(xiàng)，即參數(shù)值scope中只傳入必須使用的OpenAPI名稱。因?yàn)槭跈?quán)項(xiàng)越多，用戶越有可能拒絕授權(quán)。
4. 如果用戶允許授權(quán)，則成功跳轉(zhuǎn)到指定的redirect_uri，并在URL后加“#”號(hào)，帶上Access Token以及expires_in等參數(shù)。如果redirect_uri地址后已經(jīng)有“#”號(hào)，則加“&”號(hào)，帶上相應(yīng)的返回參數(shù)。
例如回調(diào)地址是：www.qq.com，則會(huì)跳轉(zhuǎn)到：
http://www.qq.com/?#access_token=YOUR_ACCESS_TOKEN&expires_in=3600
特別提示：
1. 請(qǐng)求時(shí)傳入的recirect_uri必須與注冊(cè)時(shí)填寫(xiě)的回調(diào)地址一致，用來(lái)進(jìn)行第三方應(yīng)用的身份驗(yàn)證。
2. 可通過(guò)js方法：window.location.hash來(lái)獲取URL中#后的參數(shù)值，詳見(jiàn)下面的示例代碼。
3. 建議用js設(shè)置cookie存儲(chǔ)token。
4. 獲取到的access token具有3個(gè)月有效期，用戶再次登錄時(shí)自動(dòng)刷新。
Step3：使用Access Token來(lái)獲取用戶的OpenID
1. 發(fā)送請(qǐng)求到如下地址（請(qǐng)將access_token等參數(shù)值替換為你自己的）：
https://graph.qq.com/oauth2.0/me?access_token=YOUR_ACCESS_TOKEN
2. 獲取到用戶OpenID，返回包如下：
callback( {"client_id":"YOUR_APPID","openid":"YOUR_OPENID"} );Step4：使用Access Token以及OpenID來(lái)訪問(wèn)和修改用戶數(shù)據(jù)
1. 建議網(wǎng)站在用戶登錄后，即調(diào)用get_user_info接口，獲得該用戶的頭像、昵稱并顯示在網(wǎng)站上，使用戶體驗(yàn)統(tǒng)一。
2. 調(diào)用其他OpenAPI，以訪問(wèn)和修改用戶數(shù)據(jù)。所有OpenAPI詳見(jiàn)【QQ登錄】API文檔。
以調(diào)用get_user_info接口為例：
（1）發(fā)送請(qǐng)求到get_user_info的URL（請(qǐng)將access_token，appid等參數(shù)值替換為你自己的）：
https://graph.qq.com/user/get_user_info?access_token=YOUR_ACCESS_TOKEN&oauth_consumer_key=YOUR_APP_ID&openid=YOUR_OPENID
（2）成功返回后，即可獲取到用戶數(shù)據(jù)：
{
"ret":0, "msg":"", "nickname":"YOUR_NICK_NAME", ...
}
3. 示例代碼
下面給出了一個(gè)JavaScript的樣例（只需要按照注釋修改部分代碼即可運(yùn)行）
<head>
<title>Client Flow Example</title>
</head>
<body>
<script>
function callback(user)
{
var userName = document.getElementById('userName');
var greetingText = document.createTextNode('Greetings, '+ user.openid + '.');
userName.appendChild(greetingText);
}
//應(yīng)用的APPID，請(qǐng)改為你自己的
var appID = "YOUR_APP_ID";
//成功授權(quán)后的回調(diào)地址，請(qǐng)改為你自己的
var redirectURI = "http://qzs.qq.com/qzone/openapi/success.html";
//構(gòu)造請(qǐng)求
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.open(url);
}
else
{
//獲取access token
var accessToken = window.location.hash.substring(1);
//使用Access Token來(lái)獲取用戶的OpenID
var path = "https://graph.qq.com/oauth2.0/me?";
var queryParams = [accessToken, 'callback=callback'];
var query = queryParams.join('&');
var url = path + query;
var script = document.createElement('script');
script.src = url;
document.body.appendChild(script);
}
</script>
</body>
</html>
4. 使用JS SDK
為了讓?xiě)?yīng)用更快接入，騰訊提供了JS SDK，應(yīng)用只需引入js腳本，再進(jìn)行少量的代碼修改，即可接入QQ登錄，過(guò)程非常簡(jiǎn)單快速。