Оффлайн
- Регистрация
- 1 Мар 2015
- Сообщения
- 1,481
- Баллы
- 155
Việc tích hợp đăng nhập bằng Google, GitHub hoặc Facebook đang trở thành một tiêu chuẩn phổ biến trong các hệ thống web hiện đại sử dụng Java (Spring Boot). Không chỉ mang lại trải nghiệm người dùng mượt mà hơn, hình thức đăng nhập này còn giúp đơn giản hóa việc xác thực và giảm thiểu rủi ro bảo mật liên quan đến mật khẩu. Bài viết dưới đây hướng dẫn cách cấu hình đăng nhập xã hội một cách hiệu quả và dễ hiểu.
I. Tổng quan về OAuth 2.0
Tất cả các nền tảng đăng nhập xã hội lớn hiện nay đều sử dụng OAuth 2.0, một giao thức ủy quyền cho phép ứng dụng của bạn truy cập thông tin người dùng từ bên thứ ba (Google, Facebook, GitHub) mà không cần trực tiếp xử lý mật khẩu của họ. Spring Security hỗ trợ tích hợp OAuth 2.0 rất tốt thông qua spring-security-oauth2-client.
II. Chuẩn Bị Môi Trường
Java 17+
Spring Boot 3.x
Spring Security
Maven hoặc Gradle
Thymeleaf (hoặc bất kỳ template engine nào)
IDE như IntelliJ hoặc VS Code Thêm dependency trong pom.xml:
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-oauth2-client</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
III. Cấu hình đăng nhập Google
1. Đăng ký ứng dụng Google
Truy cập:
Tạo một project mới
Chọn "OAuth consent screen" → chọn "External"
Điền các thông tin cơ bản (tên app, email)
Chọn "Credentials" → Tạo "OAuth 2.0 Client ID"
Ứng dụng: Web application
Authorized redirect URIs:
2. Cấu hình application.yml
spring:
security:
oauth2:
client:
registration:
google:
client-id: YOUR_CLIENT_ID
client-secret: YOUR_CLIENT_SECRET
scope: profile, email
provider:
google:
authorization-uri:
token-uri:
user-info-uri:
IV. Cấu hình đăng nhập với GitHub
1. Tạo OAuth App trên GitHub
Truy cập:
New OAuth App:
Homepage:
Authorization callback URL:
2. Thêm vào application.yml:
spring:
security:
oauth2:
client:
registration:
github:
client-id: YOUR_CLIENT_ID
client-secret: YOUR_CLIENT_SECRET
scope: read:user,user:email
V. Cấu hình đăng nhập với Facebook
1. Tạo OAuth App trên GitHub
Truy cập:
Tạo App → Chọn Consumer
Thêm sản phẩm "Facebook Login" → Cấu hình:
Valid OAuth Redirect URIs:
2. Thêm vào application.yml:
spring:
security:
oauth2:
client:
registration:
facebook:
client-id: YOUR_CLIENT_ID
client-secret: YOUR_CLIENT_SECRET
scope: email, public_profile
VI. Cấu hình Security
@Configuration
@EnableWebSecurity
public class SecurityConfig {
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http
.authorizeHttpRequests(auth -> auth
.requestMatchers("/", "/login**").permitAll()
.anyRequest().authenticated()
)
.oauth2Login()
.defaultSuccessUrl("/home", true);
return http.build();
}
}
VII. Hiển thị giao diện
<!-- templates/index.html -->
<!DOCTYPE html>
<html xmlns:th="">
<head>
<title>Đăng nhập</title>
</head>
<body>
<h2>Đăng nhập bằng:</h2>
<a href="/oauth2/authorization/google">Google</a><br>
<a href="/oauth2/authorization/github">GitHub</a><br>
<a href="/oauth2/authorization/facebook">Facebook</a>
</body>
</html>
VIII. Hiển thị thông tin người dùng sau khi đăng nhập
@Controller
public class HomeController {
@GetMapping("/home")
public String home(Model model, OAuth2AuthenticationToken authentication) {
OAuth2User user = authentication.getPrincipal();
model.addAttribute("name", user.getAttribute("name"));
model.addAttribute("email", user.getAttribute("email"));
return "home";
}
}
<!-- templates/home.html -->
<!DOCTYPE html>
<html xmlns:th="">
<head><title>Trang chủ</title></head>
<body>
<h2>Xin chào, <span th:text="${name}"></span>!</h2>
<p>Email: <span th:text="${email}"></span></p>
</body>
</html>
Hiện tại thì mình đang học môn SEO trên trường, nên trong bài viết mình xin để một link về trang web mình SEO cho môn học: . Cảm ơn các bạn đã đọc bài viết.
I. Tổng quan về OAuth 2.0
Tất cả các nền tảng đăng nhập xã hội lớn hiện nay đều sử dụng OAuth 2.0, một giao thức ủy quyền cho phép ứng dụng của bạn truy cập thông tin người dùng từ bên thứ ba (Google, Facebook, GitHub) mà không cần trực tiếp xử lý mật khẩu của họ. Spring Security hỗ trợ tích hợp OAuth 2.0 rất tốt thông qua spring-security-oauth2-client.
II. Chuẩn Bị Môi Trường
Java 17+
Spring Boot 3.x
Spring Security
Maven hoặc Gradle
Thymeleaf (hoặc bất kỳ template engine nào)
IDE như IntelliJ hoặc VS Code Thêm dependency trong pom.xml:
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-oauth2-client</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-thymeleaf</artifactId>
</dependency>
</dependencies>
III. Cấu hình đăng nhập Google
1. Đăng ký ứng dụng Google
Truy cập:
Tạo một project mới
Chọn "OAuth consent screen" → chọn "External"
Điền các thông tin cơ bản (tên app, email)
Chọn "Credentials" → Tạo "OAuth 2.0 Client ID"
Ứng dụng: Web application
Authorized redirect URIs:
2. Cấu hình application.yml
spring:
security:
oauth2:
client:
registration:
google:
client-id: YOUR_CLIENT_ID
client-secret: YOUR_CLIENT_SECRET
scope: profile, email
provider:
google:
authorization-uri:
token-uri:
user-info-uri:
IV. Cấu hình đăng nhập với GitHub
1. Tạo OAuth App trên GitHub
Truy cập:
New OAuth App:
Homepage:
Authorization callback URL:
2. Thêm vào application.yml:
spring:
security:
oauth2:
client:
registration:
github:
client-id: YOUR_CLIENT_ID
client-secret: YOUR_CLIENT_SECRET
scope: read:user,user:email
V. Cấu hình đăng nhập với Facebook
1. Tạo OAuth App trên GitHub
Truy cập:
Tạo App → Chọn Consumer
Thêm sản phẩm "Facebook Login" → Cấu hình:
Valid OAuth Redirect URIs:
2. Thêm vào application.yml:
spring:
security:
oauth2:
client:
registration:
facebook:
client-id: YOUR_CLIENT_ID
client-secret: YOUR_CLIENT_SECRET
scope: email, public_profile
VI. Cấu hình Security
@Configuration
@EnableWebSecurity
public class SecurityConfig {
@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
http
.authorizeHttpRequests(auth -> auth
.requestMatchers("/", "/login**").permitAll()
.anyRequest().authenticated()
)
.oauth2Login()
.defaultSuccessUrl("/home", true);
return http.build();
}
}
VII. Hiển thị giao diện
<!-- templates/index.html -->
<!DOCTYPE html>
<html xmlns:th="">
<head>
<title>Đăng nhập</title>
</head>
<body>
<h2>Đăng nhập bằng:</h2>
<a href="/oauth2/authorization/google">Google</a><br>
<a href="/oauth2/authorization/github">GitHub</a><br>
<a href="/oauth2/authorization/facebook">Facebook</a>
</body>
</html>
VIII. Hiển thị thông tin người dùng sau khi đăng nhập
@Controller
public class HomeController {
@GetMapping("/home")
public String home(Model model, OAuth2AuthenticationToken authentication) {
OAuth2User user = authentication.getPrincipal();
model.addAttribute("name", user.getAttribute("name"));
model.addAttribute("email", user.getAttribute("email"));
return "home";
}
}
<!-- templates/home.html -->
<!DOCTYPE html>
<html xmlns:th="">
<head><title>Trang chủ</title></head>
<body>
<h2>Xin chào, <span th:text="${name}"></span>!</h2>
<p>Email: <span th:text="${email}"></span></p>
</body>
</html>
Hiện tại thì mình đang học môn SEO trên trường, nên trong bài viết mình xin để một link về trang web mình SEO cho môn học: . Cảm ơn các bạn đã đọc bài viết.