OAuth認證
OAuth(開放授權)是一個開放標準,允許使用者授權第三方網站訪問他們儲存在另外的服務提供者上的資訊,而不需要將使用者名稱和密碼提供給第三方網站或分享他們資料的所有內容。OAuth是OpenID的一個補充,但是完全不同的服務。
簡而言之就是:
1. 通過appid獲得accesstoken
2.通過accesstoken獲得openid
3.通過accesstoken和openid調用OpenAPI
體驗一把
1) 頁面中需要插入登入按鈕的位置添加如下html標籤:
<span id="qqLoginBtn"></span>
2)在頁面頂部引入JS SDK庫:將“js?”後面的appid參數(範例程式碼中的:100229030)替換成您自己的appid:
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc.js#appId=100229030" charset="utf-8"></script>
3)HTML頁面中粘貼如下代碼,插入QQ登入按鈕
<div>
其他方式登陸:<span id="qqLoginBtn"></span>
<script type="text/javascript">
QC.Login({
btnId: "qqLoginBtn", //插入按鈕的節點id
size:'C_S'
});
</script>
</div>
login裡的參數:
size : 'C_S',//按鈕樣式,A、B、C為三種樣式, //S、M、L、XL為同一種樣式的不同尺寸,支援如下 : //A_S, A_M, A_L, A_XL; //B_S, B_M, B_L; //C_S; clientId : '222222',//appId scope : '',//授權範圍,可選 'btnMode':'showUserAfterLogin' |
size中的ABC表示表徵圖, SML表示大小
Notice: 感覺QQ的這個API文檔比較混亂(大概是本人水平比較差) 上面的代碼在我的機器上是運行到最後一步會出現錯誤;即登陸--》授權--》返回原介面,理論上應該是顯示頭像和暱稱的,這裡卻沒有顯示。 所以要對開發文檔中的代碼做些調整,如下 在第2步中的js後面可以不用appid,因為我們可以在QC.Login.InsertButton中添加,QC.Login.InsertButton中的代碼添加一些,如下<span id="qqLoginBtn"></span> <script type="text/javascript"> QC.Login.insertButton({ btnId: "qqLoginBtn", size: 'B_M', clientId: '100250988',//填寫自己的appid /*,scope : '',*/ 'btnMode': 'showUserAfterLogin' }); </script> 通過上面的修改就能實現想要的效果了 |
參考:
http://wiki.opensns.qq.com/wiki/%E3%80%90QQ%E7%99%BB%E5%BD%95%E3%80%91Qzone_OAuth%E8%AE%A4%E8%AF%81%E7%AE%80%E4%BB%8B
http://qzonestyle.gtimg.cn/qzone/openapi/js-sdk-demo.html
http://qzs.qq.com/qzone/openapi/client.html