How can I pass credentials from Angular2 frontend to Spring backend (Basic-Authentification with Spring Security)

Question

I'm developing an application with spring as backend and angular2 as frontend, The Backend side is secured (with Spring security), and I have the default login form when I run it. I want to log in from the client side to the server side but when I try to pass the credentials I have these errors in the browser console

The configuration class

@Configuration @EnableWebSecurity public class WebSecurityConfig extends WebSecurityConfigurerAdapter { @Autowired public void configureGlobal(AuthenticationManagerBuilder auth) throws Exception { auth.inMemoryAuthentication().withUser("admin").password("admin").roles("ADMIN", "USER").and().withUser("user") .password("user").roles("USER"); } @Override protected void configure(HttpSecurity http) throws Exception { http .csrf().disable() .authorizeRequests() .antMatchers("/etudiant/list").hasRole("ADMIN") .anyRequest().authenticated() .and() .formLogin() .and() .httpBasic(); } }

The security filter in web.xml:

<filter> <filter-name>springSecurityFilterChain</filter-name> <filter-class> org.springframework.web.filter.DelegatingFilterProxy </filter-class> </filter> <filter-mapping> <filter-name>springSecurityFilterChain</filter-name> <url-pattern>/*</url-pattern> </filter-mapping>

The login form in the angular2 side:

<div class="login jumbotron center-block"> <h1>Login</h1> <form role="form" (submit)="login(username.value, password.value)"> <div class="form-group"> <label for="username">Username</label> <input type="text" #username class="form-control" id="username" placeholder="Username"> </div> <div class="form-group"> <label for="password">Password</label> <input type="password" #password class="form-control" id="password" placeholder="Password"> </div> <button type="submit" class="btn btn-default">Submit</button> </form> </div>

You'll have to add http headers to login, you can find how to do that here - stackoverflow.com/questions34464108/… — pkoli
– pkoli, Commented Mar 7, 2017 at 17:49

Jiujiu · Accepted Answer · 2017-03-08 05:57:17Z

I would create an @Injectable() AuthService with the following method called by the form.

login(usercreds) { const headers = new Headers(); const creds = 'name=' + usercreds.username + '&password=' + usercreds.password; headers.append('Content-Type', 'application/x-www-form-urlencoded'); return new Promise((resolve) => { this.http.post('http://localhost:3333/authenticate', creds, {headers: headers}).subscribe((data) => { if (data.json().success) { // window.localStorage.setItem('auth_key', data.json().token); this.userId = data.json().userId; this.isAuthenticated = true; } resolve(this.isAuthenticated); }); }); }

Do not forget to declare this component as provider in the app.module.ts file

I did like this , I just changed the url in the post method but it shows these errors [ i.sstatic.net/dsscG.png ] ( I edited my question)
well it seems your url http://localhost:8080/studentmanager/login is not existing, that is why you have an error HTTP 404
It's the link of the default login page when I run the back-end app , do you think that I have to do a Custom login page ?? If you have any ideas please propose it ! I need suggestions
I have done my login page on my frontend app which post the credentials to the backend app. In my case with OAuth2 it works correctly

Collectives™ on Stack Overflow

How can I pass credentials from Angular2 frontend to Spring backend (Basic-Authentification with Spring Security)

The configuration class

The security filter in web.xml:

The login form in the angular2 side:

1 Answer 1

6 Comments

Hot Network Questions

Collectives™ on Stack Overflow

The configuration class

The security filter in web.xml:

The login form in the angular2 side:

1 Answer 1

6 Comments

Related