成果展示:www.qihea.xyz
参考:https://blog.csdn.net/a992970569/article/details/82107899
1.申请qq互联权限:
①:打开qq互联官网:https://connect.qq.com/index.html登录qq,然后点击登陆后的头像(当时找入口找了半天?)进行个人开发者信息认证。
这个认证大概要半天时间。认证成功后就可以申请应用了。
②:点击应用管理,创建应用,填写信息。可以先随便写一个,过两个小时就显示就申请失败了。不过没关系的,因为我们这时候失败的申请也能用。不过只能登陆自己的qq,用来做测试。
我写的地址和回调地址:(其他随便写,反正是用来做测试的)
③:找到自己应用的app ID和app KEY。之后会用到。
2.前端页面设置按钮:
<button type="button" class="" οnclick="login()" >
<img src="/image/qq.jpg" style="height:30px">
<span class="">登陆</span>
</button>
js:login()函数代码:
//在新标签页打开网站
function login(){
window.open("/logincheck","TencentLogin",
"width=450,height=320,menubar=0,scrollbars=1,resizable=1,status=1,titlebar=0,toolbar=0,location=1");
}
即点击后打开如下页面
logincheck页面完成的操作会在之后提到,注意这种操作在手机端打开失败,暂时还没有处理。
3.完成后台:
qq互联只提供jsSDK和PHPSDK,没有javaSDK,可是使用jsSDK自我定制度低,而且不使用SDK,按照流程开发也很简单:
QQ登录OAuth2.0总体处理流程如下:
Step1:申请接入,获取appid和apikey;
Step2:开发应用,并设置协作者帐号进行测试联调;
Step3:放置QQ登录按钮;
Step4:通过用户登录验证和授权,获取Access Token;
参考官方文档:使用Authorization_Code获取Access_Token,过程描述已经很详细了。我叙述一下我的完成过程。
①:生成state值,保存到session,然后携带此state值跳转到qq互联获取Authorization Code。
上面的js代码访问的是logincheck页面。代码为:
@GetMapping("/logincheck")
public String loginUrl(HttpServletRequest request){
//获取当前sesion
HttpSession sessoin=request.getSession();
//随机产生字符串
String state=getRandomString(10);
sessoin.setAttribute("state",state);
//重定向
return "redirect:https://graph.qq.com/oauth2.0/authorize?response_type=code&client_id="
+ 101533009 + "&redirect_uri=" + "http://127.0.0.1:8080/recall" + "&state=" + state;
}
这一步主要是获取一个state值加入到session,state值是用来防止CSRF攻击的,自己随机产生一段字符串此值。
产生随机字符串代码:
//length用户要求产生字符串的长度