使用 AngularJS $http.post 登录 Spring Boot

Posted 2023-02-27

【中文标题】使用 AngularJS $http.post 登录 Spring Boot

【英文标题】：Login to Spring Boot with AngularJS $http.post

【发布时间】：2016-05-10 13:06:24

【问题描述】：

我有一个 Spring Boot 应用程序，想通过我的 angularJS 服务登录它。我确实通过邮递员登录，它将cookie保存在我的浏览器中，但我想使用我的服务再次登录。由于我的 cookie，我可以在我的 spring boot 应用程序中调用任何控制器（它们都需要身份验证）。但是所有登录请求都失败并出现错误“未经授权”。完整的浏览器控制台输出 - POST http://localhost:3344/bl/login 401（未授权）

spring 的安全配置（我扩展了 WebSecurityConfigurerAdapter）：

@Override
    protected void configure(AuthenticationManagerBuilder auth) throws Exception 
        auth.jdbcAuthentication()
                .dataSource(dataSource)
                .passwordEncoder(passwordEncoder())
                .usersByUsernameQuery(USERS_BY_USERNAME_QUERY)
                .authoritiesByUsernameQuery(AUTHORITIES_BY_USERNAME_QUERY);
    

    @Override
    protected void configure(HttpSecurity http) throws Exception 
        http.csrf().disable()
                    .exceptionHandling()
                    .authenticationEntryPoint(restAuthenticationEntryPoint)
                    .and()
                .authorizeRequests()
                    .antMatchers("/").authenticated()
                    .and()
                .formLogin()
                    .loginProcessingUrl("/bl/login")
                    .usernameParameter("user")
                    .passwordParameter("pass")
                    .successHandler(authenticationSuccessHandler)
                    .failureHandler(new SimpleUrlAuthenticationFailureHandler())
                    .and()
                .logout()
                    .logoutUrl("/logout")
                    .invalidateHttpSession(true);
    

我的 Angular 服务非常简单：

loginModule.factory('loginService', function($http) 
  return 
    login: function(username, password) 
      $http.post('/bl/login', user: 'admin', pass: 'admin').then(
        function(response) 
          window.alert('success')
        ,
        function(response)
          window.alert('fail')
        );
    
  ;
);

我还创建了一个控制器作为“模拟”登录服务来测试我的 Angular 代码：

@RequestMapping(value ="/bl/login2", produces="application/json")
  JSONResponse login(@RequestBody LoginCreds credentials) 

    return new JSONResponse("logged in " + credentials.getUser());
  

此控制器有效，我可以看到我的登录名和密码已正确传递，并且我将响应返回给我的 Angular 服务。 LoginCreds 包含 2 个字符串 'user' 和 'pass'。 JSONResponse 包含一个字符串。

【问题讨论】：

也许这可以帮助spring.io/blog/2015/01/12/…

【参考方案1】：

解决了，问题是在我的 spring 配置中我有“formLogin()”，这意味着我必须将请求中的内容类型标头从 angular 服务更改为“application/x-www-form-urlencoded”。 并相应地序列化数据。 This link explains it with examples.

我的最终结果如下：

     var req = 
        method: 'POST',
        url: 'bl/login',
        headers:  'Content-Type': 'application/x-www-form-urlencoded' ,
        data: $.param( user: username, pass: password ),
      ;

      $http(req).then(
        function(response) 
          window.alert('success')
        ,
        function(response)
          window.alert('fail')
        );
      

由于 Angular 默认将数据序列化为 JSON，我们需要使用 $.param() 函数进行序列化。

【讨论】：

谢谢！这对我帮助很大。