当前位置: 首页 > 科技观察

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

时间:2023-03-19 22:44:32 科技观察

html,body{字体大小:14px;line-height:180%;}最近在实现QQ授权登录。我的实现过程和理解如下。以下内容如有不妥之处,敬请指正。官方的SDK有:JS、PHP、Java。我的网站是用Scala+Play搭建的,所以只能用JSSDK。1.关键字AppID:你的应用(网站)的ID。AppKey:您的应用程序的身份验证。redirect_uri:用户确认授权后的回调地址。(需要自己设置,可以防止别人盗用你的身份获取授权用户信息)OpenID:用户身份的唯一标识。建议保存在本地,与本地创建的uid绑定,这样用户下次登录时可以对应之前的身份信息,无需重新授权,用户体验一致。(无法获取用户QQ号)AccessToken:表示当前用户在本网站/应用的登录状态和授权信息,建议保存在本地。(相当于token,token)scope:你要获取的信息。2、准备注册成为QQ互联开发者,您需要到腾讯QQ互联进行注册。准备网站网站需要基本开发。网站域名、Logo等一应俱全。创建应用在QQ上网管理中心创建应用。以上信息创建后可随时更改。网站验证上图中网址后面的验证,我选择在我网站首页的HTML代码的HEAD标签中添加:回调地址可以自己设置。我网站的首页是http://xjpz.me,所以设置是http://xjpz.me/blog/test/qcback。根据需要填写其他字段。创建应用后,可以获得AppID和AppKey。3、部署测试添加登录入口导入JSSDK文件:在登录页面导入:APPID换成你自己的APPID,REDIRECTURI换成你自己的回调地址。放置QQ图标(下方有素材地址),并设置图标超链接地址:=http://xxxx.com&scope=get_user_info">将client_id替换为您的AppID,将redirect_uri替换为您的回调地址。如果你想获取其他信息或调用其他接口,请将scope改为你需要的API名称或直接改为all。(附有API列表)。我的登录入口示例:官方信息:这里是官网文档素材和放置规范或者官方登录按钮代码,可以直接粘贴代码到你要放置入口的位置:设置回调页面也需要导入JSSDK文件,参考上面的.使用JSSDK辅助调用OpenAPI的get_user_info方法获取用户头像、用户名等基本信息。我的回调页面代码如下:QQConnectJSDK-redirectURIhtml,body{字体大小:14px;line-height:180%;}

数据传输中,请稍候...

说明,-导入的`JSSDK`中的`data-appid`和`data-redirecturi`file`你还需要更改你的AppID和回调地址-授权成功后,`Openid`和`token`会被缓存到本地,可以通过`QC.Login.getMe(function(openId,accessToken){}`.-回调成功最后我会把用户名和openid提交到服务器保存在本地,让用户体验一致,也就是`$.post(){}`方法,需要换成你服务器的Action。-服务器处理成功后,重定向到网站首页。授权登录结束。为了方便用户,用户授权成功后,我没有继续询问用户进入email地址,密码等,如果要求用户重新输入,和直接注册有什么区别?那么授权登录基本就失去了意义。顺便贴一下我的后台处理步骤:-//判断openid是否存在。-//如果openid存在,说明这个用户之前登录过或者已经绑定了本地用户表中的某个用户。写一个cookie,让用户登录,到此结束。-//如果用户openid不存在,判断用户名是否存在。-//如果用户名不存在,直接生成新的本地用户,绑定uid和openid。写入输入cookie,让用户登录,到此结束。-//如果用户名存在,提示用户是否验证绑定。如果用户选择验证,验证通过,则与其绑定。写cookie让用户登录,到此结束。-//如果用户放弃验证,或者验证失败,生成一个新的本地用户,生成一个新的用户名,绑定uid和openid。写cookie让用户登录,到此结束。4.提交以上完成,自测通过,即可提交腾讯审核。审核通过前只能设置少数账号进行测试,其他账号不能授权登录。提交时请注意将登录入口放在显着位置。至少将它放在您网站的登录页面上。我第一次提交的时候,特意做了一个授权登录入口,填在申请信息设置里。结果,腾讯以“登录入口未放置或放置不规范”为由予以拒绝。网站应该基本开发好了。我的第二次投稿,由于页面未实现,被腾讯以“网站不完善”为由拒绝了。然后我去掉了未实现的页面入口,通过了审核。