網站接入QQ登錄(基於ASP.NET)
首先去QQ互聯官網申請成爲開發者,官網網址https://connect.qq.com
申請成功後在首頁找到網站應用接入,填寫完成信息後,會進行審覈,審覈完成後會給你一個APPID,這時候就可以 進行網站的接入了。
1.首先在你網站的<head></head>直接引入JS
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="你的APPID" data-redirecturi="你申請時候填寫的回調地址" charset="utf-8"></script>
<script type="text/javascript">
QC.Login({
btnId:"qqLoginBtn" //插入按鈕的節點id
});
注意:回調地址必須以http或https開頭。
2.放置QQ登錄的圖標
<spanid="qqLoginBtn"></span>
現在打開網站就可以看到QQ登錄的標誌了,驚不驚喜,意不意外
這個圖標長這樣,現在點擊這個圖標就可以彈出qq登錄的界面了!
3.登錄成功後的一系列操作
在回調的URL上面會提供用戶的openId和accessToken,openId可作爲用戶的唯一標示,可以將它儲存在數據庫中,accessToken是過期時間。登錄成功後執行下面的函數;
cbLoginFun(oInfo,oOpts)oInfo的參數:當前登錄用戶的基本信息,即OpenAPI中get_user_info返回的數據。
oInfo的參數我們通過QC.Login.getMe(function (openId, accessToken)來獲取 下面是例子:
window.onload = QC.Login.getMe(function (openId, accessToken) {
oOpts: {
appId: "你的appid在QQ互連官網查詢"
openId: openId
accessToken: accessToken
}
然後在執行cbLoginFun(oInfo,oOpts)函數
例子如下:
var cbLoginFun = function (oInfo, oOpts) {
$.ajax({
url: "../Index/qqLogin",
type: "Post",
data: { "openId": [openId], "accessToken": [accessToken], "qqname": [oInfo.nickname], "isqqlogin": [1], "qqimg":
[oInfo.figureurl_qq_2] }
});
};
這裏使用AJAX異步請求url地址對應的請求的後臺地址,data裏面是給後臺傳的參數,oInfo.nickname 指的是獲取當前用戶的QQ暱稱
oInfo.figureurl_qq_2] 指的是獲取當前用戶的QQ頭像 100*100格式的
後臺代碼如下:
public void qqLogin(string openId, string accessToken, string qqname, string isqqlogin, string qqimg)//qq登錄後將openId,accessToken,qqname,qqimg存在數據庫
{
if (isqqlogin == "1")
{
string ckqqusername = "select username from msg where name=@name";
string qqusername =
(string)SqlHelper.ExecuteScalar(ckqqusername, new SqlParameter("@name", qqname));
try
{
string addQQMsg = "insert into QQLoginMsg values(@openId,@accessToken,@qqname,@qqimg)";
SqlHelper.ExecuteNonQuery(addQQMsg, new SqlParameter("@openId", openId),
new SqlParameter("@accessToken", accessToken), new SqlParameter("@qqname", qqname), new SqlParameter("@qqimg",
qqimg));
train.qqimg = qqimg;
train.qqislogin = isqqlogin;
}
catch (Exception)//執行失敗證明用戶不是第一次登錄
{
train.qqimg = qqimg;
train.qqislogin = isqqlogin;
}
}
}
到這裏基本上大功告成了,快去嘗試下吧,部分代碼如下:
前臺部分代碼:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>網站接入QQ登錄</title>
</head>
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101420006" data-redirecturi="http://lovecry.wang"
charset="utf-8"></script>
<body>
<script type="text/javascript">
QC.Login({
btnId:"qqLoginBtn" //插入按鈕的節點id
});
</script>
<script type="text/javascript"
src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>
<div style="width:397px; background-color:#fcfcfc">
<span id="qqLoginBtn"></span>
</html>
後臺部分代碼:
public void qqLogin(string openId, string accessToken, string qqname, string isqqlogin, string qqimg)//qq登錄後將openId,accessToken,qqname,qqimg存在數據庫
{
if (isqqlogin == "1")
{
string ckqqusername = "select username from msg where name=@name";
string qqusername =
(string)SqlHelper.ExecuteScalar(ckqqusername, new SqlParameter("@name", qqname));
try
{
string addQQMsg = "insert into QQLoginMsg values(@openId,@accessToken,@qqname,@qqimg)";
SqlHelper.ExecuteNonQuery(addQQMsg, new SqlParameter("@openId", openId),
new SqlParameter("@accessToken", accessToken), new SqlParameter("@qqname", qqname), new SqlParameter("@qqimg", qqimg));
train.qqimg = qqimg;
train.qqislogin = isqqlogin;
}
catch (Exception)//執行失敗證明用戶不是第一次登錄
{
train.qqimg = qqimg;
train.qqislogin = isqqlogin;
}
}
}