js如何調用qq互聯(lián)api實現(xiàn)第三方登錄
更新時間：2014年03月28日 14:40:50 作者：
這篇文章主要介紹了js如何調用qq互聯(lián)api實現(xiàn)第三方登錄,需要的朋友可以參考下
qq互聯(lián)js SDK：http://wiki.connect.qq.com/js_sdk%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E
<script type=text/javascript>
在頁面header中引入：<script type="text/javascript"
src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
data-appid="appid" data-redirecturi="huidiaodizhi(帶http)"
charset="utf-8"></script>
在body中加入下面信息：
//設置qq分享按鈕
QC.Login(
{
btnId : "qqLoginBtn" //插入按鈕的節(jié)點id
},
function(reqData, opts) {//登錄成功
//根據(jù)返回數(shù)據(jù)，更換按鈕顯示狀態(tài)方法
var dom = document.getElementById(opts['btnId']), _logoutTemplate = [
//頭像
'<span><img src="{figureurl}" class="{size_key}"/></span>',
//昵稱
'<span>{nickname}</span>',
//退出
'<span><a href="javascript:QC.Login.signOut();">退出</a></span>' ]
.join("");
dom
&& (dom.innerHTML = QC.String
.format(
_logoutTemplate,
{
nickname : QC.String
.escHTML(reqData.nickname), //做xss過濾
figureurl : reqData.figureurl
}));
},
function(opts) {//注銷成功
alert("注銷成功！！");
});
//調用api授權
QC.api("get_info", {
"oauth_consumer_key" : "appid" //這個可以不用傳遞
}).success(function(s) {
if (QC.Login.check()) {//檢測是否成功登錄，并彈出openid和accessToken
QC.Login.getMe(function(openId, accessToken) {
alert(openid+" "+accessToken);
});
}
});
</script>
<div class="lib_tiv shadow">
<h3 class="logo">QQ登錄</h3>
</div>
復制代碼 代碼如下:
<script type=text/javascript>
在頁面header中引入：<script type="text/javascript"
src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
data-appid="appid" data-redirecturi="huidiaodizhi(帶http)"
charset="utf-8"></script>
在body中加入下面信息：
//設置qq分享按鈕
QC.Login(
{
btnId : "qqLoginBtn" //插入按鈕的節(jié)點id
},
function(reqData, opts) {//登錄成功
//根據(jù)返回數(shù)據(jù)，更換按鈕顯示狀態(tài)方法
var dom = document.getElementById(opts['btnId']), _logoutTemplate = [
//頭像
'<span><img src="{figureurl}" class="{size_key}"/></span>',
//昵稱
'<span>{nickname}</span>',
//退出
'<span><a href="javascript:QC.Login.signOut();">退出</a></span>' ]
.join("");
dom
&& (dom.innerHTML = QC.String
.format(
_logoutTemplate,
{
nickname : QC.String
.escHTML(reqData.nickname), //做xss過濾
figureurl : reqData.figureurl
}));
},
function(opts) {//注銷成功
alert("注銷成功！！");
});
//調用api授權
QC.api("get_info", {
"oauth_consumer_key" : "appid" //這個可以不用傳遞
}).success(function(s) {
if (QC.Login.check()) {//檢測是否成功登錄，并彈出openid和accessToken
QC.Login.getMe(function(openId, accessToken) {
alert(openid+" "+accessToken);
});
}
});
</script>
<div class="lib_tiv shadow">
<h3 class="logo">QQ登錄</h3>
</div>
相關文章
這篇文章主要介紹了微信小程序學習筆記之文件上傳、下載操作,結合實例形式分析了微信小程序圖片文件傳輸?shù)脑?、步驟及后臺php操作相關實現(xiàn)技巧,并結合圖文形式予以詳細說明,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了webpack分離css單獨打包的方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-06-06
本篇文章主要介紹了JS打開攝像頭并截圖上傳示例，詳細JS打開攝像頭并截圖上傳至后端的一個完整步驟，有興趣的同學可以了解一下。2017-02-02
WXS是小程序的一套腳本語言,結合 WXML,wxs類似js和js又不一樣,好多js語法能在js使用不能在wxs使用可以構建出頁面的結構,這篇文章主要給大家介紹了關于微信小程序實戰(zhàn)教程之WXS語法詳解的相關資料,需要的朋友可以參考下2024-09-09
這篇文章主要給大家介紹了關于基于three.js編寫的一個項目類的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧。2018-01-01
JavaScript?中如何攔截全局?Fetch?API?的請求和響應問題
在本文中，我們介紹了什么是 JavaScript 攔截器，學習了如何通過給 Fetch API 使用猴子補丁和使用 fetch-intercept 庫來創(chuàng)建攔截器，對js攔截全局Fetch?API的請求和響應知識感興趣的朋友跟隨小編一起看看吧2023-01-01
這篇文章將深入探討閉包和內存泄漏之間的關系，并通過具體的代碼案例來證明閉包并不必然導致內存泄漏，感興趣的小伙伴可以跟隨小編一起了解一下2023-06-06
本篇文章主要介紹了詳解Javascript獲取緩存和清除緩存API，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-05-05
背景：很久之前就在marry5.com看到這個效果，當時覺得很神奇，礙于水平有限，沒做出來。2008-09-09
JavaScript操作Oracle數(shù)據(jù)庫示例
這篇文章主要介紹了JavaScript操作Oracle數(shù)據(jù)庫示例,本文使用ActiveXObject實現(xiàn)訪問Oracle數(shù)據(jù)庫,需要的朋友可以參考下2015-03-03