首先去QQ互联官网申请成为开发者,官网网址https://connect.qq.com
申请成功后在首页找到网站应用接入,填写完成信息后,会进行审核,审核完成后会给你一个APPID,这时候就可以 进行网站的接入了。
<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开头。
<spanid="qqLoginBtn"></span>
现在打开网站就可以看到QQ登录的标志了,惊不惊喜,意不意外
这个图标长这样,现在点击这个图标就可以弹出qq登录的界面了!
在回调的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;
}
}
}
原文主页:http://lovecry.wang 原文链接:http://lovecry.wang/Original/details?random=e8a73258-54d2-420d-b07a-fd339438c5d7