深圳易捷网络科技财税咨询网-neatmaster518.com 返回首页

如何在自己的网站上实现QQ授权登录

信息来源:深圳市易捷网络科技有限公司
信息发布时间:2024/9/17

最近在实现QQ授权登录,现将我的实现过程以及我的理解整理如下。以下所述如有不对之处,请指正。

官方提供的SDK有:JS,PHP,Java。我的网站使用Scala+Play搭建的,所以只能用JS SDk。

AppID:你的应用(网站)的ID。 AppKey:对你的应用的验证。 Redirect_uri:用户确认授权后的回调地址。(需自己设置,有防止别人盗用你的身份获取授权用户信息的作用) OpenID:用户身份的唯一标识。建议保存在本地并与本地创建的uid绑定,以便用户下次登录时可对应到其之前的身份信息,不需要重新授权,使用户体验一致。(获取不到用户的QQ号) AccessToken:表示当前用户在此网站/应用的登录状态与授权信息,建议保存在本地。(相当于token,令牌) Scope:你要获取的信息。

2.准备

注册QQ互联开发者身份

需要去腾讯QQ互联注册:http://connect.qq.com/。

准备好网站

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

创建应用

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

上面的信息,创建好了之后随时可以更改。

网站验证

上图中的网站地址后面的验证,我选择的是在自己网站首页HTML代码的HEAD标签中添加:

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

回调地址可以自己设置一个。我网站首页是http://xjpz.me,因此设置的是http://xjpz.me/blog/test/qcback。

其他的按需填写。

创建了应用可获得AppID与AppKey。

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="http://openapi.qzone.qq.com/oauth/show?which=ConfirmPage&display=pc&response_type=token&client_id=xxxxxxx&redirect_uri=http://xxxx.com&scope=get_user_info">

<img src="/assets/images/Connect_logo_1.png" alt="QQ授权登录 QQ授权登录开发 QQ授权登录管理">

将client_id换成你的AppID,redirect_uri换成你的回调地址。 如果你要获取其他信息或者调用其它接口,请将scope改成你需要的API名或者直接改成 all 。(API列表可查看http://wiki.connect.qq.com/api%E5%88%97%E8%A1%A8)。

我的登录入口样例:

官方资料:

素材与放置规范 或者这个

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

<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.提交

以上完成,自己测试通过,就可以提交腾讯审核。没有审核通过之前只能设置几个账号测试,其他账号无法授权登录。

提交时需注意,

在显要位置放置登录入口。至少在你网站登录页面要放置。我第一次提交时专门做了一个授权登录入口并在应用信息设置里填写了。结果腾讯以"未放置登录入口或放置不规范"为由拒绝。

网站要基本开发完成。我第二次提交,因有未实现的页面,被腾讯以"网站不完善"为由拒绝。然后我把未实现页面入口撤下,审核通过。

更多网络知识及相关网络服务请QQ咨询深圳网站建设公司QQ:2361277551

相关行业资讯

1、要提升站点友好体验度的请先和你的访客做好朋友
2、网站常用的活动类型有哪些
3、分析企业网站建设时容易遇到的几个常见问题
4、网站制作安全问题绝不容忽视
5、如何正确的评估一个网站的价值
6、做网站需要多大空间的服务器
7、H5自助建站系统让企业网站建设更灵活
8、关于网络推广公司做网站排名的价格
9、网站制作浅谈搜索引擎工过程
10、怎样创建网站步骤有哪些
11、百度反向链接考核的标准
12、网站制作好之后如何赢利,都有哪些赢利的途径和方法
13、 做SEO网站优化一定要用心_网站运营_深圳网络公司
14、深圳网站设计报价|门户网站建设有哪些关键点?
15、中小企业网络广告的推广与消除
16、建站优化系列教程(3):程序的选择
17、站内优化不可盲目满足用户需求才是王道
18、用户体验中的用户从何而来
19、10个对SEO的错误认识你了解多少
20、高价值的网站建设是怎样的
21、关键词排名是什么
22、移动端的排名该怎样去做seo优化
23、平台网站建设解决方案
24、什么是SEO内容类型
25、中小型企业网站优化两大误区
26、网站建设公司中网站设计人性化都体现在哪些方面
27、网站建设公司应该怎么挑选
28、手机优化网站方法都有哪些
29、美科技公司要将大脑内容上传到互联网
30、怎么让百度快速的收录网站文章
31、企业网页设计策划需要考虑的因素有哪些
32、儒家中庸之道非常适用于搜索引擎优化
33、高端网站制作的要点有哪些?
34、网站建设中如何明确网站功能
35、网站外部优化之外链怎么做才是最有利的
36、个人对长尾关键词的理解及选择长尾词的优势
37、企业网站设计方案应该包含哪些内容
38、博客制作(如何建立个人独立博客)
39、深圳网站优化|优化网站时对待这些问题不能失去分寸
40、如何3天时间恢复被K的首页,仅限首页被K
41、如何使自己建设的网站更加有优势
42、企业建网站图像
43、说说网络推广的优势体现在哪里
44、网站制作后如何做好后期的日常更新维护
45、网站制作如何选择最佳的网站制作公司
46、为什么网站收录与外链会影响网站排名
47、SEO优化可以给企业带来哪些好处
48、新站迟迟不被百度收录可从3个方面找原因
49、搜索引擎优化该如何做好长尾关键词引流
50、高端营销网站建设如何定位
深圳市易捷网络科技有限公司版权所有    粤ICP备2022153140号