5.3.2 创建自定义登录页面

默认登录页面比您开始使用的笨重的 HTTP basic 对话框要好得多,但它仍然相当简单,与 Taco Cloud 中其他部分的外观风格格不一致。要替换内置登录页面,首先需要告诉 Spring Security 您的登录页面路径。这可以通过调用 HttpSecurity 对象上的 formLogin()来完成:

@Bean
public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
  return http
    .authorizeRequests()
      .antMatchers("/design", "/orders").access("hasRole('USER')")
      .antMatchers("/", "/**").access("permitAll()")

    .and()
      .formLogin()
        .loginPage("/login")

    .and()
    .build();
}

请注意,在调用 formLogin() 之前,需将此部分配置与前一部分配置连接起来,调用了 and()and() 方法表示您已经完成了 授权配置,并准备应用一些额外的 HTTP 配置。每当开始新的一部分配置时,就可以使用 and()

连接完成后,调用 formLogin() 开始配置自定义登录表单。之后的 loginPage() 指定自定义登录页的路径。当 Spring Security 确定用户未经过身份验证且需要登录时,它将重定向到此路径上。

现在您需要提供一个控制器来处理该路径上的请求。因为您的登录页面只是一个简单的页面,可以简单的在 WebConfig 中声明它是一个视图。 下面的 AddViewController() 方法,设置登录页视图控制器,并将路径“/”映射到主控制器上:

@Override
public void addViewControllers(ViewControllerRegistry registry) {
  registry.addViewController("/").setViewName("home");
  registry.addViewController("/login");
}

最后,您需要定义登录页面本身。因为您用的是 Thymeleaf 模板引擎,以下 Thymeleaf 模板应该可以正常工作:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
  <head>
    <title>Taco Cloud</title>
  </head>

  <body>
    <h1>Login</h1>
    <img th:src="@{/images/TacoCloud.png}"/>

    <div th:if="${error}">
      Unable to login. Check your username and password.
    </div>

    <p>New here? Click
      <a th:href="@{/register}">here</a> to register.</p>

    <form method="POST" th:action="@{/login}" id="loginForm">
      <label for="username">Username: </label>
      <input type="text" name="username" id="username" /><br/>

      <label for="password">Password: </label>
      <input type="password" name="password" id="password" /><br/>

      <input type="submit" value="Login"/>
    </form>
  </body>
</html>

关于这个登录页面,需要注意的是提交表单请求的的路径,以及用户名和密码字段的名称。默认情况下,Spring Security 侦听路径 /login 的登录请求,用户名和密码字段应命名为 username 和 password。然而这是可配置的。例如,以下配置自定义了路径和字段 名:

.and()
  .formLogin()
    .loginPage("/login")
    .loginProcessingUrl("/authenticate")
    .usernameParameter("user")
    .passwordParameter("pwd")

这里,您指定 Spring Security 应该侦听 /authenticate 路径的请求以验证登录。此外,用户名和密码字段现在应命名为 user 和 pwd。

默认情况下,当 Spring Security 确定需要登录时,一旦成功登录就会将用户直接导航到他们浏览的页面。如果用户直接访问登录页面,成功的登录会将它们带到根路径(例如:主页)。但您可以指定默认的成功页面:

.and()
  .formLogin()
    .loginPage("/login")
    .defaultSuccessUrl("/design")

按照这里的配置,如果用户直接访问登录页面后登录成功,他们将被引导到 /design 页面。

可选择的,您可以强制用户登录后进入 /design 页面,即使他们在登录之前,正在访问的其他页面。这通过将 true 作为第二个参数传递给 defaultSuccessUrl:

.and()
  .formLogin()
    .loginPage("/login")
    .defaultSuccessUrl("/design", true)

在 web 中进行身份验证的最常见方式就是使用用户名和密码进行登录。但是,让我们看一看其他方法,使用第三方登录页面来验证用户身份。

results matching ""

    No results matching ""