首页 > 代码库 > QQ绑定账号登陆(from www.sysoft.cc)

QQ绑定账号登陆(from www.sysoft.cc)

QQ第三方登录的应用
现在这种第三方登录的应用很广泛也很方便。省得用户进行注册了。现在把QQ登录的方法和步骤记录一下,以备使用时方便。

   第一步,到http://connect.qq.com/intro/login/这里去申请QQ登录,添加自己的信息。按步骤来就行。要说的一点是什么呢,就是回调地址,这里只要写域名就行,别的什么都不用,而且你添写主域名之后,子域名也能用,格式一般是这样的,www.sohu.com这种格式的,注意一点是前面不要有http://。

       申请成功之后,你会得到一个APP ID和一个key了。只有这二个值都在,你才可以进行后面的步骤。

   第二步,申请完成之后,你就需要在你的网站页面中加上相应的登录按钮与回调页面参数了。

       这里先说一下回调页面,从字面上就很好理解,就是登录QQ之后,QQ给你返回值的接收页面,这个页面可以是一个单独的页面,也可以和登录页面是一个。

       QQ为我们提供了最简单了JSSDK。我们只要简单的调用一下就行了。

       1,在需要加入QQ登录按钮的页面引入JS SDK库

        

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js"   
 data-appid="APPID" data-redirecturi="REDIRECTURI" charset="utf-8">  
</script>  
         上面这代码,放到<head></head>之间
         这里的data-appid就是你申请的appid把它写进去,data-redirecturi这个就是回调页面的地址。一般写法如下http://www.sohu.com/Default.aspx这个default.aspx页面就是接收QQ登录之后给的返回值的页面,当然了,你的登录页面和返回页面也可以是一个

 

       2,  请在html页面需要插入QQ登录按钮的位置,粘贴如下示例代码

         

<span id="qq_login_btn"></span>  
<script type="text/javascript">  
 QC.Login({//按默认样式插入QQ登录按钮  
btnId:"qq_login_btn"    //插入按钮的节点id  
 });  
</script>  

        这里QQ给了一个已经定义好的QQ登录按钮,当然了,你也可以自己去定义http://wiki.opensns.qq.com/wiki/%E3%80%90QQ%E7%99%BB%E5%BD%95%E3%80%91JS_SDK%E4%BD%BF%E7%94%A8%E8%AF%B4%E6%98%8E#3._.E8.87.AA.E5.AE.9A.E4.B9.89.E7.99.BB.E5.BD.95.E6.8C.89.E9.92.AE这个地址是告诉你如何自定义一个和你网站风格一样的登录按钮

 

 

       到这里,你的登录页面,添加的东西就OK了,下面来看一下你的回调页面

   第三步,回调页面的处理

       1, JS SDK的回调地址页,在回调地址页面插入如下示例代码       

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>  
          和第二步里的一样,把这代码放到<head></head>这间

 

       2, 就是调用相JS SDK相应的方法,来取得你要知道的信息了,一般来讲,我们想要得到的信息,最多就是用户昵称和用户登录成功之后,QQ给我们返回的用户唯一标识。我们只要得到这二个值,就一切都好办了。

      得到昵称                         

<script type="text/javascript">  
//从页面收集OpenAPI必要的参数。get_user_info不需要输入参数,因此paras中没有参数  
var paras = {};  
  
//用JS SDK调用OpenAPI  
QC.api("get_user_info", paras)  
    //指定接口访问成功的接收函数,s为成功返回Response对象  
    .success(function(s){  
        //成功回调,通过s.data获取OpenAPI的返回数据  
        alert("获取用户信息成功!当前用户昵称为:"+s.data.nickname);  
    })  
    //指定接口访问失败的接收函数,f为失败返回Response对象  
    .error(function(f){  
        //失败回调  
        alert("获取用户信息失败!");  
    })  
    //指定接口完成请求后的接收函数,c为完成请求返回Response对象  
    .complete(function(c){  
        //完成请求回调  
        alert("获取用户信息完成!");  
    });  
</script>  
          获取openId 与 accessToken:

 

          用户通过“QQ登录”登录成功后,可以调用示例代码取到openId与accessToken

           openId是用户身份的唯一标识,可以保存在本地,以便用户下次登录时可对应到其之前的身份信息,不需要重新授权。                        accessToken是表示当前用户在此网站/应用的登录状态与授权信息,也可以保存在本地。

 

<script type="text/javascript">  
if(QC.Login.check()){//如果已登录  
    QC.Login.getMe(function(openId, accessToken){  
        alert(["当前登录用户的", "openId为:"+openId, "accessToken为:"+accessToken].join("\n"));  
    });  
    //这里可以调用自己的保存接口  
    //...  
}  
</script>  

下面是我做测试的一个页面。代码
 

Default.aspx

 

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WirelessCity_Web.Default" %>  
  
<!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 runat="server">  
    <title></title>  
    <script src="http://www.mamicode.com/js/jquery-1.4.2.js" type="text/javascript"></script>  
    <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="100359262" data-redirecturi="http://b.am89.com/Default.aspx" charset="utf-8"></script>   
    <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" charset="utf-8" data-callback="true"></script>  
</head>  
<body>  
    <form id="form1" runat="server">  
          
              
              
  
<span id="qqLoginBtn"></span>  
<script type="text/javascript">  
    QC.Login({  
        btnId: "qqLoginBtn" //插入按钮的节点id  
  
    });  
      
      
  
</script>  
  
<script type="text/javascript">  
    //从页面收集OpenAPI必要的参数。get_user_info不需要输入参数,因此paras中没有参数  
    var paras = {};  
  
    //用JS SDK调用OpenAPI  
    QC.api("get_user_info", paras)  
    //指定接口访问成功的接收函数,s为成功返回Response对象  
    .success(function(s) {  
        //成功回调,通过s.data获取OpenAPI的返回数据  
        alert("获取用户信息成功!当前用户昵称为:" + s.data.nickname);  
    })  
    //指定接口访问失败的接收函数,f为失败返回Response对象  
    .error(function(f) {  
        //失败回调  
        alert("获取用户信息失败!");  
    })  
    //指定接口完成请求后的接收函数,c为完成请求返回Response对象  
    .complete(function(c) {  
        //完成请求回调  
        alert("获取用户信息完成!");  
    });  
</script>  
  
<script type="text/javascript">  
    if (QC.Login.check()) {//如果已登录  
        QC.Login.getMe(function(openId, accessToken) {  
            alert(["当前登录用户的", "openId为:" + openId, "accessToken为:" + accessToken].join("\n"));  
            $("#hidopenId").attr("value", openId);  
            $("#hidaccessToken").attr("value", accessToken);  
        });  
        //这里可以调用自己的保存接口  
        //...  
    }  
  
    function ContAdd() {  
        var openId = $("#hidopenId").val();  
        var accessToken = $("#hidaccessToken").val();  
  
        $.ajax({  
            type: "POST",  
            url: "ajaxbackInfo.aspx",  
            data: "openId=" + openId + "&accessToken=" + accessToken + "",  
            success: function(result) {  
                alert("aa" + result);  
            }  
        });  
    }  
</script>  
  
  
        </div>  
          
        <asp:HiddenField ID="hidopenId" runat="server" />  
        <asp:HiddenField ID="hidaccessToken" runat="server" />  
    <br />  
    <input type="button" value="http://www.mamicode.com/提 交" id="btnSubmit" onclick="ContAdd();" />  
    </form>  
</body>  
</html>  

ajaxbackInfo.aspx

 

 

[csharp] view plaincopy
 
using System;  
using System.Collections.Generic;  
using System.Linq;  
using System.Web;  
using System.Web.UI;  
using System.Web.UI.WebControls;  
  
namespace WirelessCity_Web  
{  
    public partial class ajaxbackInfo : System.Web.UI.Page  
    {  
        protected void Page_Load(object sender, EventArgs e)  
        {  
            string openId = Request.Form["openId"] ?? Request.QueryString["openId"];  
            string accessToken = Request.Form["accessToken"] ?? Request.QueryString["accessToken"];  
  
            Response.Write("openid:" + openId + "        accessToken:" + accessToken);  
            Response.End();  
        }  
    }  
}  
 

QQ绑定账号登陆(from www.sysoft.cc)