webentwicklung-frage-antwort-db.com.de

kantiger 2 Login mit Federsicherung

ich versuche, die Frühlingssicherheit mit einem benutzerdefinierten Angle 2-Login zu integrieren, das heißt, ein bestimmter Endpunkt meiner App ist durch Frühlingssicherheit geschützt. Wenn Sie versuchen, darauf zuzugreifen, wird auf/Login umgeleitet, das in Angle 2 gehandhabt wird Hinweis, wie die Anmeldung durchgeführt und der Zugriff auf die Backend-API nach der Protokollierung gewährt wird.

ich konfiguriere die Federsicherheit wie folgt:

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

da ich das Standard-Login hatte, funktionierte alles einwandfrei, aber ich konnte keine funktionierende Login-Integration für Winkel 2 erstellen. Ich habe folgenden Code in Winkel 2 ohne Erfolg ausprobiert:

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) 
}

soweit ich weiß, sind die Sicherheitsstandards für Benutzername und Kennwort für die Variablennamen "Benutzername" und "Kennwort", die im Anforderungshauptteil sicher übergeben werden. Wenn also einige ungültige Benutzerdaten wie {"username":"admin", "password" : "pass"}I übergeben werden, sollte dies zu/login umgeleitet werden. Fehler oder etwas und bei erfolgreicher Authentifizierung sollte ich zu/welcome weitergeleitet werden und authentifiziert bleiben

Ich habe den Benutzer und den Pass in meiner Datenbank definiert und mein benutzerdefinierter userDetailsService prüft , Ob Antworten, Kommentare oder Fragen erwünscht sind

Wenn Sie mit der API arbeiten, müssen Sie entweder HTTP Basic oder die Tokenauthentifizierung und nicht Form eins verwenden. Bei der Verwendung von HTTPS muss HTTPS verwendet werden.

Um sich auf HTTP-Basis mit Angular 2 zu authentifizieren, kann der Anmeldedienst folgendermaßen aussehen:

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
}

... dann können Sie dies in einer Komponente abonnieren:

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

Dann können Sie die loginNow()-Methode in den Komponentenvorlagen wie folgt verwenden (click)="loginNow()

Sobald der Server die Autorisierung akzeptiert, wird JSESSIONID aufgrund der Spring Security-Funktionen automatisch in Ihrem Browser gespeichert. Sie müssen nicht jedes Mal die Anmeldeinformationen senden, um auf private Ressourcen zuzugreifen.

Ihre Anmeldeservermethode kann folgendermaßen aussehen:

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

... wird mit 401 UNAUTHORIZED abgelehnt, wenn die Autorisierung fehlschlägt, oder mit 200 SUCCESS akzeptieren, wenn dies nicht der Fall ist.

So richten Sie den Server richtig ein - es gibt eine Reihe von Spring Security-Demoprojekten - https://github.com/spring-guides/tut-spring-security-and-angular-js

der Code wird jedoch nicht getestet :(

7
WildDev

Ihre Federsicherheitskonfiguration muss so aussehen

 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