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

Question

I am creating a custom login form for Spring Security in my app with an AngularJS front end. 我正在使用AngularJS前端在我的应用程序中为Spring Security创建一个自定义登录表单。 I am having a hard time figuring out how to handle the authentication. 我很难弄清楚如何处理身份验证。 All the tutorials and examples I find are using JSP and I see this: 我发现的所有教程和示例都在使用JSP，我看到了以下内容：

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

I am wondering what the equivalent would be in Angular. 我想知道在Angular中会是什么。 My configuration is set up to route to my custom login page: 我的配置已设置为路由到我的自定义登录页面：

@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();
    }
}

And then I thought I would have my login page call an Angular function submitCredentials(isValid) on submission of username/password: 然后我以为我的登录页面将在提交用户名/密码时调用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>

And then do something in the controller: 然后在控制器中执行以下操作：

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

    $scope.submitCredentials(isValid) {

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

It is that part that I don't know what to do. 我不知道该怎么做。 Right now I am using the in memory Spring authentication as a simple start, so if I could achieve that through the custom login I will be happy. 现在，我将使用内存中的Spring身份验证作为一个简单的开始，因此，如果可以通过自定义登录实现这一点，我会很高兴的。 Later I want to do authentication through checking credentials in a database. 稍后，我想通过检查数据库中的凭据来进行身份验证。

Answer 1

You have two options: 您有两种选择：

not full Single page Applications 不完整单页应用程序

This approach allows you to do POST request by form and <input type="submit"> which results in refresh of a page. 这种方法允许您通过表单和<input type="submit">进行POST请求，从而刷新页面。 With this approach server will give you session id with cookie, and every next request will be authenticated (browser will automatically add session id to every request). 使用这种方法，服务器将为您提供带有cookie的会话ID，并且将对每个下一个请求进行身份验证（浏览器将自动向每个请求添加会话ID）。

Full Single Page Application 完整单页申请

In this approach you create custom AuthenticationFilter which will take credentials from user (for example from json or xml) and authenticate it. 在这种方法中，您将创建自定义AuthenticationFilter ，它将从用户（例如，从json或xml）获取凭据并进行身份验证。 With this "login" request, you also should provide a token which will be a substitute to session id (cookie). 通过此“登录”请求，您还应该提供一个令牌，该令牌将替代会话ID（cookie）。 You have to add this token with every next request, so server can resolve user (in header, in query parameter, in path parameter). 您必须在每个下一个请求中添加此令牌，以便服务器可以解析用户（在标头，查询参数，路径参数中）。

I would suggest to read this article https://spring.io/guides/tutorials/spring-security-and-angular-js/ . 我建议阅读这篇文章https://spring.io/guides/tutorials/spring-security-and-angular-js/ 。 It should clear up many doubts. 它应该消除许多疑问。

通过使用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