The Mandatory 'grant_type' permission is missing when calling post request from Angular

Question

I am getting this error when I am calling the api via Angular. However, when I call it via Postman, I am getting the desired response. I dont know what am I doing wrong. Below is the code that I have used:

generateToken() {
    let serverUIUri: string;
    const sessionState = sessionStorage.getItem('state');
    if (sessionState === undefined || sessionState !== this.state) {
        this.router.navigate(['/account/login']);
    } else {
        this.userService.tokenGeneration("SSO", 'authorization_code', 'http://localhost:4200', this.code).subscribe((response: any) => {
            sessionStorage.setItem('demo_cookiee', response.accessToken);
            
            this.router.navigate(['/']);

        }, error => {
            this.continueToAppSelection();
            //this.router.navigate(['/account/login']);
        });
    }
}

tokenGeneration(clientId: any, authorizationCode: any, redirectUri: any, code: any): Observable<any> {
    const options = {
        headers: new HttpHeaders()
            .append('Content-Type', 'application/x-www-form-urlencoded'),
        withCredentials: true,
        origin: 'http://localhost:4200/',
        referer: 'http://localhost:4200/'
    };

    const body = {
        grant_type: authorizationCode,
        redirect_uri: redirectUri,
        client_id: clientId,
        code: code
    }
    return this.demohttp.postData(this.url + 'connect/token', options, body);
}

postData(url: string, headers: any, body: any): Observable<any> {
    return this.http.post(url, body, headers);
}

I am passing the same parameters that are in Body and Header to postman as well. There it is successfully getting a response. However, through code it gives the below error:

Object {error: "invalid_request", error_description: "The mandatory 'grant_type' parameter is missing."}

I am passing the grant_type as 'authorization_code', it still gives the error though. Any idea what am I doing wrong?

Answer 1

I rectified the issue, the body object was created correctly due to which I was getting the error The mandatory 'grant_type' parameter is missing.. However after fixing the body object, it worked perfectly fine.

tokenGeneration(clientId: any, authorizationCode: any, redirectUri: any, code: any): Observable<any> {
    const options = {
        headers: new HttpHeaders()
            .append('Content-Type', 'application/x-www-form-urlencoded'),
        withCredentials: true
    };

    const body = 'grant_type=' + authorizationCode + '&redirect_uri=' + redirectUri + '&client_id=' + clientId + '&code=' + code;

    return this.demoHttp.postDataWithOptions(this.ssoUrl + 'connect/token',options, body);
}

Answer 2

I assume you're using some form of OIDC / OAuth2 service. If you take a look at the specs here the parameters have to be posted using the FormData, and not as the body of the request.

Probably that's the difference.

Guess it should look something like this (not tested, from the top of my head - refer to existing SO questions / tutorials if it fails).

tokenGeneration(clientId: any, authorizationCode: any, redirectUri: any, code: any): Observable<any> {
    const options = {
        headers: new HttpHeaders()
            .append('Content-Type', 'application/x-www-form-urlencoded'),
        withCredentials: true,
        origin: 'http://localhost:4200/',
        referer: 'http://localhost:4200/'
    };
    
    const form = new FormData();
    form.append('grant_type', authorizationCode);
    form.append('redirect_uri', redirectUri);
    form.append('client_id', clientId);
    form.append('code', code);

    return this.demohttp.postData(this.url + 'connect/token', form, options);
}

Answer 3

When is been used the application/x-www-form-urlencoded Content type the client_secret, client_id and grant_type should be set in the x-www-form-urlencoded section of the body