ASP.NET网站接入QQ互联过程详解

Keywords:

qq互联使用OAuth协议进行登录验证,OAuth(开放授权)是一个开放标准。允许第三方网站在用户授权的前提下访问在用户在服务商那里存储的各种信息。而这种授权无需将用户提供用户名和密码提供给该第三方网站。OAuth允许用户提供一个令牌给第三方网站,一个令牌对应一个特定的第三方网站,同时该令牌只能在特定的时间内访问特定的资源。

基本过程

用户进入我们的网站,点击qq登录链接,网页跳转至qq登录页面,用户qq登录成功跳转到回调网址,这个回调网址是我们注册qq互联时设置的,在回调网址接收qq互联提供的令牌,accessToken和OpenID。然后我们根据这个令牌访问qq服务接口,获取用户信息(返回的是json格式数据),我们需要在网站中加入qq登陆链接,在回调地址获取登陆成功的凭证,并根据凭证访问qq用户信息。

具体实现

asp.net根据上述过程自己写代码,先使用qq互联的js的sdk获取openId和accessToken,然后在回调地址使用get_user_info接口获取数据然后反序列化json得到用户信息。

以下是实现的过程。在这之前,你要去申请一个qq互联的账号,获取appid设置回调地址。我默认你已经走完这一步。

登陆页面A中加入qq登陆按钮。

使用js的sdk加入登陆跳转链接(默认是小图标,可以调大小,想改的去看js说明文档吧),js的sdk填入我们的app-id和回调地址,这两个信息应该与qq互联注册的对应。

                <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101381****" data-redirecturi="http://www.songshizhao.com/account/login.aspx" charset="utf-8"></script>  
                <span id="qqLoginBtn"></span>
                <script type="text/javascript">
                    QC.Login({
                        btnId: "qqLoginBtn"    //插入按钮的节点id
                    });
                    var openId, accessToken;
                    if (QC.Login.check()) {
                        QC.Login.getMe(function (openId, accessToken) {
                            window.location.href = "http://www.songshizhao.com/account/userCenter.aspx?accessToken=" + accessToken +"&openId=" + openId + ""; 
                        })

                    }
                </script>
 QC.Login.getMe(function (openId, accessToken)内部的两个参数是有返回值的回调参数,这一句代码是用户登陆后回调A页面来执行的,获得这两个参数后,我的处理方式是用js跳转到另一个页面B。通过QueryString传值的,把openId, accessToken这两个数据传过去。

下面进入了B页面,B页面用来获取qq用户信息的。首先在load事件里面。获取token和openid(用户唯一ID),然后访问qq互联网址接口,把参数传递过去。返回的字符串是json格式的数据,我们将json反序列化一下(需要按照json的格式建立一个类。),最后把值赋给页面中表格元素。

       protected void Page_Load(object sender, EventArgs e)
        {
            string OpenId = Convert.ToString(Request.QueryString["openId"]);
            string AccessToken = Convert.ToString(Request.QueryString["accessToken"]);

            string InfoUrl = string.Format("https://graph.qq.com/user/get_user_info?access_token={0}&oauth_consumer_key={1}&openid={2}", AccessToken, "101381207", OpenId);
            HttpWebRequest request = (HttpWebRequest)WebRequest.Create(InfoUrl);
            request.Method = "GET";
            request.ContentType = "text/html;charset=UTF-8";
            string JasonString;
            using (HttpWebResponse response = (HttpWebResponse)request.GetResponse())
            {
                Stream myResponseStream = response.GetResponseStream();
                using (StreamReader myStreamReader = new StreamReader(myResponseStream, Encoding.UTF8))
                {
                    JasonString = myStreamReader.ReadToEnd();
                }
            }

            JavaScriptSerializer serializer = new JavaScriptSerializer();
            QQ_User_Info QQ_User = serializer.Deserialize<QQ_User_Info>(JasonString);

            td_openID.InnerText = OpenId;
            td_accessToken.InnerText = AccessToken;
            td_gender.InnerText = QQ_User.gender;
            td_province.InnerText = QQ_User.province;
            td_city.InnerText = QQ_User.city;
            td_year.InnerText = QQ_User.year;
            img1.Src = QQ_User.figureurl;
            img2.Src = QQ_User.figureurl_1;
            img3.Src = QQ_User.figureurl_2;
            img4.Src = QQ_User.figureurl_qq_1;
            img5.Src = QQ_User.figureurl_qq_2;
        }

看一下,返回的json格式如下图是这样的。

建立一个类,就是上文中的qq_user_info,基本上严格按照json格式来建立的,qq互联给出的用户信息只有一层,还是蛮简单的。

    public class QQ_User_Info
    {
        public string ret { get; set; }
        public string msg { get; set; }
        public string is_lost { get; set; }
        public string nickname { get; set; }
        public string gender { get; set; }
        public string province { get; set; }
        public string city { get; set; }
        public string year { get; set; }
        public string figureurl { get; set; }
        public string figureurl_1 { get; set; }
        public string figureurl_2 { get; set; }
        public string figureurl_qq_1 { get; set; }
        public string figureurl_qq_2 { get; set; }
        public string is_yellow_vip { get; set; }
        public string vip { get; set; }
        public string yellow_vip_level { get; set; }
        public string level { get; set; }
        public string is_yellow_year_vip { get; set; }
    }
总结一下:主要是把Oauth2.0授权的过程搞清楚,我是[A页面]-[qq登陆页面]-[回调页面A]-[跳转页面B]这样做的,关键是获取openId, accessToken这两个数据。openid是每个qq用户独有的id,不会改变,推荐保存在网站内记录用户信息,accessToken为qq用户登陆成功的凭证,具有时间限制,用来校验用户登录成功(同一个用户登录不同网站的Token也不会相同)。获取到这两个关键信息则可以在网站后台根据接口得到qq用户信息。



·END·

作者:songshizhao 发表于:2017-03-29T10:41:00 访问量:1618