網站接入QQ登錄(基於ASP.NET)

網站接入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登錄的標誌了,驚不驚喜,意不意外surprise

這個圖標長這樣laugh,現在點擊這個圖標就可以彈出qq登錄的界面了!

3.登錄成功後的一系列操作

在回調的URL上面會提供用戶的openIdaccessTokenopenId可作爲用戶的唯一標示,可以將它儲存在數據庫中,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;
                }
            }
        }
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章