要
实现第三方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登录的
功能。
1036
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
