2、创建一个空白的html页面 用于回调地址 一条代码即可 qqreturn.htm
3、创建 测试 QQ登录接口页面
<!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>
<title></title>
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/json2.js" type="text/javascript"></script> //引用json转换字符js类库
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"
data-appid="101170280" data-redirecturi="http://www.meihouw.com/qqreturn.htm"
charset="utf-8"></script> //101170280 为appid值 http://www.meihouw.com/qqreturn.htm 为回调地址
</head>
<body>
<span id="qq_login_btn"></span>
<input type="button" value="获取" onclick="getInfo();" />
<hr />
<div id="mes">
</div>
<script type="text/javascript">
QC.Login({//按默认样式插入QQ登录按钮
btnId: "qq_login_btn" //插入按钮的节点id
});
getInfo();
function getInfo() {
if (QC.Login.check()) {
var getInfo_back = document.getElementById("mes");
getInfo_back.innerHTML = "";
QC.api("get_user_info")
.success(function (s) {//成功回调
alert("获取用户信息成功!当前用户昵称为:" + s.data.nickname);
})
.error(function (f) {//失败回调
alert("获取用户信息失败!");
})
.complete(function (c) {//完成请求回调
alert("获取用户信息完成!");
getInfo_back.innerHTML = c.stringifyData();
});
if (QC.Login.check()) {//如果已登录
QC.Login.getMe(function (openId, accessToken) {
alert(["当前登录用户的", "openId为:" + openId, "accessToken为:" + accessToken].join("\n"));
});
//这里可以调用自己的保存接口
//...
}
}
}
</script>
</body>
</html>
4、测试成功之后可以用使用该方法
一、在使用登录接口的页面顶部加上
二、在使用登录的地方加上
<span id="qqLoginBtn_top" class="logins" style="float:left;margin-right:10px;"></span>
<script type="text/javascript">
QC.Login({
btnId: "qqLoginBtn_top" //插入按钮的节点id
}, function (reqData, opts) {
//登录成功
if (QC.Login.check()) {
QC.Login.getMe(function (openId, accessToken) {
var url = "handler/login.ashx?openid=" + openId + "&jsonstr=" + JSON.stringify(reqData);
$.getJSON(url, function (json) {
var html = " 欢迎您,<a href='/user/index.html'><span style='font-weight:bold; color:blue;'>" + json.name + "</span></a>, <a class='exit' href='javascript:QC.Login.signOut();location.reload();'></a>"; //后面个a为退出按钮
$("#qqLoginBtn_top").html(html); //返回的信息
})
});
}
}, function (opts) {
//注销成功
});
</script>
三、创建 login.ashx一般处理程序用于判断用户是否登录,登录过就直接返回信息,第一登录就添加到数据库中再返回信息
context.Response.ContentType = "text/plain";
string openid = context.Request.QueryString["openid"]; // ajax传入来的openid ,数据表中一定要有该字段,即QQ的openid为唯一值
string jsonstr = context.Request.QueryString["jsonstr"]; // ajax传入来的jsonstr字符
DAL.UserDAL dal = new DAL.UserDAL();
Model.User u = dal.GetModelByCond("openid='" + openid + "'");
if (u != null)
{
//用户已存在
string name = u.username;
string qq = u.qq;
string email = u.email;
string face = u.headImg;
//context.Session["user"] = u;
HttpCookie cook;
string roles = "user"; //用户角色
FormsAuthenticationTicket ticket = new FormsAuthenticationTicket(
1, name, DateTime.Now, DateTime.Now.AddMinutes(60), false, roles);
cook = new HttpCookie("mycook");
cook.Value = FormsAuthentication.Encrypt(ticket);
context.Response.Cookies.Add(cook);
//context.Response.Redirect("/index.html");
context.Response.Write(JsonMapper.ToJson(new { name = name, qq = qq, email = email, face = face }));
context.Response.End();
}
else
{
//不存在
JsonData jd = JsonMapper.ToObject(jsonstr);
string name = jd["nickname"].ToString();
string face = jd["figureurl_2"].ToString();
u = new Model.User() { headImg = face, username = name, openid = openid, email = "", qq = "" };
int resid = dal.Add(u); //添加到数据库中
u.id = resid;
// context.Session["user"] = u;
HttpCookie cook;
string roles = "user"; //用户角色
FormsAuthenticationTicket ticket = new FormsAuthenticationTicket(
1, name, DateTime.Now, DateTime.Now.AddMinutes(60), false, roles);
cook = new HttpCookie("mycook");
cook.Value = FormsAuthentication.Encrypt(ticket);
context.Response.Cookies.Add(cook);
//context.Response.Redirect("/index.html");
context.Response.Write(JsonMapper.ToJson(new { name = name, qq = "", email = "", face = face }));
context.Response.End();
}