保姆级教程springboot2.* + vue2实现QQ登录

最新推荐文章于 2025-02-25 15:30:42 发布

梦ღ蝶

最新推荐文章于 2025-02-25 15:30:42 发布

阅读量346

点赞数

文章标签： java

本文链接：https://blog.csdn.net/weixin_46770598/article/details/132624648

版权

话不多直接上干货

第一步:登录QQ互联创建用应

1.1.直接浏览器搜索:“QQ互联” 带有官方字的点击打开

在这里插入图片描述

1.2.点击登录,登录后点击首页旁边的"应用管理"

在这里插入图片描述

1.3.点击"创建应用",可选择移动和PC,我这以PC为例

在这里插入图片描述

1.4.上面两个请选择的可以随便选择 ,网站名称建议使用备案的服务名称下面的网站介绍是个大坑,由于我淋过雨知道那种滋味,我就不想让大家淋雨了,被驳回四五次,呜呜呜呜呜呜,我直接就把我的分享出来了:个人学习使用，记录一些解决问题的方法,个人网站，主要用于记录自己在学习Java和IT技术学习中遇到的困难和解决办法，也会分享学习Java和IT技术过程中的一些经验，也便于自己以后回顾学习路上的辛苦历程。你们直接CV吧

在这里插入图片描述

1.5.下面这个我就发出标题我的你们把域名换成你们的就可以了

在这里插入图片描述

你们也用 qq/callback 方便后面操作

在这里插入图片描述

第二步:创建SpringBoot和VUE集成QQ登录

2.1.我这里直接拉去若依框架,就不创建了

		<!-- 在login.vue添加该标签 -->
        <el-link @click="qqLogin" :underline="false" >
        			<!-- 图标 -->
          <img src="../assets/login/images/qq.jpg" width="30" height="30"  alt="加载失败"/>
        </el-link>

2.2.动态加载 QQ 互联开放平台的 JavaScript SDK 并跳转登录页面

  methods: {
    qqLogin(){
      const appId = "创建应用通过后给appId";
      const redirectURI = "这里是回调地址";

      const handleCallback = (opts) => {
        // 处理登录成功后的回调逻辑
        console.log(opts);
      };

      const handleLogin = () => {
        if (typeof QC === "undefined" || !QC.Login.check()) {
          // 如果 QC 对象未定义或用户未登录，则弹出 QQ 登录窗口
          QC.Login.showPopup(
            {
              appId: appId,
              redirectURI: redirectURI
            },
            handleCallback
          );
        } else {
          // 用户已登录，直接执行回调逻辑
          handleCallback(QC.Login.getMe());
        }
      };

      // 动态加载 QQ 互联开放平台的 JavaScript SDK
      const script = document.createElement("script");
      script.src = `https://qzonestyle.gtimg.cn/qzone/openapi/qc_loader.js?appId=${appId}&redirectURI=${encodeURIComponent(
        redirectURI
      )}`;
      script.onload = handleLogin;
      document.head.appendChild(script);


    }
  }

2.3.后端在SysLoginController.java和application.yml添加代码

spring:
  security:
	  oauth2:
	    client:
	      registration:
	        qq:
	          #你在 QQ 开放平台注册应用程序时获得的客户端 ID。
	          client-id: APPID
	          #你在 QQ 开放平台注册应用程序时获得的客户端密钥。
	          client-secret: APP Key
	          #用户在 QQ 授权页面授权后将被重定向回的 URL。一般来说，这个URL会指向你的前端应用程序中的一个特定页面，用于接收授权码或令牌。
	          redirect-uri: 回调地址
	          #授权模式，这里设置为 authorization_code，表示使用授权码模式进行授权。
	          authorization-grant-type: authorization_code
	      provider:
	        qq:
	          #QQ 提供商的授权服务器的授权地址，用于跳转到 QQ 登录页面，并请求用户授权。
	          authorization-uri: https://graph.qq.com/oauth2.0/authorize
	          #QQ 提供商的授权服务器的令牌地址，用于获取访问令牌、刷新令牌等。
	          token-uri: https://graph.qq.com/oauth2.0/token
	          #QQ 提供商的用户信息地址，用于获取用户的基本信息。
	          user-info-uri: https://graph.qq.com/oauth2.0/me
	          #指定用户信息中的属性名称，这里设置为 openid，表示使用 OpenID 作为用户名。
	          user-name-attribute: openid

2.4.点开LoginController.java页面更换@RestController注解,其他方法上添加注解@ResponseBody

    @GetMapping("/qq/callback")
    public String qqCallback(Authentication authentication) {
        OAuth2AuthenticationToken oauthToken = (OAuth2AuthenticationToken) authentication;
        OAuth2User user = oauthToken.getPrincipal();

        // 获取用户信息，可以根据需要进行处理
        log.info("---------------" + user.toString());
        return "redirect:/"; // 根据实际情况修改重定向的地址
    }