開發(fā)攻略_Client-side
閱讀前提
本開發(fā)攻略適用于使用Implicit Grant方式獲取Access Token的授權(quán)驗(yàn)證流程，適用于需要通過客戶端訪問的方式，例如需要通過瀏覽器的javascript代碼，或者電腦/移動終端上的客戶端訪問時。
閱讀本開發(fā)攻略前，請閱讀【QQ登錄】使用Implicit Grant方式獲取Access Token以了解認(rèn)證流程。
1. 體驗(yàn)一把
1. 瀏覽器訪問：http://qzs.qq.com/qzone/openapi/client.html 。
2. 點(diǎn)擊頁面中的“登錄”按鈕：
3. 在彈出的登錄框中輸入QQ帳號和密碼：
4. 登錄成功后，跳轉(zhuǎn)到指定的回調(diào)地址，URL中帶有Access Token：
2. 快速上手
準(zhǔn)備工作
1. 請確保您的網(wǎng)站已經(jīng)提交接入QQ登錄的申請，并成功獲取到appid和appkey。申請接入
2. 請在你的服務(wù)器上ping openapi.qzone.qq.com ，保證網(wǎng)站和Qzone的連接暢通。
Step1：放置QQ登錄按鈕
網(wǎng)站需要下載“QQ登錄”按鈕圖片，并按照UI規(guī)范將按鈕放置在頁面合適的位置。
按鈕圖標(biāo)下載 按鈕放置規(guī)范
Step2：獲取Access Token
1. 打開瀏覽器，訪問如下地址（請將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)，會彈出提示一個確認(rèn)頁。如果還沒有登錄，會彈出登錄頁，如下圖所示：
3. 成功登錄后，彈出授權(quán)框引導(dǎo)用戶授權(quán)（僅在第一次訪問某個OpenAPI會出現(xiàn)授權(quá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后加“#”號，帶上Access Token以及expires_in等參數(shù)。如果redirect_uri地址后已經(jīng)有“#”號，則加“&”號，帶上相應(yīng)的返回參數(shù)。
例如回調(diào)地址是：www.qq.com，則會跳轉(zhuǎn)到：
http://www.qq.com/?#access_token=YOUR_ACCESS_TOKEN&expires_in=3600
特別提示：
1. 請求時傳入的recirect_uri必須與注冊時填寫的回調(diào)地址一致，用來進(jìn)行第三方應(yīng)用的身份驗(yàn)證。
2. 可通過js方法：window.location.hash來獲取URL中#后的參數(shù)值，詳見下面的示例代碼。
3. 建議用js設(shè)置cookie存儲token。
4. 獲取到的access token具有3個月有效期，用戶再次登錄時自動刷新。
Step3：使用Access Token來獲取用戶的OpenID
1. 發(fā)送請求到如下地址（請將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來訪問和修改用戶數(shù)據(jù)
1. 建議網(wǎng)站在用戶登錄后，即調(diào)用get_user_info接口，獲得該用戶的頭像、昵稱并顯示在網(wǎng)站上，使用戶體驗(yàn)統(tǒng)一。
2. 調(diào)用其他OpenAPI，以訪問和修改用戶數(shù)據(jù)。所有OpenAPI詳見【QQ登錄】API文檔。
以調(diào)用get_user_info接口為例：
（1）發(fā)送請求到get_user_info的URL（請將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. 示例代碼
下面給出了一個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，請改為你自己的
var appID = "YOUR_APP_ID";
//成功授權(quán)后的回調(diào)地址，請改為你自己的
var redirectURI = "http://qzs.qq.com/qzone/openapi/success.html";
//構(gòu)造請求
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來獲取用戶的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
為了讓應(yīng)用更快接入，騰訊提供了JS SDK，應(yīng)用只需引入js腳本，再進(jìn)行少量的代碼修改，即可接入QQ登錄，過程非常簡單快速。