基于SpringBoot和OAuth2，实现通过Github授权登录应用

news2025/1/8 21:45:34

基于SpringBoot和OAuth2，实现通过Github授权登录应用

文章目录

基于SpringBoot和OAuth2，实现通过Github授权登录应用
- 0. 引言
- 1. 创建Github应用
- 2. 创建SpringBoot测试项目
- - 2.1 初始化项目
  - 2.2 设置配置文件信息
  - 2.3 创建Controller层
  - 2.4 创建Html页面
- 3. 启动应用
- 4. 其他

0. 引言

在注册登录网站或者应用时，通常会有社交方式登录，例如在登录CSDN时，会提供多种登陆方式，如下图。

在这里插入图片描述
本文介绍通过SpringBoot和OAuth2，开发自己的应用，并实现通过Github授权登录。

1. 创建Github应用

首先登录Github，进入到Settings-Developer Settings，点击OAuth Apps，新建New OAuth App
填写相关信息

点击注册应用

注册完成后打开，可以获得Client ID 和Client secrets

注意！
Client secrets要注意复制下来保存，不然在进入这个页面，也获取不到原来完整的Client secrets了，只能重新生成！

在这里插入图片描述

2. 创建SpringBoot测试项目

2.1 初始化项目

初始化项目，同时应包含以下依赖

Spring Web
Thymeleaf
Spring Security
OAuth2 Client

在这里插入图片描述
创建完成后，创建Controller文件和index文件。最终项目结构目录如下：

2.2 设置配置文件信息

application.yml：

spring:
  security:
    oauth2:
      client:
        registration:
          github:
            client-id: xxx
            client-secret: xxx

将上面生成的client-id和client-secret写入配置文件

2.3 创建Controller层

IndexController.java

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 SaoE
 * @date 2024/12/29 21:29
 */
@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";
    }
}

2.4 创建Html页面

resources/templates/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>

3. 启动应用

在浏览器输入并访问http://localhost:8080/，此时浏览器将被重定向到默认的自动生成的登录页面，该页面显示了一个用于GitHub登录的链接。

点击授权

此时，OAuth客户端访问GitHub的获取用户信息的接口获取基本个人资料信息，并建立一个已认证的会话。

4. 其他

在SpringBoot源码的CommonOAuth2Provider类中，默认配置了GOOGLE、FACEBOOK、GITHUB和OKTA的授权登录配置
在这里插入图片描述
以Github为例，默认配置如下：

    GITHUB {
        public Builder getBuilder(String registrationId) {
            Builder builder = this.getBuilder(registrationId, ClientAuthenticationMethod.CLIENT_SECRET_BASIC, "{baseUrl}/{action}/oauth2/code/{registrationId}");
            builder.scope(new String[]{"read:user"});
            builder.authorizationUri("https://github.com/login/oauth/authorize");
            builder.tokenUri("https://github.com/login/oauth/access_token");
            builder.userInfoUri("https://api.github.com/user");
            builder.userNameAttributeName("id");
            builder.clientName("GitHub");
            return builder;
        }
    },