qq第三方授权登录 (qq音乐第三方登录)

一、背景

网站加入了猿问模块后,在评论时预期是要有用户消息的,但是这时候让用户去马上注册显然是不可行的。

所以,网站集成QQ登录势在必行!

二、准备工作

1、首先我们登入QQ互联去注册并申请应用

2、审核成功后会给你给你appId、appKey、回调地址等信息(PS:这些十分的重要)

qq第三方登录平台,qq第三方登录权限管理

3、查阅官网文档QQ互联文档,选择自己需要调用的API(我这里仅做头像、昵称、性别等基础信息,所以不用担心隐私问题)

qq第三方登录平台,qq第三方登录权限管理

三、基本使用教程

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>

Java

②前端校验并跳转

        // 直接弹出授权页面,授权过后跳转到回调页面进行登录处理
        QC.Login.showPopup({
          appId: "appId",
          redirectURI: "http://www.guangmuhua.com/XXX", //登录成功后会自动跳往该地址
        });

Java

③这个时候就交给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);
    }