Лекция 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. В реальных проектах такая аутентификация позволяет не только повысить безопасность, но и улучшить пользовательский опыт. А главное — теперь вы точно знаете, как это работает!