Лекція 108: Практика — налаштування OAuth2 для аутентифікації через сторонні сервіси

Якщо до цього моменту ми теоретично розглядали можливості OAuth2, його архітектуру і принципи, то сьогодні час засукати рукава і запрацювати з кодом. Настав час реалізувати OAuth2 на практиці. Сьогодні ми налаштуємо аутентифікацію через сторонні сервіси, такі як Google і GitHub, і навчимося інтегрувати їх у наші Spring Boot додатки. Готові? Тоді поїхали!

Чому сторонні провайдери?

Користуватися сторонніми сервісами для аутентифікації — це дуже зручно. Додаток не зберігає паролі користувачів (і не несе за це відповідальності), що відразу робить його безпечнішим. Крім того, OAuth2 дозволяє легко підключати аутентифікацію через Google, GitHub або Facebook і дає користувачам можливість увійти в ваш додаток в один клік!

Що ми будемо розробляти?

Ми створимо Spring Boot додаток, який дозволяє користувачу увійти, використовуючи облікові записи Google або GitHub. Додаток покаже персоналізоване привітання для авторизованих користувачів.

Архітектура додатку

1. Spring Boot: основа нашого додатку.
2. Spring Security OAuth2: управління усією магією OAuth2.
3. Google і GitHub: провайдери аутентифікації (їх можна замінити на будь-які інші, але ми вибрали цих двох через популярність).
4. Thymeleaf: для відображення простих сторінок.

Налаштування додатку OAuth2

Крок 1: Створення проекту Spring Boot

Для початку створимо новий Spring Boot-проєкт. Включимо залежності для Spring Security і підтримки OAuth2:

pom.xml (для Maven)

<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>

build.gradle (для Gradle)

dependencies {
    implementation 'org.springframework.boot:spring-boot-starter-security'
    implementation 'org.springframework.boot:spring-boot-starter-oauth2-client'
    implementation 'org.springframework.boot:spring-boot-starter-thymeleaf'
}

Крок 2: Налаштування Google OAuth2

Тепер зареєструємо наш додаток у Google Console.

1. Перейдіть на Google Developer Console.
2. Створіть новий проєкт.
3. Налаштуйте OAuth Consent Screen (додайте інформацію про ваш додаток).
4. Перейдіть у "Credentials" → "Create Credentials" → "OAuth 2.0 Client IDs".
   • Вкажіть тип додатку: "Web application".
   • Додайте в Authorized Redirect URIs адресу http://localhost:8080/login/oauth2/code/google.

Збережіть Client ID і Client Secret. Вони знадобляться для налаштування.

Крок 3: Налаштування GitHub OAuth2

1. Перейдіть на GitHub Developer Settings.
2. Створіть новий додаток (New OAuth App).
   • Вкажіть Homepage URL: http://localhost:8080.
   • Вкажіть Authorization callback URL: http://localhost:8080/login/oauth2/code/github.

Збережіть видані Client ID і Client Secret.

Крок 4: Конфігурація application.yml

Додайте налаштування для сторонніх провайдерів у файл application.yml (або application.properties).

spring:
  security:
    oauth2:
      client:
        registration:
          google:
            client-id: YOUR_GOOGLE_CLIENT_ID
            client-secret: YOUR_GOOGLE_CLIENT_SECRET
            redirect-uri: "{baseUrl}/login/oauth2/code/{registrationId}"
            scope:
              - email
              - profile
          github:
            client-id: YOUR_GITHUB_CLIENT_ID
            client-secret: YOUR_GITHUB_CLIENT_SECRET
            redirect-uri: "{baseUrl}/login/oauth2/code/{registrationId}"
            scope:
              - read:user
              - user:email
        provider:
          github:
            authorization-uri: https://github.com/login/oauth/authorize
            token-uri: https://github.com/login/oauth/access_token
            user-info-uri: https://api.github.com/user

Замініть YOUR_GOOGLE_CLIENT_ID, YOUR_GOOGLE_CLIENT_SECRET, YOUR_GITHUB_CLIENT_ID і YOUR_GITHUB_CLIENT_SECRET на відповідні значення.

Крок 5: Налаштування Spring Security

Тепер створимо конфігурацію безпеки за допомогою Spring Security.

import org.springframework.context.annotation.Configuration;
import org.springframework.security.config.annotation.web.builders.HttpSecurity;
import org.springframework.security.config.annotation.web.configuration.EnableWebSecurity;
import org.springframework.security.web.SecurityFilterChain;

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception {
        http
            .authorizeHttpRequests(auth -> auth
                .requestMatchers("/", "/login").permitAll()
                .anyRequest().authenticated()
            )
            .oauth2Login(oauth2 -> oauth2
                .loginPage("/login")
                .defaultSuccessUrl("/profile")
            );
        return http.build();
    }
}

Крок 6: Контролер для роботи з користувачем

Додамо контролер для відображення привітальної сторінки після успішної аутентифікації.

import org.springframework.security.core.annotation.AuthenticationPrincipal;
import org.springframework.security.oauth2.core.user.OAuth2User;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class UserController {

    @GetMapping("/")
    public String home() {
        return "home";
    }

    @GetMapping("/profile")
    public String profile(Model model, @AuthenticationPrincipal OAuth2User principal) {
        model.addAttribute("name", principal.getAttribute("name"));
        model.addAttribute("email", principal.getAttribute("email"));
        return "profile";
    }
}

Крок 7: Створення HTML-сторінок

templates/home.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Home</title>
</head>
<body>
  <h1>Welcome!</h1>
  <a href="/oauth2/authorization/google">Login with Google</a>
  <a href="/oauth2/authorization/github">Login with GitHub</a>
</body>
</html>

templates/profile.html

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <title>Profile</title>
</head>
<body>
  <h1>Welcome, <span th:text="${name}"></span>!</h1>
  <p>Email: <span th:text="${email}"></span></p>
</body>
</html>

Практичне тестування

1. Запустіть додаток.
2. Перейдіть за адресою http://localhost:8080.
3. Виберіть спосіб авторизації: Google або GitHub.
4. Після успішного входу вас перенаправить на сторінку Profile, де будуть відображені ім'я та email, отримані від провайдера.

Розбір помилок

Якщо при налаштуванні щось пішло не так, ось кілька порад:

• Переконайтеся, що ви правильно вказали Redirect URI для кожного провайдера.
• Перевірте, чи збігаються Client ID і Client Secret з тими, що в консолі.
• Якщо ви отримуєте 401 Unauthorized, перевірте налаштування scopes у application.yml.

Сьогодні ви зробили великий крок у освоєнні сучасних методів аутентифікації. Справжню магію OAuth2 ви відчуєте, коли зрозумієте, наскільки просто інтегрувати аутентифікацію через Google і GitHub. У реальних проєктах така аутентифікація дозволяє не тільки підвищити безпеку, але й покращити користувацький досвід. І найголовніше — тепер ви точно знаєте, як це працює!