web-dev-qa-db-fra.com

connexion angulaire 2 avec sécurité de ressort

j'essaie d'intégrer Spring Security à un identifiant angular 2 personnalisé, c'est-à-dire un point de terminaison spécifique de mon application protégée avec Spring Security. En essayant d'y accéder, il sera redirigé vers/l'identifiant géré dans angular 2. Dans l'état actuel des choses, je n'ai pas savoir comment effectuer la connexion et accorder l'accès à l'API backend une fois connecté.

je configure la sécurité de ressort comme suit:

@Override
protected void configure(final HttpSecurity http) throws Exception {
    http
        .csrf().disable()
        .cors().and()
        .authorizeRequests()
        .antMatchers("/api/someEndpoint/**")
        .hasRole(ADMIN_ROLE).and().formLogin()
        .loginPage("/login").and().logout();
}


@Override
protected void configure(final AuthenticationManagerBuilder auth) throws Exception {
    auth.userDetailsService(userDetailsService).passwordEncoder(passwordEncoder);
}

comme j'avais le login par défaut, tout fonctionnait bien, mais je me suis retrouvé dans l'impossibilité de créer une intégration de connexion angulaire 2 en fonctionnement .

login(loginDetails:Object) {
    console.log(loginDetails)
    const headers = new Headers({ 'Content-Type': 'application/json' });
const options = new RequestOptions({ headers: headers });
const body = JSON.stringify(loginDetails);
    console.log(headers);
    console.log(body);
return this.http.post(this.loginUrl, body, options) 
}

pour autant que je sache, les valeurs de sécurité par défaut du nom d'utilisateur et du mot de passe sont les noms "nom d'utilisateur" et "mot de passe", qui sont transmises dans le corps de la requête. Ainsi, lorsque vous transmettez des données utilisateur non valides telles que {"username":"admin", "password" : "pass"}I, elles doivent être redirigées vers/login? erreur ou quelque chose, et quand authentifié avec succès je devrais être redirigé vers/bienvenue et rester authentifié

J'ai l'utilisateur et passe défini dans ma base de données et mes contrôles personnalisés userDetailsService contre elle toutes les réponses, commentaires ou questions sont les bienvenus

Une fois que vous travaillez avec l'API, vous devez utiliser soit l'authentification HTTP Basic, soit l'authentification par jeton, et non pas le premier formulaire. Il est nécessaire d'utiliser HTTPS lors de l'utilisation de l'un d'eux.

Pour utiliser HTTP de manière basique avec Angular 2, le service de connexion peut se présenter comme suit:

login (loginDetails: any): Observable<LoginResponse> { // custom class, may be empty for now

    let headers = new Headers({ 
          'Authorization': 'Basic ' + btoa(loginDetails.login + ':' + loginDetails.pass),
          'X-Requested-With': 'XMLHttpRequest' // to suppress 401 browser popup
    });

    let options = new RequestOptions({ 
           headers: headers 
    });

    return this
              .http
              .post(this.loginUrl, {}, options)
              .catch(e => this.handleError(e); // handle 401 error - bad credentials
}

... alors vous pouvez souscrire ceci dans un composant:

loginNow() {
   this
     .loginService
     .login(this.loginDetails)
     .subscribe(next => {
        this.router.navigateByUrl("/"); // login succeed
     }, error => {
        this.error = "Bad credentials"; // or extract smth from <error> object
     });
}

Ensuite, vous pouvez utiliser la méthode loginNow() dans les modèles de composant, comme ceci (click)="loginNow()

Une fois que le serveur aura accepté l'autorisation, JSESSIONID sera automatiquement stocké dans votre navigateur en raison des fonctionnalités de Spring Security et vous ne serez pas obligé d'envoyer les informations d'identification à chaque fois pour accéder aux ressources privées.

Votre méthode de serveur de connexion peut ressembler à ceci:

@PreAuthorize("hasRole('USER')")
@PostMapping("/login")
public ResponseEntity login() {
    return new ResponseEntity<>(HttpStatus.OK);
}

... il refusera avec 401 UNAUTHORIZED une fois l'autorisation échouée ou acceptera avec 200 SUCCESS si ce n'est pas le cas.

Comment installer le serveur de manière appropriée, il existe un certain nombre de projets de démonstration Spring Security - https://github.com/spring-guides/tut-spring-security-and-angular-js

le code n'est pas testé cependant :(

7
WildDev

Votre configuration de sécurité de printemps doit ressembler à ceci

 http!!
     .cors().and()
     .csrf().disable()
    .authorizeRequests()
     .requestMatchers(object: RequestMatcher {
       override fun matches(request: HttpServletRequest?): Boolean {
         return CorsUtils.isCorsRequest(request)
       }
     }).permitAll()
    .antMatchers("/api/**").authenticated()
    .anyRequest().permitAll()
    .and()
    .formLogin().permitAll()
0
Ninja420