在本身的网站上实现QQ受权登陆

时间 2019-12-09

标签本身网站实现受权登陆栏目网站开发繁體版

原文原文链接

最近在实现QQ受权登陆，现将个人实现过程以及个人理解整理以下。如下所述若有不对之处，请指正。javascript

官方提供的SDK有：JS，PHP，Java。个人网站使用Scala+Play搭建的，因此只能用JS SDk。css

1.关键词

AppID：你的应用(网站)的ID。
AppKey：对你的应用的验证。
Redirect_uri：用户确认受权后的回调地址。(需本身设置，有防止别人盗用你的身份获取受权用户信息的做用)
OpenID：用户身份的惟一标识。建议保存在本地并与本地建立的uid绑定，以便用户下次登陆时可对应到其以前的身份信息，不须要从新受权，使用户体验一致。(获取不到用户的QQ号)
AccessToken：表示当前用户在此网站/应用的登陆状态与受权信息，建议保存在本地。(至关于token，令牌)
Scope：你要获取的信息。

2.准备

注册QQ互联开发者身份

须要去腾讯QQ互联注册。html

准备好网站

网站要基本开发完成。网站域名，Logo等都有。java

建立应用

在QQ互联管理中心建立应用。jquery

上面的信息，建立好了以后随时能够更改。api

网站验证

上图中的网站地址后面的 验证 ，我选择的是在本身网站首页HTML代码的HEAD标签中添加：缓存

<meta property="qc:admins" content="你的验证信息" />

回调地址能够本身设置一个。我网站首页是http://xjpz.me,所以设置的是http://xjpz.me/blog/test/qcback。服务器

其余的按需填写。cookie

建立了应用可得到AppID与AppKey。app

3.部署测试

添加登陆入口

引入JS SDK 文件：
在登陆页面<head></head>中引入：

<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="APPID" data-redirecturi="REDIRECTURI" charset="utf-8"></script>

将APPID 换成你本身的APPID，REDIRECTURI换成你本身设置的回调地址。

放置QQ图标(下面有素材地址)，设置图标超连接地址：

<a href="https://graph.qq.com/oauth/show?which=ConfirmPage&display=pc&client_id="APPID"&response_type=token&scope=all&redirect_uri="REDIRECTURI"&scope=get_user_info">

将client_id换成你的AppID，redirect_uri换成你的回调地址。
若是你要获取其余信息或者调用其它接口，请将scope改为你须要的API名或者直接改为 all 。(附API列表)。

个人登陆入口样例：

官方资料：

这里是官网文档
素材与放置规范或者这个

官方提供的登陆按钮代码，可直接将代码贴到你想要放置入口的位置就行：

<span id="qqLoginBtn"></span>
 <script type="text/javascript">
     QC.Login({
        btnId:"qqLoginBtn"    //插入按钮的节点id
 });
 </script>

设置回调页面

一样须要引入JS SDK 文件，参照上面。
用JS SDK协助调用OpenAPI的get_user_info方法，获取用户头像、用户名等基础信息。

个人回调页面代码以下：

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

        <title> QQConnect JSDK - redirectURI </title>

        <script src="/assets/javascripts/jquery.min.js"></script>

        <script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="xxxxxxx" data-redirecturi="http://xxxx.com/xxxxx" charset="utf-8"></script>

        <style type="text/css">
        html, body{font-size:14px; line-height:180%;}
        </style>

    </head>
    <body onload="getInfo()">

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

    </body>
</html>

<script type="text/javascript">
            function getInfo() {
                if(QC.Login.check()){
                    QC.api("get_user_info")
                        .success(function(s){//成功回调
                            QC.Login.getMe(function(openId, accessToken){
                                $.post('/你的后台处理Action',{name:s.data.nickname,openid:openId,otype:1,token:accessToken},function(data,status){
                                    if(status=="success"){
                                        alert(s.data.nickname+"恭喜你,登陆成功!");
                                        location.href = "/";
                                    }else{
                                        alert("获取用户信息成功！登陆失败！");
                                        location.href = "/blog/to/login";
                                    }
                                })
                            })
                        })
                        .error(function(f){//失败回调
                            alert("获取用户信息失败！登陆失败！");
                            location.href = "/blog/to/login";
                        })
                        .complete(function(c){//完成请求回调
                        //  alert("获取用户信息完成！");
                        });
                }else{
                    alert("请登陆！");
                    location.href = "/blog/to/login";
                }
            }
</script>

说明，

- 引入的`JS SDK`文件中的`data-appid` 和 `data-redirecturi` 一样须要改成你的AppID 和回调地址。

- 受权成功后`Openid`和`token`会缓存在本地。可经过`QC.Login.getMe(function(openId, accessToken){}` 获取。

- 回调成功后，我这里把用户名和openid提交给服务器，保存在本地，使用户体验一致。即`$.post(){}`方法，你须要换成你服务端的Action。

- 服务器处理成功后重定向到网站首页。受权登陆结束。

为了方便用户，用户受权成功后，我并无再继续让用户输入邮箱、密码等。若是再让用户输入一遍，那和直接注册有什么区别？那样受权登陆基本就失去了意义。

顺便贴一下我后台处理步骤：

- //判断openid是否存在。
 
 - // 若是openid存在，则说明此用户以前登陆过或者已与本地user表中的用户绑定。写入cookie，使用户为登陆状态，到此结束。
 
 - //若是用户openid不存在，则判断用户名是否存在。
 
 - //若是用户名不存在，则直接生成新的本地用户，并绑定uid与openid。写入cookie，使用户为登陆状态，到此结束。
   
 - //若是用户名存在，提醒用户是否验证并与之绑定。若是用户选择验证，并验证经过，则与之绑定。写入cookie，使用户为登陆状态，到此结束。
   
 - //若是用户放弃验证，或者验证失败，则生成新的本地用户，并生成新的用户名，绑定uid与openid。写入cookie，使用户为登陆状态，到此结束。

4.提交

以上完成，本身测试经过，就能够提交腾讯审核。没有审核经过以前只能设置几个帐号测试，其余帐号没法受权登陆。

提交时需注意，

在显要位置放置登陆入口。至少在你网站登陆页面要放置。我第一次提交时专门作了一个受权登陆入口并在应用信息设置里填写了。结果腾讯以"未放置登陆入口或放置不规范"为由拒绝。
网站要基本开发完成。我第二次提交，因有未实现的页面，被腾讯以"网站不完善"为由拒绝。而后我把未实现页面入口撤下，审核经过。