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

 时间:2018-06-30 23:21:40 贡献者:january640

导读:如何在自己的网站上实现 QQ 授权登录?最近在实现 QQ 授权登录,现将我的实现过程以及我的理解整理如下。以下所述如有不 对之处,请指正。www.szfangwei.cn 官方提供的 SDK 有:JS,PHP,Java。

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

如何在自己的网站上实现 QQ 授权登录?最近在实现 QQ 授权登录,现将我的实现过程以及我的理解整理如下。

以下所述如有不 对之处,请指正。

www.szfangwei.cn 官方提供的 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 标签中 添加:回调地址可以自己设置一个。

我网站首页是 http://xjpz.me,因此设置的是 http://xjpz.me/blog/test/qcback。

其他的按需填写。

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

3.部署测试 添加登录入口 引入 JS SDK 文件:

在登录页面中引入:将 APPID 换成你自己的 APPID,REDIRECTURI 换成你自己设置的回调地址。

放置 QQ 图标(下面有素材地址),设置图标超链接地址: QQ 授权登录 QQ 授权登录开发 QQ 授权登录管理 将 client_id 换成你的 AppID,redirect_uri 换成你的回调地址。

如果你要获取其他信息 或者调用其它接口,请将 scope 改成你需要的 API 名或者直接改成 all 。

(API 列表可查看 http://wiki.connect.qq.com/api%E5%88%97%E8%A1%A8)。

我的登录入口样例:

官方资料: 素材与放置规范 或者这个 官方提供的登录按钮代码,可直接将代码贴到你想要放置入口的位置就行: 设置回调页面1. 同样需要引入 JS SDK 文件,参照上面。

2. 用 JS SDK 协助调用 OpenAPI 的 get_user_info 方法,获取用户头像、用户名等基础信息。

我的回调页面代码如下: QQConnect JSDK - redirectURI

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

说明, - 引入的`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.提交 以上完成,自己测试通过,就可以提交腾讯审核。

没有审核通过之前只能设置几个账号 测试,其他账号无法授权登录。

提交时需注意, 在显要位置放置登录入口。

至少在你网站登录页面要放置。

我第一次提 交时专门做了一个授权登录入口并在应用信息设置里填写了。

结果腾讯以" 未放置登录入口或放置不规范"为由拒绝。

网站要基本开发完成。

我第二次提交,因有未实现的页面,被腾讯以" 网站不完善"为由拒绝。

然后我把未实现页面入口撤下,审核通过。

 
 

微信关注公众号,送福利!