网站接入qq登录及本地测试方法
网站首页 文章专栏 网站接入qq登录及本地测试方法
网站接入qq登录及本地测试方法
编辑时间:2019-05-06 18:11 作者:毛毛小妖 浏览量:478 评论数:0

给自己的网站接入第三方登录,比如qq登录,不仅可以简化自己网站的登陆实现,还能依托qq平台强大的用户量来为自己网站引流,可谓百利而无一害。但是新手很容易踩很多坑,我就是踩着坑一步一步过来的,希望通过这篇文章能让更多的小伙伴们避开一些坑。其实官网有详细的文档供我们参考:http://http://wiki.connect.qq.com/准备工作_oauth2-0,这里我梳理一下整个过程。

1、完善自己的qq开发者账号资料

使用自己的QQ号登陆腾讯开放平台http://open.qq.com/login,这年头谁还没有个QQ号。进去之后点击右上角账号资料,完善账号信息。最后提交审核,一般会在一个工作日审核完成。

2、申请appid和appkey

申请appid和appkey的用途

appid:应用的唯一标识。在OAuth2.0认证过程中,appid的值即为oauth_consumer_key的值。
appkey:appid对应的密钥,访问用户资源时用来验证应用的合法性。在OAuth2.0认证过程中,appkey的值即为oauth_consumer_secret的值。

开发者账号资料审核通过之后,登陆QQ互联官网https://connect.qq.com,点击应用管理,根据自己的需求创建"网站应用"或者"移动应用",创建完成之后等待审核,一般几个小时就审核完成。

如果你的网站已经备案通过了,网站地址就写自己的正式域名,网站回调域写自己的正式回调地址,备案号也要填写自己的网站备案号码。备案通过会返回给我们APP ID和APP Key

如果你仅仅是想测试QQ登陆功能,网站地址就可以写你的测试地址比如http://127.0.0.1:8080,回调地址写测试地址比如http://127.0.0.1:8080/oauth/callback/qq,备案号随便写。当然结果肯定是不通过,但是不影响我们测试,我们的目的主要是获取APP ID和APP Key,以便后续测试使用。这里我们只能通过自己的QQ号进行测试,其他的QQ号用不了,因为创建的这个应用是审核不通过的。

3、放置QQ登录按钮

可以自己设计QQ登陆按钮,也可以去官网下载,然后把按钮放在页面合适的位置并且加上点击事件,在toLogin()方法里写我们的登录逻辑,调用后台登录方法

4、后台代码实现

4.1、获取Authorization Code

后台通过发送http请求获取Authorization Code,相应的接口为:https://graph.qq.com/oauth2.0/authorize

需要传入的参数:

参数 是否必须 含义
response_type 必须 授权类型,此值固定为“code”。
client_id 必须 申请QQ登录成功后,分配给应用的appid。
redirect_uri 必须 成功授权后的回调地址,必须是注册appid时填写的主域名下的地址,建议设置为网站首页或网站的用户中心。注意需要将url进行URLEncode。
state 必须 client端的状态值。用于第三方应用防止CSRF攻击,成功授权后回调时会原样带回。请务必严格按照流程检查用户与state参数状态的绑定。(这个参数我们自己定义,可以传入uuid)
scope 可选 请求用户授权时向用户显示的可进行授权的列表。
可填写的值是API文档中列出的接口,以及一些动作型的授权(目前仅有:do_like),如果要填写多个接口名称,请用逗号隔开。
例如:scope=get_user_info,list_album,upload_pic,do_like
不传则默认请求对接口get_user_info进行授权。
建议控制授权项的数量,只传入必要的接口名称,因为授权项越多,用户越可能拒绝进行任何授权。
display 可选 PC网站接入时使用。
用于展示的样式。不传则默认展示为PC下的样式。
如果传入“mobile”,则展示为mobile端下的样式。

4.2、获取Access Token

请求地址:https://graph.qq.com/oauth2.0/authorize

请求参数:

参数 是否必须 含义
grant_type 必须 授权类型,在本步骤中,此值固定为“authorization_code”。
client_id 必须 申请QQ登录成功后,分配给网站的appid。
client_secret 必须 申请QQ登录成功后,分配给网站的appkey。
code 必须 上一步返回的authorization code。
如果用户成功登录并授权,则会跳转到指定的回调地址,并在URL中带上Authorization Code。
例如,回调地址为www.qq.com/my.php,则跳转到:
http://www.qq.com/my.php?code=520DD95263C1CFEA087******
注意此code会在10分钟内过期。
redirect_uri 必须 与上面一步中传入的redirect_uri保持一致。

如果成功返回,即可在返回包中获取到Access Token

4.3、获取openid

请求地址:https://graph.qq.com/oauth2.0/me

请求参数:

access_token:在步骤4.2中获取到的access token。

返回值:

callback( {"client_id":"YOUR_APPID","openid":"YOUR_OPENID"} );

4.4、获取用户信息

获取到Access Token和openid后,可通过调用OpenAPI来获取或修改用户个人信息。

这里我们直接调用get_user_info接口获取用户信息:

https://graph.qq.com/user/get_user_info?access_token=YOUR_ACCESS_TOKEN&oauth_consumer_key=YOUR_APP_ID&openid=YOUR_OPENID

返回值:

参数说明 描述
ret 返回码
msg 如果ret<0,会有相应的错误信息提示,返回数据全部用UTF-8编码。
nickname 用户在QQ空间的昵称。
figureurl 大小为30×30像素的QQ空间头像URL。
figureurl_1 大小为50×50像素的QQ空间头像URL。
figureurl_2 大小为100×100像素的QQ空间头像URL。
figureurl_qq_1 大小为40×40像素的QQ头像URL。
figureurl_qq_2 大小为100×100像素的QQ头像URL。需要注意,不是所有的用户都拥有QQ的100x100的头像,但40x40像素则是一定会有。
gender 性别。 如果获取不到则默认返回"男"

4.5、存入数据库

最后,将获取到的信息存储到数据库中

推荐文章
来说两句吧
最新评论
    还没有人评论哦,快来坐沙发吧!