從 Angular 調用 post 請求時缺少強制“grant_type”權限

Question

當我通過 Angular 調用 api 時出現此錯誤。 但是，當我通過 Postman 調用它時，我得到了所需的響應。 我不知道我做錯了什么。 以下是我使用的代碼：

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

我也將 Body 和 Header 中的相同參數傳遞給 postman。 它在那里成功地得到了回應。 但是，通過代碼它給出了以下錯誤：

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

我將 grant_type 作為“authorization_code”傳遞，但它仍然給出錯誤。 知道我在做什么錯嗎？

Answer 1

我假設您正在使用某種形式的 OIDC/OAuth2 服務。 如果您查看此處的規范，則必須使用 FormData 發布參數，而不是作為請求的正文。

大概就是這個區別。

猜猜它應該看起來像這樣（未經測試，從我的頭頂開始 - 如果失敗，請參閱現有的 SO 問題/教程）。

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 2

我糾正了這個問題，body 對象被正確創建，因此我收到錯誤The required 'grant_type' parameter is missing. . 然而，在修復身體對象后，它工作得很好。

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 3

當使用 application/x-www-form-urlencoded 內容類型時，client_secret、client_id 和 grant_type 應該在 body 的 x-www-form-urlencoded 部分設置