Question

我正在使用AngularJS前端在我的应用中为Spring Security创建自定义登录表单。我很难搞清楚如何处理身份验证。我找到的所有教程和示例都使用JSP，我看到了：

<form name='loginForm'
      action="<c:url value='j_spring_security_check' />" method='POST'>

我想知道Angular中的等价物是什么。我的配置设置为路由到我的自定义登录页面：

@Configuration
@EnableWebSecurity
@Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
public class SecurityConfig extends WebSecurityConfigurerAdapter {

    @Autowired
    public void configureGlobal(AuthenticationManagerBuilder auth)
            throws Exception {
        auth.inMemoryAuthentication().withUser("user").password("pass")
                .roles("USER");
    }

    @Override
    protected void configure(HttpSecurity http) throws Exception {

        http.authorizeRequests().anyRequest().authenticated().and().formLogin().loginPage("/login/login.html").permitAll();
    }
}

然后我想我会在提交用户名/密码时让我的登录页面调用Angular函数submitCredentials(isValid)：

<!doctype html>
<html ng-app="app">
    <head>
        <title>Person Login</title>
        <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
        <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"></script>
        <script src="app.js"></script>
    </head>

    <div class="container">
    <body>
        <h1>Person Login</h1>
        <br>
        <div ng-controller="LoginCtrl">
            <form class="form-horizontal" name="loginForm" novalidate>

                <div class="form-group">
                    <label class="col-sm-1 control-label">Username</label>
                    <div class="col-sm-3">
                        <input class="form-control" name="username" type="text" ng-model="user.username">
                    </div>
                </div>

                <div class="form-group">
                    <label class="col-sm-1 control-label">Password</label>
                    <div class="col-sm-3">
                        <input class="form-control" name="password" type="text" ng-model="user.password">
                    </div>
                </div>

                <br><br>

                <button class="btn btn-primary" ng-click="submitCredentials(loginForm.$valid)">
                    Submit
                </button>
            </form>
        </div>
    </body>
    </div>
</html>

然后在控制器中执行某些操作：

angular.module('app').controller('LoginCtrl', function($scope, $location, $http, $routeParams) {

    $scope.submitCredentials(isValid) {

        if (isValid) {
            // do something to authenticate user
        }
    }
});

这部分我不知道该怎么做。现在我使用内存Spring身份验证作为一个简单的开始，所以如果我可以通过自定义登录实现这一点，我会很高兴。后来我想通过检查数据库中的凭据来进行身份验证。

Answer 1

您有两种选择：

不完整单页应用

此方法允许您按表单和<input type="submit">执行POST请求，从而刷新页面。使用此方法，服务器将为您提供带有cookie的会话ID，并且每个下一个请求都将被验证（浏览器将自动为每个请求添加会话ID）。

完整单页应用

在这种方法中，您创建自定义AuthenticationFilter，它将从用户获取凭据（例如从json或xml）并对其进行身份验证。使用此“登录”请求，您还应提供一个令牌，该令牌将替代会话ID（cookie）。您必须在每个下一个请求中添加此令牌，以便服务器可以解析用户（在标头中，在查询参数中，在路径参数中）。

我建议您阅读这篇文章https://spring.io/guides/tutorials/spring-security-and-angular-js/。它应该清除许多疑点。

使用AngularJS通过自定义登录进行Spring Security身份验证

1 个答案: