要实现第三方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.generate
QRCode()
},
methods: {
async generate
QRCode() {
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 generate
QRCode() {
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.generate
QRCode()
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登录的功能。
扫一扫
1387
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
