SpringBoot+Vue实现第三方QQ登录(一)

1. QQ登录介绍(测试网站:地址

  QQ互联开放平台为第三方网站提供了丰富的API(官网地址: QQ互联官网首页)。第三方网站接入QQ互联开放平台后,即可通过调用平台提供的API实现用户使用QQ帐号登录

网站功能,且可以获取到腾讯QQ用户的相关信息。

  第三方网站也可以调用腾讯方提供的API实现网站的分享、评论、邀请等功能,即网站的社交化功能。且可以将相关信息同步到QQ空间、腾讯朋友、腾讯微博等平台,建立网站与腾讯各平台的互

动关系,利用庞大的QQ用户群来实现网站的快速传播。

       第三方网站主要通过使用“QQ登录”接入QQ互联开放平台。"QQ登录”是QQ互联开放平台提供给第三方网站的一种服务。“QQ登录”可以让用户使用QQ帐号在第三方网站上登录,分享内

容、同步信息,大大降低了用户注册的门槛。

      同时,第三方网站根据用户提供的绑定信息,将用户在网站上发布的内容同步发布到QQ空间的个人动态中,从而借助QQ空间庞大的用户群,使网站的信息能通过好友关系得到进一步的传播,提

升网站的访问量和用户数。

     OAuth: OAuth(开放授权)是一个开放标准,允许用户授权第三方网站访问他们存储在另外的服务提供者上的信息,而不需要将用户名和密码提供给第三方网站或分享他们数据的所有内容。

    QQ登录OAuth2.0:对于用户相关的OpenAPI(例如获取用户信息等),为了保护用户数据的安全和隐私,第三方网站访问用户数据前都需要显式的向用户征求授权。

    OAuth2.0开发文档 (开发文档)

2. 成为开发者

     开发者通过以下几个步骤,即可接入互联开放平台: 注册开发者 → 创建应用 → 通过审核并获取接口权限。

2.1 注册开发者

  在QQ互联开放平台首页(官网地址:QQ互联官网首页) ,点击右上角的“登录”按钮,使用QQ帐号登录,如下图所示:

重要提示:


  开发者QQ号码一旦注册不能变更,建议使用个人开发账号注册,以免造成不必要的麻烦。

2.2 登录成功后会跳转到开发者注册页面,在注册页面按要求提交公司或个人的基本资料。下图所示的是个人开发者注册页面:

2.3 按要求提交资料后,审核人员会进行审核,通过审核即可成为开发者(注意: 联系地址要详细到门牌号,身份证要清晰,否则容易驳回)。

3. 网站应用及移动应用接入申请

    应用接入前,首先需进行申请,获得对应的appid与appkey,以保证后续流程中可正确对网站与用户进行验证与授权。

3.1 创建应用

1. 开发者注册完成后,点击“应用管理”按钮。

2. 跳转到qq互联管理中心页面,点击创建应用, 我的已经审核通过并且已经创建过一个应用了。

3. 选择创建应用, 选择需要创建的应用类型,我们以网站应用为例, 点击创建网站应用后,按要求完善信息:

4. 网站回调地址填写规范: 回调地址常见问题及修改方法

5. 备案信息填写规范:http://www.miitbeian.gov.cn/publish/query/indexFirst.action

6. 网站信息填写完成,点击“创建应用”后,网站应用创建完成,点击“应用管理”,进入管理中心,在管理中心可以查看到网站获取的appid和appkey,如下图所示:

备注:创建移动应用与网站应用步骤方法一致,在此不赘述。 

3.2 网站信息完善

1. 点击“应用中心”,应用右侧的“查看”,进入应用详情页面(应用创建完成后, 状态会显示审核中, 等待审核即可)。

注意: 正常审核需要几个工作日, 想要加快审核的小伙伴添加客服QQ (  800013811 )   询问, 很快就可以通过审核!!!!

2. 应用详情页面可点击“修改”来编辑应用“基本信息”和“平台信息”。

3. 点击“应用接口”可查看已获取的接口,使用QQ登录功能。

3.3 官方提供的代码SDK下载 (SDK示例代码下载

3.4 到此准备工作结束,网站开发流程(在下篇介绍)

3.5 每个人做的项目需求不同,可能会出现不同的问题,文章仅供参考

3.6 SpringBoot+Vue实现第三方QQ登录(二)

3.7 其他第三方登录方式:第三方登录汇总

4. 源码购买

4.1 简洁版源码(淘宝店铺:爱创客网络)

只包含登录,第三方登录,跳转首页(没有菜单!),技术框架:SpringBoot+SpringSecurity+Mysql+Redis+Vue+ElementUI等

4.2 完整版本源码(淘宝店铺:爱创客网络)

测试地址(测试地址是完整版的):www.youyoushop.work

包含登录,注册,第三方登录,完整的系统管理模块,系统工具模块,系统监控模块,系统日志模块,个人中心等,技术框架:SpringBoot+SpringSecurity+Mysql+Redis+Vue+ElementUI等

实现第三方qq登录,可以使用QQ互联提供的开放平台接口。具体的步骤如下: 1. 注册成为QQ互联开发者,并创建应用。在创建应用时,需要填写应用的基本信息,并获得AppID和AppKey。 2. 在Spring Boot后端项目中,使用Spring Security实现OAuth2认证。在pom.xml文件中添加以下依赖: ```xml <dependency> <groupId>org.springframework.security</groupId> <artifactId>spring-security-oauth2-client</artifactId> <version>5.3.4.RELEASE</version> </dependency> ``` 3. 在前端Vue项目中,使用Vue CLI创建项目,并安装vue-cli-plugin-qrcode实现生成二维码。在Terminal中运行以下命令: ``` vue create qq-login-demo cd qq-login-demo vue add qrcode ``` 4. 在Spring Boot后端项目中,实现OAuth2的配置。在application.yml文件中添加以下配置: ```yaml spring: security: oauth2: client: registration: qq: clientId: <your app id> clientSecret: <your app key> redirectUriTemplate: "{baseUrl}/login/oauth2/code/{registrationId}" authorizationUri: https://graph.qq.com/oauth2.0/authorize tokenUri: https://graph.qq.com/oauth2.0/token userInfoUri: https://graph.qq.com/user/get_user_info scope: - get_user_info provider: qq: authorizationUri: https://graph.qq.com/oauth2.0/authorize tokenUri: https://graph.qq.com/oauth2.0/token userInfoUri: https://graph.qq.com/user/get_user_info?oauth_consumer_key={clientId}&openid={oauthId} userNameAttribute: nickname ``` 5. 在前端Vue项目中,实现二维码生成。在App.vue文件中添加以下代码: ```vue <template> <div id="app"> <div v-if="!isLogin"> <qrcode :value="qrCodeUrl"></qrcode> </div> <div v-else> <p>{{ userInfo.nickname }}</p> <img :src="userInfo.figureurl_qq_1" alt="头像"> </div> </div> </template> <script> import QRCode from 'qrcode' export default { name: 'App', data() { return { isLogin: false, qrCodeUrl: '' } }, mounted() { this.generateQRCode() }, methods: { async generateQRCode() { const response = await this.$http.get('/qq-login/qr-code') if (response.status === 200) { this.qrCodeUrl = response.data this.isLogin = false } }, async checkLoginStatus() { const response = await this.$http.get('/qq-login/check-login-status') if (response.status === 200) { this.userInfo = response.data this.isLogin = true } } } } </script> ``` 6. 在Spring Boot后端项目中,实现二维码生成和登录状态检查。在QqLoginController.java文件中添加以下代码: ```java @RestController @RequestMapping("/qq-login") public class QqLoginController { private final OAuth2AuthorizedClientService authorizedClientService; private final RestTemplate restTemplate; @Autowired public QqLoginController(OAuth2AuthorizedClientService authorizedClientService, RestTemplate restTemplate) { this.authorizedClientService = authorizedClientService; this.restTemplate = restTemplate; } @GetMapping("/qr-code") public String generateQRCode() { String qrCodeUrl = "https://graph.qq.com/oauth2.0/show?which=Login&display=pc&response_type=code&client_id=<your app id>&redirect_uri=http://localhost:8080/login&state=<random state>"; try { qrCodeUrl = QRCode.from(qrCodeUrl).to(ImageType.PNG).withSize(250, 250).stream().collect(Collectors.toBase64String); } catch (WriterException | IOException e) { e.printStackTrace(); } return "data:image/png;base64," + qrCodeUrl; } @GetMapping("/check-login-status") public Map<String, Object> checkLoginStatus() { OAuth2AuthenticationToken authenticationToken = (OAuth2AuthenticationToken) SecurityContextHolder.getContext().getAuthentication(); OAuth2AuthorizedClient authorizedClient = authorizedClientService.loadAuthorizedClient(authenticationToken.getAuthorizedClientRegistrationId(), authenticationToken.getName()); String accessToken = authorizedClient.getAccessToken().getTokenValue(); String openId = restTemplate.getForObject("https://graph.qq.com/oauth2.0/me?access_token=" + accessToken, String.class); openId = StringUtils.substringBetween(openId, "\"openid\":\"", "\"}"); Map<String, Object> userInfo = restTemplate.getForObject("https://graph.qq.com/user/get_user_info?access_token=" + accessToken + "&oauth_consumer_key=<your app id>&openid=" + openId, Map.class); return userInfo; } } ``` 7. 在前端Vue项目中,实现登录状态检查。在App.vue文件中添加以下代码: ```vue <script> export default { name: 'App', data() { return { isLogin: false, qrCodeUrl: '' } }, mounted() { this.generateQRCode() this.checkLoginStatus() setInterval(() => { this.checkLoginStatus() }, 3000) }, methods: { async checkLoginStatus() { const response = await this.$http.get('/qq-login/check-login-status') if (response.status === 200) { this.userInfo = response.data this.isLogin = true } } } } </script> ``` 至此,我们就成功地实现Spring Boot+Vue代码实现第三方QQ登录的功能。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值