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

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 个解决方案

解决方案1
4 已采纳 2015-07-24 17:06:17

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

问题描述

1 个解决方案

解决方案1 4 已采纳 2015-07-24 17:06:17

解决方案1
4 已采纳 2015-07-24 17:06:17