首先,登陸QQ互聯:http://connect.qq.com/intro/login ,註冊成爲開發者javascript
選擇申請加入,並建立你的應用。css
建立成功後能夠獲取到appid和appkeyhtml
在網站的主頁引入下面代碼java
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="APPID" data-redirecturi="REDIRECTURI" charset="utf-8"> </script> api
其中APPID就是你應用的appid,REDIRECTURI則是你註冊應用時填寫的回調地址app
QQ提供了多種快速登陸的方式,這裏只說JS SDK的方式函數
在肯定上面js引入成功後,在頁面合適位置放置下面代碼測試
<span id="qqLoginBtn" ></span>網站
<script type="text/javascript">
QC.Login({
btnId : "qqLoginBtn",//插入按鈕的html標籤id
size : "B_M",//按鈕尺寸
scope : "get_user_info",//展現受權,所有可用受權可填 all
display : "pc"//應用場景,可選
});
</script>ui
此時能夠彈出登陸窗,若是要獲取用戶信息,則須要一個回調頁面,這裏使用的是官方的demo,QQ_callback.html,源碼以下
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title> QQConnect JSDK - redirectURI </title>
<style type="text/css">
html, body{font-size:14px; line-height:180%;}
</style>
</head>
<body>
<div>
<h3>數據傳輸中,請稍後...</h3>
</div>
</body>
</html>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>
在主頁寫入接受回調的js代碼:
<script type="text/javascript">
//從頁面收集OpenAPI必要的參數。get_user_info不須要輸入參數,所以paras中沒有參數
var paras = {};
//用JS SDK調用OpenAPI
QC.api("get_user_info", paras)
//指定接口訪問成功的接收函數,s爲成功返回Response對象
.success(function(s){
console.info(s);
console.info(s.data);
//成功回調,經過s.data獲取OpenAPI的返回數據
alert("獲取用戶信息成功!當前用戶暱稱爲:"+s.data.nickname);
})
//指定接口訪問失敗的接收函數,f爲失敗返回Response對象
.error(function(f){
//失敗回調
alert("獲取用戶信息失敗!");
})
//指定接口完成請求後的接收函數,c爲完成請求返回Response對象
.complete(function(c){
QC.Login.getMe(function(openId, accessToken){
alert("當前登陸用戶的openId爲:"+openId+ " accessToken爲:"+accessToken);
});
//完成請求回調
alert("獲取用戶信息完成!");
});
</script>
騰訊如今不提供用戶的qq號碼,因此只好根據用戶的openid來標示用戶的惟一性。
以上文章內容通過上線項目測試正常。能夠獲取到用戶的暱稱等信息,以及openid