Discussion :

[eddyphan]

Salut A tous,
Je suis un débutant en angular. J'exécute sous angular 7 avec spring boot
Quand j'exécute mon email et mon mot de passe, je suis redirigé vers le lien de mon backend m'affiche une erreur :

{"error":"invalid_request","error_description":"Missing grant type"}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import {AuthConfig} from 'angular-oauth2-oidc';
 
export const authConfig: AuthConfig = {
 
  issuer: 'http://localhost:8080/edasta',
 
  loginUrl: 'http://localhost:8080/edasta/oauth/token',
 
  redirectUri: window.location.origin,
 
  clientId: 'eddy',
 
  dummyClientSecret: 'secret',
 
  scope: 'openid profile email read write',
 
 
 
 
 
}

AuthService :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
 
import { Injectable } from '@angular/core';
import {Router} from '@angular/router';
import {JwksValidationHandler, OAuthService} from 'angular-oauth2-oidc';
import {authConfig} from './authConfig';
import {CookieService} from 'ngx-cookie-service';
import {HttpClient, HttpHeaders} from '@angular/common/http';
import {Observable} from 'rxjs';
import {tap} from 'rxjs/operators';
import {error} from 'util';
 
@Injectable({
  providedIn: 'root'
})
export class AuthService {
 
  private Cookie: CookieService;
  claims: any;
 
  //$ouathSubscription: Subscription;
 
  hasLoadedProfile = false;
 
  private host: 'http://localhost:8080/edasta/';
 
 
  authenticated = false;
 
  constructor(private router: Router,
              private oauthService: OAuthService,
              private http: HttpClient)
  {
 
  }
 
  public configureWithPasswordFlow():void{
 
    this.oauthService.configure(authConfig);
    this.oauthService.setStorage(sessionStorage);
    this.oauthService.tryLogin({});
  }
 
  obtainAccessToken(){
    this.oauthService.initImplicitFlow();
  }
 
 /* obtainAccessToken(loginData){
    let params = new URLSearchParams();
    params.append('username',loginData.username);
    params.append('password',loginData.password);
    params.append('grant_type','password');
    params.append('client_id','fooClientIdPassword');
    let headers = new Headers({'Content-type': 'application/x-www-form-urlencoded; charset=utf-8',
      'Authorization': 'Basic '+btoa("fooClientIdPassword:secret")});
    let options = new RequestOptions({ headers: headers });
 
    this._http.post('http://localhost:8081/spring-security-oauth-server/oauth/token',
      params.toString(), options)
      .map(res => res.json())
      .subscribe(
        data => this.saveToken(data),
        err => alert('Invalid Credentials'));
  }*/
 
  getResource(resourceUrl){
    const headers = new Headers({'Content-type': 'application/x-www-form-urlencoded; charset=utf-8',
      'Authorization': 'Bearer '+ this.oauthService.getAccessToken()});
    let options = {
      headers: headers
    }
 
 
    // For pass blob in API
 
  /* return this.http.get(resourceUrl, { headers: new HttpHeaders({
        'Authorization': '{data}',
        'Content-Type': 'application/json',
      }), responseType: 'blob'}).pipe (
      tap(
        // Log the result or error
        data => console.log('You received data'),
        error => console.log(error)
      )
    );*/
  return this.http.get(resourceUrl,
    {headers: new HttpHeaders(
        {'Authorization': '{data}',
          'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'})
      , responseType : 'blob'
    })
    .pipe(
      tap(
        data => console.log("you received data"),
        error => console.log(error)
      )
    );
 
  };
 
 
 
// For pass blob in API
 
 
 
 
  isLoggedIn(){
    if (this.oauthService.getAccessToken() === null){
      return false;
    }
    return true;
  }
 
  logout() {
    this.oauthService.logOut();
    location.reload();
  }
 
 
 
 
 
}

loginComponent.ts

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
 
 
import { Component, OnInit } from '@angular/core';
import {AuthService} from '../services/auth.service';
import {Router} from '@angular/router';
import {OAuthService} from 'angular-oauth2-oidc';
 
@Component({
  selector: 'app-login',
  templateUrl: './login.component.html',
  styleUrls: ['./login.component.css']
})
export class LoginComponent implements OnInit {
 
  public data={
      username: "",
      password: ""
  };
 
  public token: string;
 
  invalidLogin = false;
 
  public isLoggedIn = false;
 
  constructor(private oauthService: OAuthService,
              private router: Router,
              private auth: AuthService) {
    this.auth.configureWithPasswordFlow();
  }
 
  ngOnInit() {
    this.isLoggedIn = this.auth.isLoggedIn();
  }
 
  public login() {
 
    this.auth.obtainAccessToken();
    //console.log( this.auth.obtainAccessToken(this.data));
  }
 
  public logoff() {
    this.oauthService.logOut();
  }
 
 
}

Voici les codes de mon back end

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
 
package bj.prexed.edasta.config;
 
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.http.HttpMethod;
import org.springframework.security.authentication.AuthenticationManager;
import org.springframework.security.crypto.password.PasswordEncoder;
import org.springframework.security.oauth2.config.annotation.configurers.ClientDetailsServiceConfigurer;
import org.springframework.security.oauth2.config.annotation.web.configuration.AuthorizationServerConfigurerAdapter;
import org.springframework.security.oauth2.config.annotation.web.configuration.EnableAuthorizationServer;
import org.springframework.security.oauth2.config.annotation.web.configuration.EnableOAuth2Client;
import org.springframework.security.oauth2.config.annotation.web.configurers.AuthorizationServerEndpointsConfigurer;
import org.springframework.security.oauth2.config.annotation.web.configurers.AuthorizationServerSecurityConfigurer;
import org.springframework.security.oauth2.provider.token.store.JwtAccessTokenConverter;
import org.springframework.web.bind.annotation.CrossOrigin;
 
@Configuration
@EnableOAuth2Client
@EnableAuthorizationServer
@CrossOrigin(origins = "*")
public class AuthorizationServerConfig extends AuthorizationServerConfigurerAdapter {
 
    private final PasswordEncoder encoder;
    private final AuthenticationManager manager;
 
    public AuthorizationServerConfig(PasswordEncoder encoder, AuthenticationManager manager) {
        this.encoder = encoder;
        this.manager = manager;
    }
 
    @Bean
    public JwtAccessTokenConverter tokenConverter() {
        return new JwtAccessTokenConverter();
    }
 
    @Override
    public void configure(AuthorizationServerSecurityConfigurer security) throws Exception {
 
        security.tokenKeyAccess("permitAll()")
                .checkTokenAccess("isAuthenticated()");
        //security.allowFormAuthenticationForClients();
    }
 
    @Override
    public void configure(ClientDetailsServiceConfigurer clients) throws Exception {
 
        clients.inMemory()
                .withClient("eddy").resourceIds("edasta19")
                .authorizedGrantTypes("authorization_code", "password", "refresh_code", "implicit")
                .scopes("openid", "profile", "email", "read", "write")//.authorities("ROLE_USER")
                .secret(encoder.encode("secret"))
                .accessTokenValiditySeconds(10*60)
                .autoApprove(true);
 
    }
 
 
    @Override
    public void configure(AuthorizationServerEndpointsConfigurer endpoints) throws Exception {
        endpoints.authenticationManager(manager)
         .allowedTokenEndpointRequestMethods(HttpMethod.GET,HttpMethod.POST);
    }
 
 
}

LIEN DE REDIRECTION Générant l'erreur

http://localhost:8080/edasta/oauth/t...nLJoVFQRloUZgw

Merci de m'aider SVP

[dukoid]

j'imagine que dans le header de la requête il faut préciser quel type de grant il s'agit !

[eddyphan]

Merci dukoid pour l'intervention.
C'est du header de cette requete vous parlez?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
getResource(resourceUrl){
    const headers = new Headers({'Content-type': 'application/x-www-form-urlencoded; charset=utf-8',
      'Authorization': 'Bearer '+ this.oauthService.getAccessToken()});
    let options = {
      headers: headers
    }
 
 
    // For pass blob in API
 
  /* return this.http.get(resourceUrl, { headers: new HttpHeaders({
        'Authorization': '{data}',
        'Content-Type': 'application/json',
      }), responseType: 'blob'}).pipe (
      tap(
        // Log the result or error
        data => console.log('You received data'),
        error => console.log(error)
      )
    );*/
  return this.http.get(resourceUrl,
    {headers: new HttpHeaders(
        {'Authorization': '{data}',
          'Content-Type': 'application/x-www-form-urlencoded; charset=utf-8'})
      , responseType : 'blob'
    })
    .pipe(
      tap(
        data => console.log("you received data"),
        error => console.log(error)
      )
    );
 
  };

C'est suite à l'exécution de la requete

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
obtainAccessToken(){
    this.oauthService.initImplicitFlow();
  }

que je l'erreur s'affiche.

[dukoid]

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
 
'grant_type': 'password',

[eddyphan]

Merci pour vos apports.

Quand j'essaie avec le grant_type, ca donne la meme erreur.
J'ai utilisé de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
 
  login(loginPayload) {
 
    const headers = {
      'Authorization': 'Basic ' + btoa('eddy:secret'),
      'Content-type': 'application/x-www-form-urlencoded',
      'grant_type': 'password'
    }
    return this.http.post('http://localhost:8080/edasta/' + 'oauth/token', loginPayload, {headers});
 
  }

et de cette manière :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
 
public login() {
   this.oauthService.initImplicitFlow('grant_type: password');
    //this.auth.login(this.data);
  }

Merci de m'aider SVP

[dukoid]

pour tester le serveur d’authentification et l'api, c'est bien d'utiliser postman ou curl pour voir qu'il n'y a pas de problème (avant d'attaquer en Angular)

si le grant-type c'est password, je remarque que tu n'envois pas l'identifiant ni le password !

tu es sur que ton serveur d’authentification fonctionne bien ?
c'est le bon url ?

il y a pas mal d'exemples, de tutos sur google, essais plusieurs ..