TP4 - Login Social con Google OAuth2

Objetivos del TP

En este TP, usted va a:

1. ✅ Configurar un proyecto en Google Cloud
2. ✅ Integrar OAuth2 Client con Spring Security
3. ✅ Recuperar la información del usuario de Google
4. ✅ Vincular las cuentas de Google con los usuarios locales
5. ✅ Combinar login clásico y login social

Duración estimada: 1h30

---

Prerrequisitos

• Una cuenta de Google
• Acceso a Google Cloud Console
• El proyecto del TP8.1 (form login)

---

Parte 1: Configuración de Google Cloud

Paso 1: Crear un Proyecto

1. Ir a https://console.cloud.google.com
2. Crear un nuevo proyecto: "Spring Security Demo"
3. Seleccionar este proyecto

Paso 2: Configurar la Pantalla de Consentimiento OAuth

1. Menú → "APIs & Services" → "OAuth consent screen"
2. Tipo: External
3. Completar:
   • Nombre de la app: "Mi App Spring"
   • Correo de soporte al usuario: su correo electrónico
   • Contacto del desarrollador: su correo electrónico
4. Scopes: Agregar email, profile, openid
5. Usuarios de prueba: Agregar su correo de Google

Paso 3: Crear las Credenciales

1. Menú → "APIs & Services" → "Credentials"
2. "Create Credentials" → "OAuth client ID"
3. Tipo de aplicación: Web application
4. Nombre: "Spring Boot App"
5. URIs de redirección autorizados:

   http://localhost:8080/login/oauth2/code/google
6. Copiar el Client ID y Client Secret

---

Parte 2: Configuración Spring Boot

Dependencias

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-oauth2-client</artifactId>
</dependency>

application.properties

# Google OAuth2
spring.security.oauth2.client.registration.google.client-id=VOTRE_CLIENT_ID
spring.security.oauth2.client.registration.google.client-secret=VOTRE_CLIENT_SECRET
spring.security.oauth2.client.registration.google.scope=openid,profile,email

---

Parte 3: SecurityConfig

@Configuration
@EnableWebSecurity
@RequiredArgsConstructor
public class SecurityConfig {

    private final CustomUserDetailsService userDetailsService;
    private final CustomOAuth2UserService oAuth2UserService;

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        return http
            .authorizeHttpRequests(auth -> auth
                .requestMatchers("/", "/login", "/register", "/error", "/css/**").permitAll()
                .anyRequest().authenticated()
            )
            // Login clásico
            .formLogin(form -> form
                .loginPage("/login")
                .defaultSuccessUrl("/dashboard")
                .permitAll()
            )
            // Login OAuth2
            .oauth2Login(oauth -> oauth
                .loginPage("/login")
                .userInfoEndpoint(userInfo -> userInfo
                    .userService(oAuth2UserService)
                )
                .defaultSuccessUrl("/dashboard")
            )
            .logout(logout -> logout
                .logoutSuccessUrl("/")
                .permitAll()
            )
            .build();
    }

    @Bean
    public PasswordEncoder passwordEncoder() {
        return new BCryptPasswordEncoder();
    }
}

---

Parte 4: CustomOAuth2UserService

@Service
@RequiredArgsConstructor
@Slf4j
public class CustomOAuth2UserService extends DefaultOAuth2UserService {

    private final UserRepository userRepository;
    private final RoleRepository roleRepository;

    @Override
    @Transactional
    public OAuth2User loadUser(OAuth2UserRequest userRequest) throws OAuth2AuthenticationException {
        OAuth2User oauth2User = super.loadUser(userRequest);

        String provider = userRequest.getClientRegistration().getRegistrationId();
        String providerId = oauth2User.getAttribute("sub");  // Google ID
        String email = oauth2User.getAttribute("email");
        String name = oauth2User.getAttribute("name");
        String picture = oauth2User.getAttribute("picture");

        log.info("OAuth2 login: provider={}, email={}", provider, email);

        // Buscar o crear el usuario
        User user = userRepository.findByEmail(email)
            .orElseGet(() -> createOAuth2User(email, name, provider, providerId));

        // Actualizar la información OAuth2
        user.setOauth2Provider(provider);
        user.setOauth2Id(providerId);
        user.setProfilePicture(picture);
        userRepository.save(user);

        return new CustomOAuth2User(oauth2User, user);
    }

    private User createOAuth2User(String email, String name, String provider, String providerId) {
        User user = new User();
        user.setEmail(email);
        user.setUsername(email);  // Usar el email como username
        user.setPassword("");     // Sin contraseña para OAuth2
        user.setEnabled(true);
        user.setOauth2Provider(provider);
        user.setOauth2Id(providerId);

        // Extraer nombre/apellido si es posible
        if (name != null) {
            String[] parts = name.split(" ", 2);
            user.setFirstName(parts[0]);
            if (parts.length > 1) {
                user.setLastName(parts[1]);
            }
        }

        // Asignar rol por defecto
        Role userRole = roleRepository.findByName("ROLE_USER")
            .orElseThrow(() -> new RuntimeException("Role ROLE_USER not found"));
        user.getRoles().add(userRole);

        return userRepository.save(user);
    }
}

---

Parte 5: CustomOAuth2User

public class CustomOAuth2User implements OAuth2User {

    private final OAuth2User oauth2User;
    private final User user;

    public CustomOAuth2User(OAuth2User oauth2User, User user) {
        this.oauth2User = oauth2User;
        this.user = user;
    }

    @Override
    public Map<String, Object> getAttributes() {
        return oauth2User.getAttributes();
    }

    @Override
    public Collection<? extends GrantedAuthority> getAuthorities() {
        return user.getRoles().stream()
            .map(role -> new SimpleGrantedAuthority(role.getName()))
            .collect(Collectors.toSet());
    }

    @Override
    public String getName() {
        return user.getUsername();
    }

    public User getUser() {
        return user;
    }

    public String getEmail() {
        return oauth2User.getAttribute("email");
    }

    public String getPicture() {
        return oauth2User.getAttribute("picture");
    }
}

---

Parte 6: Actualización de la Entidad User

@Entity
@Table(name = "users")
@Data
@NoArgsConstructor
public class User {
    @Id
    @GeneratedValue(strategy = GenerationType.IDENTITY)
    private Long id;

    @Column(unique = true, nullable = false)
    private String username;

    private String password;  // Nullable para OAuth2

    @Column(unique = true, nullable = false)
    private String email;

    private String firstName;
    private String lastName;
    private String profilePicture;

    // Campos OAuth2
    private String oauth2Provider;  // google, github, etc.
    private String oauth2Id;        // ID en el provider

    private boolean enabled = true;

    @ManyToMany(fetch = FetchType.EAGER)
    @JoinTable(name = "user_roles",
        joinColumns = @JoinColumn(name = "user_id"),
        inverseJoinColumns = @JoinColumn(name = "role_id"))
    private Set<Role> roles = new HashSet<>();

    public boolean isOAuth2User() {
        return oauth2Provider != null;
    }
}

---

Parte 7: Página de Login

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>Inicio de sesión</title>
    <style>
        .login-container { max-width: 400px; margin: 50px auto; padding: 20px; }
        .oauth-btn { display: block; padding: 10px; margin: 10px 0; text-align: center; 
                     text-decoration: none; border-radius: 5px; }
        .google { background: #db4437; color: white; }
        .separator { text-align: center; margin: 20px 0; color: #666; }
        .form-group { margin-bottom: 15px; }
        input { width: 100%; padding: 10px; margin-top: 5px; }
        button { width: 100%; padding: 10px; background: #007bff; color: white; 
                 border: none; cursor: pointer; }
    </style>
</head>
<body>
    <div class="login-container">
        <h1>Inicio de sesión</h1>

        <div th:if="${param.error}" style="color:red; margin-bottom:15px;">
            Credenciales incorrectas.
        </div>
        <div th:if="${param.logout}" style="color:green; margin-bottom:15px;">
            Cierre de sesión exitoso.
        </div>

        <!-- OAuth2 Login -->
        <a href="/oauth2/authorization/google" class="oauth-btn google">
            🔵 Iniciar sesión con Google
        </a>

        <div class="separator">— o —</div>

        <!-- Form Login -->
        <form th:action="@{/login}" method="post">
            <div class="form-group">
                <label>Nombre de usuario</label>
                <input type="text" name="username" required>
            </div>
            <div class="form-group">
                <label>Contraseña</label>
                <input type="password" name="password" required>
            </div>
            <button type="submit">Iniciar sesión</button>
        </form>

        <p style="text-align:center; margin-top:20px;">
            <a href="/register">¿No tiene cuenta? Regístrese</a>
        </p>
    </div>
</body>
</html>

---

Parte 8: Dashboard con Información OAuth2

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<head>
    <title>Dashboard</title>
</head>
<body>
    <h1>Dashboard</h1>

    <div sec:authorize="isAuthenticated()">
        <h2>Bienvenido, <span sec:authentication="name">User</span>!</h2>

        <!-- Mostrar la foto si es OAuth2 -->
        <div th:if="${user != null and user.profilePicture != null}">
            <img th:src="${user.profilePicture}" alt="Profile" 
                 style="width:50px; height:50px; border-radius:50%;">
        </div>

        <h3>Información:</h3>
        <ul>
            <li>Email: <span th:text="${user.email}">email@test.com</span></li>
            <li>Proveedor: <span th:text="${user.oauth2Provider ?: 'Local'}">-</span></li>
            <li>Roles: <span sec:authentication="authorities">ROLE_USER</span></li>
        </ul>

        <form th:action="@{/logout}" method="post">
            <button type="submit">Cerrar sesión</button>
        </form>
    </div>
</body>
</html>

Controller

@Controller
public class DashboardController {

    @GetMapping("/dashboard")
    public String dashboard(Model model, Authentication authentication) {
        if (authentication.getPrincipal() instanceof CustomOAuth2User) {
            CustomOAuth2User oAuth2User = (CustomOAuth2User) authentication.getPrincipal();
            model.addAttribute("user", oAuth2User.getUser());
        } else if (authentication.getPrincipal() instanceof CustomUserDetails) {
            CustomUserDetails userDetails = (CustomUserDetails) authentication.getPrincipal();
            model.addAttribute("user", userDetails.getUser());
        }
        return "dashboard";
    }
}

---

Parte 9: Prueba

Checklist

1. Ir a http://localhost:8080/login
2. Hacer clic en "Iniciar sesión con Google"
3. Redirección a Google
4. Autorizar la aplicación
5. Redirección a /dashboard
6. Ver la información de Google (email, foto)
7. Verificar en BDD: usuario creado con oauth2_provider="google"
8. Cerrar sesión
9. Volver a iniciar sesión con Google → mismo usuario
10. Iniciar sesión con usuario/contraseña clásico → también funciona

Verificación H2

SELECT id, username, email, oauth2_provider, oauth2_id 
FROM users;

---

Bonus: Vincular una Cuenta de Google a una Cuenta Existente

Endpoint para Vincular

@PostMapping("/link/google")
@PreAuthorize("isAuthenticated()")
public String linkGoogle(@AuthenticationPrincipal CustomUserDetails currentUser) {
    // Redirigir a OAuth2 Google con un state especial
    return "redirect:/oauth2/authorization/google?link=true";
}

Handler de Éxito Personalizado

@Component
public class OAuth2SuccessHandler extends SimpleUrlAuthenticationSuccessHandler {

    @Override
    public void onAuthenticationSuccess(HttpServletRequest request, 
                                        HttpServletResponse response,
                                        Authentication authentication) throws IOException {
        // Verificar si es un linking
        if (request.getParameter("link") != null) {
            // Vincular a la cuenta existente
            // ...
        }
        
        super.onAuthenticationSuccess(request, response, authentication);
    }
}

---

Resumen

Flujo OAuth2 con Google

1. Clic "Login with Google"
2. Redirección: /oauth2/authorization/google
3. Google: Login + Consentimiento
4. Callback: /login/oauth2/code/google?code=XXX
5. Spring: Intercambio de code → tokens
6. CustomOAuth2UserService: Crea/encuentra el usuario
7. Dashboard: ¡Conectado!

Puntos Clave

• spring-boot-starter-oauth2-client gestiona todo el flujo
• CustomOAuth2UserService para personalizar la creación de usuario
• Un usuario puede tener una cuenta local Y OAuth2
• La información de Google (foto, nombre) puede almacenarse localmente

---

🎯 ¡Módulo Terminado!

¡Felicidades! Ha completado el Módulo 8 - Spring Security.

Resumen:

• Capítulo 1: Arquitectura Spring Security
• Capítulo 2: Form Login y HTTP Basic
• Capítulo 3: Autenticación JWT
• Capítulo 4: OAuth2 y Login Social
• Capítulo 5: Seguridad Avanzada (CSRF, CORS, @PreAuthorize)
• TP8.1: Form Login
• TP8.2: API REST con JWT
• TP8.3: Roles y Permisos
• TP8.4: OAuth2 Google (este TP)

➡️ Volver al Módulo 8

---

⬅️ Volver al Plan de Curso