您好,登錄后才能下訂單哦!
如果想讓網站實現QQ登錄功能,前提是網站要具備api的接口,如果沒有這個接口,那就很難實現這個功能了。
網站QQ登錄功能,是通過接入QQ登錄,用戶可以使用QQ賬號直接登錄接入的站點,從而可以達到無需注冊也能登錄成為網站用戶。快速方便有效,可大大提高網站的用戶注冊數量,提升網站人氣。
下面小編就告訴大家,實現這個功能的操作方法。
1
首先在百度上搜索【QQ登錄】,然后進入一個名為【QQ登錄-QQ互聯】的網站。
或者是搜索”QQ開發開發平臺“或者直接打開:http://connect.qq.com/
在網頁右上角,點擊【登錄】,登錄自己的QQ賬號。
登錄完成后在頁面左邊,點擊【申請加入】。
這里認真填寫開發者的申請信息,并點擊【注冊】,完成注冊。
注冊完成后,在管理中心右上角位置,點擊【創建應用】。在彈出的窗口中選擇應用的平臺,我這里就以電腦平臺作為演示。
這里就對應填寫網站信息就可以了,不過我重點講一下回調地址。回調地址很多人都不知道是什么也不會填,其實只要填寫不帶http://的地址就可以了。然后把鼠標放到【驗證】這里,會彈出一條代碼,我們把這條代碼復制起來。
然后用FTP打開網站源碼,找到網站頭部文件,把這條代碼放到【<head>與</head>之間】。然后保存起來,再回到剛才復制代碼的位置點擊【開始驗證】。
驗證成功后,我們發現還需要審核,而現在還不能提交審核,原因是還沒有添加圖片素材,我們點擊添加【圖片素材】。
在圖片素材時,對應上傳相同大小的圖片素材。注意:這里的圖片素材,最好選擇網站的LOGO,因為在用戶使用QQ登錄時,這些圖片會展現在右下角彈出的窗口中。
上傳好圖片素材后,我們單擊頂部菜單欄中的【管理中心】,在管理中心下面,先點擊【未審核】,然后再未審核的應用里再點擊應用名稱,進入該應用。
進入該應用后,我們便可點擊【提交申請】。點擊提交申請后,會彈出一個提示窗口,提示我們是否確認提交,我們選擇【確認提交】。
等待審核成功,在審核期間,我們就可以先把APP ID和APP KEY填到網站上。在頁面左上角我們可以看到APP ID的信息,復制他們,然后到網站后臺填寫上去,大功告成!
上面是獲取appid和appkey:
下面是實現源碼:
登錄頁面:
<!--start QQ登錄-->
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101240479" data-redirecturi="http://www.baby0898.com" charset="utf-8"></script>
<!--head引用的js文件 data-appid即是你申請的appid,data-redirecturi:是你網址-->
<!--data-appid:即是申請獲取到的appid,data-redirecturi:即是申請時填寫的回調地址-->
<span id="qqLoginBtn"></span>
<script type="text/javascript">
var cbLoginFun = function (oInfo, oOpts) {
//alert(oInfo.nickname); // 昵稱
//alert(oOpts.btnId); // 點擊登錄的按鈕Id
window.location. + escape(oInfo.nickname) + "&figureurl=" + escape(oInfo.figureurl);
};
QC.Login({ btnId: "qqLoginBtn", size: "C_S" }, cbLoginFun);
</script>
<!--end QQ登錄-->
default.aspx頁面:
<!--begin QQ 登錄-->
<script type="text/javascript"
src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script><!--head引用的js文件-->
<div id="QQLogin">
<span id="QQnickName">游客</span>
<span id="QQID">請登錄</span>
<span id="QQExit"><a href="javascript:QC.Login.signOut();">退出</a></span><!--退出登錄-->
</div>
<script type="text/javascript">
//獲取url參數
function getQueryString(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
var r = window.location.search.substr(1).match(reg);
if (r != null) return unescape(r[2]); return null;
}
window.onload = function () {
var name = getQueryString("nickname"); //獲取QQ登錄后的昵稱
var figureurl = getQueryString("figureurl"); //獲取QQ登錄后圖像
$("#QQnickName").html(name);
}
//判斷QQ是否已經登錄,獲取QQ登錄的唯一ID標識
if (QC.Login.check()) {//如果已登錄
//向“后臺”請求數據
//alert("歡迎登錄");
QC.Login.getMe(function (openId, accessToken) {
//alert(openId);//openId是用戶身份的唯一標識
$("#QQID").html(openId);
});
} else {
$("#QQLogin").hide();
}
</script>
<!--end QQ 登錄-->
具體步驟參考官網:http://wiki.connect.qq.com/js_sdk%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E
也可以參考:http://blog.csdn.net/wowkk/article/details/17315637
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。