js如何調(diào)用qq互聯(lián)api實(shí)現(xiàn)第三方登錄
更新時(shí)間：2014年03月28日 14:40:50 作者：
這篇文章主要介紹了js如何調(diào)用qq互聯(lián)api實(shí)現(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>
在頁(yè)面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中加入下面信息：
//設(shè)置qq分享按鈕
QC.Login(
{
btnId : "qqLoginBtn" //插入按鈕的節(jié)點(diǎn)id
},
function(reqData, opts) {//登錄成功
//根據(jù)返回?cái)?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過(guò)濾
figureurl : reqData.figureurl
}));
},
function(opts) {//注銷成功
alert("注銷成功?。?);
});
//調(diào)用api授權(quán)
QC.api("get_info", {
"oauth_consumer_key" : "appid" //這個(gè)可以不用傳遞
}).success(function(s) {
if (QC.Login.check()) {//檢測(cè)是否成功登錄，并彈出openid和accessToken
QC.Login.getMe(function(openId, accessToken) {
alert(openid+" "+accessToken);
});
}
});
</script>
<div class="lib_tiv shadow">
<h3 class="logo">QQ登錄</h3>
</div>
復(fù)制代碼 代碼如下:
<script type=text/javascript>
在頁(yè)面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中加入下面信息：
//設(shè)置qq分享按鈕
QC.Login(
{
btnId : "qqLoginBtn" //插入按鈕的節(jié)點(diǎn)id
},
function(reqData, opts) {//登錄成功
//根據(jù)返回?cái)?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過(guò)濾
figureurl : reqData.figureurl
}));
},
function(opts) {//注銷成功
alert("注銷成功?。?);
});
//調(diào)用api授權(quán)
QC.api("get_info", {
"oauth_consumer_key" : "appid" //這個(gè)可以不用傳遞
}).success(function(s) {
if (QC.Login.check()) {//檢測(cè)是否成功登錄，并彈出openid和accessToken
QC.Login.getMe(function(openId, accessToken) {
alert(openid+" "+accessToken);
});
}
});
</script>
<div class="lib_tiv shadow">
<h3 class="logo">QQ登錄</h3>
</div>
相關(guān)文章
微信小程序?qū)W習(xí)筆記之文件上傳、下載操作圖文詳解
這篇文章主要介紹了微信小程序?qū)W習(xí)筆記之文件上傳、下載操作,結(jié)合實(shí)例形式分析了微信小程序圖片文件傳輸?shù)脑?、步驟及后臺(tái)php操作相關(guān)實(shí)現(xiàn)技巧,并結(jié)合圖文形式予以詳細(xì)說(shuō)明,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了webpack分離css單獨(dú)打包的方法，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-06-06
本篇文章主要介紹了JS打開攝像頭并截圖上傳示例，詳細(xì)JS打開攝像頭并截圖上傳至后端的一個(gè)完整步驟，有興趣的同學(xué)可以了解一下。2017-02-02
微信小程序?qū)崙?zhàn)教程之WXS語(yǔ)法詳解
WXS是小程序的一套腳本語(yǔ)言,結(jié)合 WXML,wxs類似js和js又不一樣,好多js語(yǔ)法能在js使用不能在wxs使用可以構(gòu)建出頁(yè)面的結(jié)構(gòu),這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崙?zhàn)教程之WXS語(yǔ)法詳解的相關(guān)資料,需要的朋友可以參考下2024-09-09
基于three.js編寫的一個(gè)項(xiàng)目類示例代碼
這篇文章主要給大家介紹了關(guān)于基于three.js編寫的一個(gè)項(xiàng)目類的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2018-01-01
JavaScript?中如何攔截全局?Fetch?API?的請(qǐng)求和響應(yīng)問(wèn)題
在本文中，我們介紹了什么是 JavaScript 攔截器，學(xué)習(xí)了如何通過(guò)給 Fetch API 使用猴子補(bǔ)丁和使用 fetch-intercept 庫(kù)來(lái)創(chuàng)建攔截器，對(duì)js攔截全局Fetch?API的請(qǐng)求和響應(yīng)知識(shí)感興趣的朋友跟隨小編一起看看吧2023-01-01
這篇文章將深入探討閉包和內(nèi)存泄漏之間的關(guān)系，并通過(guò)具體的代碼案例來(lái)證明閉包并不必然導(dǎo)致內(nèi)存泄漏，感興趣的小伙伴可以跟隨小編一起了解一下2023-06-06
本篇文章主要介紹了詳解Javascript獲取緩存和清除緩存API，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-05-05
背景：很久之前就在marry5.com看到這個(gè)效果，當(dāng)時(shí)覺(jué)得很神奇，礙于水平有限，沒(méi)做出來(lái)。2008-09-09
JavaScript操作Oracle數(shù)據(jù)庫(kù)示例
這篇文章主要介紹了JavaScript操作Oracle數(shù)據(jù)庫(kù)示例,本文使用ActiveXObject實(shí)現(xiàn)訪問(wèn)Oracle數(shù)據(jù)庫(kù),需要的朋友可以參考下2015-03-03