Spring Security 与 OAuth 2.0 登录实现指南

news2024/10/27 13:20:49

文章目录

- 一、项目概述
- 二、环境准备
- 三、创建GitHub OAuth应用
- 四、项目依赖配置
- 五、配置OAuth 2.0
- 六、创建控制器
- 七、创建视图
- 八、运行应用
- 九、用户界面展示
- 十、总结

在现代的Web应用中，安全性是一个不可忽视的因素。OAuth 2.0作为一种流行的授权框架，提供了一种便捷的方式让用户通过社交平台（如GitHub）登录你的应用。本文将详细介绍如何使用Spring Security实现OAuth 2.0登录，并在页面上展示用户信息。

一、项目概述

本项目旨在实现一个简单的Web应用，允许用户通过GitHub进行登录。我们将使用Spring Boot和Spring Security进行快速开发。

二、环境准备

确保你已经安装了以下环境：

JDK 8或更高版本
Maven或Gradle
IDE（如IntelliJ IDEA或Eclipse）

三、创建GitHub OAuth应用

在开始编码之前，你需要在GitHub上创建一个OAuth应用。以下是创建过程的步骤：

登录GitHub：访问GitHub官网并登录你的账号。
进入设置：点击右上角的个人头像，选择“Settings”。
找到OAuth应用：在左侧菜单中，点击“Developer settings”，然后选择“OAuth Apps”。
注册新应用：点击“New OAuth App”按钮。
填写应用信息：填写应用名称、主页 URL 和回调 URL（通常是 http://localhost:8080/login/oauth2/code/github），然后点击“Register application”。
获取Client ID和Client Secret：注册完成后，你会看到Client ID和Client Secret，保存这两个值。

四、项目依赖配置

在你的pom.xml中添加以下依赖（如果你使用的是Maven）：

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

五、配置OAuth 2.0

在application.yml中配置GitHub的OAuth 2.0客户端信息，填入你在上面步骤中获取的client-id和client-secret。

spring:
  security:
    oauth2:
      client:
        registration:
          github:
            client-id: 填入你的数据
            client-secret: 填入你的数据

六、创建控制器

接下来，我们需要创建一个控制器来处理登录后的请求。以下是IndexController的代码：

package com.takumilove.oauth2logindemo.controller;

import org.springframework.security.core.annotation.AuthenticationPrincipal;
import org.springframework.security.oauth2.client.OAuth2AuthorizedClient;
import org.springframework.security.oauth2.client.annotation.RegisteredOAuth2AuthorizedClient;
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;

/**
 * @author RaoPengFei
 * @create 2024/10/12
 */
@Controller
public class IndexController {
    @GetMapping("/")
    public String index(Model model, @RegisteredOAuth2AuthorizedClient OAuth2AuthorizedClient authorizedClient,
                        @AuthenticationPrincipal OAuth2User oauth2User) {
        model.addAttribute("userName", oauth2User.getName());
        model.addAttribute("clientName", authorizedClient.getClientRegistration().getClientName());
        model.addAttribute("userAttributes", oauth2User.getAttributes());
        return "index";
    }
}

七、创建视图

使用Thymeleaf创建登录后的视图，以下是index.html的代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity5">
<head>
    <title>Spring Security - OAuth 2.0 Login</title>
    <meta charset="utf-8" />
</head>
<body>
<div style="float: right" th:fragment="logout" sec:authorize="isAuthenticated()">
    <div style="float:left">
        <span style="font-weight:bold">User: </span><span sec:authentication="name"></span>
    </div>
    <div style="float:none">&nbsp;</div>
    <div style="float:right">
        <form action="#" th:action="@{/logout}" method="post">
            <input type="submit" value="Logout" />
        </form>
    </div>
</div>
<h1>OAuth 2.0 Login with Spring Security</h1>
<div>
    You are successfully logged in <span style="font-weight:bold" th:text="${userName}"></span>
    via the OAuth 2.0 Client <span style="font-weight:bold" th:text="${clientName}"></span>
</div>
<div>&nbsp;</div>
<div>
    <span style="font-weight:bold">User Attributes:</span>
    <ul>
        <li th:each="userAttribute : ${userAttributes}">
            <span style="font-weight:bold" th:text="${userAttribute.key}"></span>: <span th:text="${userAttribute.value}"></span>
        </li>
    </ul>
</div>
</body>
</html>