2020-07-30 21:36:14 卢浮宫 版权声明:本文为站长原创文章,转载请写明出处
网站加入了猿问模块后,在评论时预期是要有用户消息的,但是这时候让用户去马上注册显然是不可行的。
所以,网站集成QQ登录势在必行!
1、首先我们登入QQ互联去注册并申请应用
2、审核成功后会给你给你appId、appKey、回调地址等信息(PS:这些十分的重要)
3、查阅官网文档QQ互联文档,选择自己需要调用的API(我这里仅做头像、昵称、性别等基础信息,所以不用担心隐私问题)
1、前端
①首先引入qq互联
<!-- QQ互联 -->
<script type="text/javascript" src="http://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js" data-appid="appId"
data-redirecturi="http://www.guangmuhua.com/XXX" charset="utf-8"></script>
②前端校验并跳转
// 直接弹出授权页面,授权过后跳转到回调页面进行登录处理
QC.Login.showPopup({
appId: "appId",
redirectURI: "http://www.guangmuhua.com/XXX", //登录成功后会自动跳往该地址
});
③这个时候就交给qq去处理了,它会拉取qq登录,成功后会跳转到你设置好的回调地址
2、后端
①回调成功页面会携带一个access_token
②我们拿到access_token后通过https://graph.qq.com/oauth2.0/me?access_token=" + accessToken;
获取登录的openId(这个opid其实也可以代表一个用户身份了)
③通过get_user_info可以获取到用户的基本信息(头像、昵称等)
public R oauth(AccessTokenVO accessTokenVO){
String accessToken = accessTokenVO.getAccess_token();
// 获取openId
String getOpenIdUrl = "https://graph.qq.com/oauth2.0/me?access_token=" + accessToken;
String rlt = HttpClientUtil.doGet(getOpenIdUrl, null);
if(rlt.contains("err")){
return R.error("获取登录openId失败!");
}
String formatRlt = rlt.substring(rlt.lastIndexOf("{"), rlt.lastIndexOf("}") + 1);
JSONObject jsonObject = JSONObject.parseObject(formatRlt);
String openId = jsonObject.getString("openid");
if(openId == null){
return R.error("openId为空!");
}
// 获取用户信息(检测openid是否在现有的用户信息中已存在,如果是则返回用户信息,无时注册临时信息)
QqUserEntity qqUserEntity = qqUserService.lambdaQuery().eq(QqUserEntity::getOpenid, openId).one();
if(null != qqUserEntity){
UserEntity userEntity = userService.getById(qqUserEntity.getUserId());
UserForQQDTO userForQQDTO = new UserForQQDTO();
BeanUtils.copyProperties(userEntity, userForQQDTO);
userForQQDTO.setRouteName(accessTokenVO.getRouteName());
return R.ok().put("data", userForQQDTO);
}
String getUserInfoUrl = "https://graph.qq.com/user/get_user_info?access_token=" + accessToken + "&oauth_consumer_key=101794880&openid=" + openId;
String userInfoRlt = HttpClientUtil.doGet(getUserInfoUrl, null);
QqUserInfoDTO qqUserInfoDTO = JSONObject.parseObject(userInfoRlt, QqUserInfoDTO.class);
if(0 != qqUserInfoDTO.getRet()){
return R.error("获取登录信息失败!");
}
...
return R.ok().put("data", userForQQDTO);
}