QQ合作账号登录

QQ接入网址：http://wiki.connect.qq.com/网站接入流程
QQ参考：http://connect.qq.com/intro/login/jssdk-demo

实现功能：

  1. 点击QQ登录按钮进行授权

  2. 授权后会转到回调地址页，在回调地址页可以获取用户的openid和用户的信息

 

放置QQ登录按钮：

11.png

用上面这种方法放置登录按钮，无法自定义登录按钮的样式，可以用上面的这种方法放置之后，将生成的代码拷贝下来；拷贝下来的代码如下：

 <span id="qqLoginBtn"><a href="javascript:;" onclick="return window.open('https://graph.qq.com/oauth2.0/authorize?client_id=101298572&amp;response_type=token&amp;scope=all&amp;redirect_uri=http%3A%2F%2Fwww.dasanyafang.com%2Fqc_callback.html', 'oauth2Login_10680' ,'height=525,width=585, toolbar=no, menubar=no, scrollbars=no, status=no, location=yes, resizable=yes');">

                        <img src="/images/icon_01.png" alt="QQ登录" border="0"></a></span>

这样img可以自定义

 

回调地址页：

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title> QQConnect JSDK - redirectURI </title>

    <style type="text/css">

        html, body {

            font-size: 14px;

            line-height: 180%;

        }

    </style>

    <script src="js/jquery-1.10.1.min.js"></script>

    <script>       

        $(function () {

            if (QC.Login.check()) {//如果已登录

                QC.Login.getMe(function (openId, accessToken) {

                    var paras = {};

                    

                    //用JS SDK调用OpenAPI

                    QC.api("get_user_info", paras)

                        //指定接口访问成功的接收函数，s为成功返回Response对象

                        .success(function (s) {

                            //alert("openId:" + openId + ",nickname:" + s.data.nickname);

                            //成功回调，通过s.data获取OpenAPI的返回数据

                            $.ajax({

                                url: "/ashx/MyAshx.ashx?method=SaveQQMember",

                                data: { openid: openId, nickname: s.data.nickname },

                                type: 'post',

                                success: function (result) {

                                    if (result) {

                                        window.opener.location.reload();

                                        window.close();

                                        //window.location.reload();

                                    }

                                }

                            });                           

                        })

                        //指定接口访问失败的接收函数，f为失败返回Response对象

                        .error(function (f) {

                            //失败回调

                            //alert("获取用户信息失败！");

                        })

                        //指定接口完成请求后的接收函数，c为完成请求返回Response对象

                        .complete(function (c) {

                            //完成请求回调

                            //alert("获取用户信息完成！");

                        });

 

                })

            }

        })

 

    </script>

  

</head>

<body>

 

    <div>

        <h3>数据传输中，请稍后...</h3>

    </div>

 

</body>

</html>

 

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="101298572" data-redirecturi="http://www.dasanyafang.com/qc_callback.html" 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>

posted @ 2016-04-20 15:10  ctrlweb  阅读(503)  评论(0)    收藏  举报