TP4 - Login Social com Google OAuth2

Objetivos do TP

Neste TP, você irá:

1. ✅ Configurar um projeto Google Cloud
2. ✅ Integrar OAuth2 Client com Spring Security
3. ✅ Recuperar as informações do usuário Google
4. ✅ Vincular contas Google a usuários locais
5. ✅ Combinar login clássico e login social

Duração estimada: 1h30

---

Pré-requisitos

• Uma conta Google
• Acesso ao Google Cloud Console
• O projeto do TP8.1 (form login)

---

Parte 1: Configuração Google Cloud

Etapa 1: Criar um Projeto

1. Acesse https://console.cloud.google.com
2. Crie um novo projeto: "Spring Security Demo"
3. Selecione este projeto

Etapa 2: Configurar OAuth Consent Screen

1. Menu → "APIs & Services" → "OAuth consent screen"
2. Tipo: External
3. Preencha:
   • Nome do app: "Meu App Spring"
   • E-mail de suporte ao usuário: seu e-mail
   • Contato do desenvolvedor: seu e-mail
4. Scopes: Adicione email, profile, openid
5. Test users: Adicione seu e-mail Google

Etapa 3: Criar as Credenciais

1. Menu → "APIs & Services" → "Credentials"
2. "Create Credentials" → "OAuth client ID"
3. Tipo de aplicação: Web application
4. Nome: "Spring Boot App"
5. Authorized redirect URIs:

   http://localhost:8080/login/oauth2/code/google
6. Copie o Client ID e Client Secret

---

Parte 2: Configuração Spring Boot

Dependências

<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ássico
            .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 ou criar o usuário
        User user = userRepository.findByEmail(email)
            .orElseGet(() -> createOAuth2User(email, name, provider, providerId));

        // Atualizar informações 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 o e-mail como username
        user.setPassword("");     // Sem senha para OAuth2
        user.setEnabled(true);
        user.setOauth2Provider(provider);
        user.setOauth2Id(providerId);

        // Extrair primeiro nome/sobrenome se possível
        if (name != null) {
            String[] parts = name.split(" ", 2);
            user.setFirstName(parts[0]);
            if (parts.length > 1) {
                user.setLastName(parts[1]);
            }
        }

        // Atribuir papel padrão
        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: User Entity Atualizada

@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 no 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>Login</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>Login</h1>

        <div th:if="${param.error}" style="color:red; margin-bottom:15px;">
            Credenciais incorretas.
        </div>
        <div th:if="${param.logout}" style="color:green; margin-bottom:15px;">
            Logout realizado com sucesso.
        </div>

        <!-- OAuth2 Login -->
        <a href="/oauth2/authorization/google" class="oauth-btn google">
            🔵 Entrar com Google
        </a>

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

        <!-- Form Login -->
        <form th:action="@{/login}" method="post">
            <div class="form-group">
                <label>Nome de usuário</label>
                <input type="text" name="username" required>
            </div>
            <div class="form-group">
                <label>Senha</label>
                <input type="password" name="password" required>
            </div>
            <button type="submit">Entrar</button>
        </form>

        <p style="text-align:center; margin-top:20px;">
            <a href="/register">Não tem conta? Cadastre-se</a>
        </p>
    </div>
</body>
</html>

---

Parte 8: Dashboard com Info 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>Bem-vindo, <span sec:authentication="name">Usuário</span>!</h2>

        <!-- Exibir foto se 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>Informações:</h3>
        <ul>
            <li>Email: <span th:text="${user.email}">email@test.com</span></li>
            <li>Provider: <span th:text="${user.oauth2Provider ?: 'Local'}">-</span></li>
            <li>Papéis: <span sec:authentication="authorities">ROLE_USER</span></li>
        </ul>

        <form th:action="@{/logout}" method="post">
            <button type="submit">Sair</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: Teste

Checklist

1. Acesse http://localhost:8080/login
2. Clique em "Entrar com Google"
3. Redirecionamento para o Google
4. Autorize o aplicativo
5. Redirecionamento para /dashboard
6. Veja as informações do Google (e-mail, foto)
7. Verifique no banco de dados: usuário criado com oauth2_provider="google"
8. Faça logout
9. Entre novamente com Google → mesmo usuário
10. Entre com login/senha clássico → também funciona

Verificação H2

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

---

Bônus: Vincular uma Conta Google a uma Conta Existente

Endpoint para Vincular

@PostMapping("/link/google")
@PreAuthorize("isAuthenticated()")
public String linkGoogle(@AuthenticationPrincipal CustomUserDetails currentUser) {
    // Redirecionar para OAuth2 Google com um state especial
    return "redirect:/oauth2/authorization/google?link=true";
}

Handler de Sucesso Personalizado

@Component
public class OAuth2SuccessHandler extends SimpleUrlAuthenticationSuccessHandler {

    @Override
    public void onAuthenticationSuccess(HttpServletRequest request, 
                                        HttpServletResponse response,
                                        Authentication authentication) throws IOException {
        // Verificar se é um linking
        if (request.getParameter("link") != null) {
            // Vincular à conta existente
            // ...
        }
        
        super.onAuthenticationSuccess(request, response, authentication);
    }
}

---

Resumo

Fluxo OAuth2 com Google

1. Clique "Login with Google"
2. Redirecionamento: /oauth2/authorization/google
3. Google: Login + Consentimento
4. Callback: /login/oauth2/code/google?code=XXX
5. Spring: Troca código → tokens
6. CustomOAuth2UserService: Cria/encontra o usuário
7. Dashboard: Conectado!

Pontos-Chave

• spring-boot-starter-oauth2-client gerencia todo o fluxo
• CustomOAuth2UserService para personalizar a criação do usuário
• Um usuário pode ter conta local E OAuth2
• As informações do Google (foto, nome) podem ser armazenadas localmente

---

🎯 Módulo Concluído!

Parabéns! Você concluiu o Módulo 8 - Spring Security.

Recapitulação:

• Capítulo 1: Arquitetura Spring Security
• Capítulo 2: Form Login e HTTP Basic
• Capítulo 3: JWT Authentication
• Capítulo 4: OAuth2 e Login Social
• Capítulo 5: Segurança Avançada (CSRF, CORS, @PreAuthorize)
• TP8.1: Form Login
• TP8.2: API REST com JWT
• TP8.3: Papéis e Permissões
• TP8.4: OAuth2 Google (este TP)

➡️ Voltar ao Módulo 8

---

⬅️ Voltar ao Plano de Curso