QQ受权登陆

时间 2019-11-26

标签受权登陆栏目腾讯繁體版

原文原文链接

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

准备javascript

注册QQ互联开发者身份java

须要去腾讯QQ互联注册：https://connect.qq.com/。api

准备好网站cookie

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

建立应用post

在QQ互联管理中心建立应用。测试
部署测试网站

添加登陆入口ui

在登陆页面<head></head>中引入：spa

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

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

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

3.回调页面

和登陆入口同样

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

设置回调页面

<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>

4.后台处理步骤：

- //判断openid是否存在。

- // 若是openid存在，则说明此用户以前登陆过或者已与本地user表中的用户绑定。写入cookie，使用户为登陆状态，到此结束。

- //若是用户openid不存在，则判断用户名是否存在。

- //若是用户名不存在，则直接生成新的本地用户，并绑定uid与openid。写入cookie，使用户为登陆状态，到此结束。

- //若是用户名存在，提醒用户是否验证并与之绑定。若是用户选择验证，并验证经过，则与之绑定。写入cookie，使用户为登陆状态，到此结束。

- //若是用户放弃验证，或者验证失败，则生成新的本地用户，并生成新的用户名，绑定uid与openid。写入cookie，使用户为登陆状态，到此结束。