Home / Questions / 382571
Accepted
D. Albarracín
Asked: 2020-08-18 06:37:26 +0800 CST 2020-08-18 06:37:26 +0800 CST

Perform POST adding Header and Params

  • 772

I am trying to login using tokens in Angular. For this I need to send the username and password through the POST method including header and parameter.

These are the header and parameters:

'Content-Type','application/x-www-form-urlencoded'
'scope','...lo que sea...'
'grant_type', 'password'
'Authorization','... lo que sea...'

But I don't know how to include this data in the POST so that it returns the access_token and the other fields.

I have tried the following:

let cabecera = new HttpHeaders();
let parametros = new HttpParams();

cabecera.set('Content-Type','application/x-www-form-urlencoded').set('Authorization','...');
parametros.set('grant_type', 'password');
parametros.set('scope','...');

let opciones = {
  headers: cabecera,
  params: parametros
}

this.http.post(this.url,opciones).subscribe(data =>{
  console.log(data);
})

But the username and password will not be added in this way for verification. And it returns errors.

angular

3 Answers

  1. Best Answer

    I solved it this way:

    login(login){

    let parametros = new HttpParams();
    parametros = parametros.append('grant_type','----');
    parametros = parametros.append('scope','-- lo que sea--');
    parametros = parametros.append('username',login.username);
    parametros = parametros.append('password',login.password);

    const opciones = {
      headers: new HttpHeaders({
        'Content-Type':'---',
        'Authorization': '-- lo que sea --'
      }),
      params: parametros
    };

    return this.http.post(`${this.URL}/token`,login,opciones);
}

    I had to add the username and password inside the parameters as well.

    • 1

  2. Hello, it seems to me that you are passing the parameters to the POST wrong, I show you an example of a POST:

        //Header json
    const headers: any = {
       "Authorization": "ACCESS TOKEN"
    };

    //Post options pass it to HttpHeaders Class 
    const httpOptions = {
        headers: new HttpHeaders(headers),
    };

    //Url
    const url: string = "https://url.com/uri";

    //Do request
    return this.httpClient.post(url, obj, httpOptions)

    The method postaccepts 3 arguments, URLwhich is the destination HTTP address, OBJwhich is the json to send as the body of the request, and the 3rd parameter is OPTIONS, which you can use to send the headers you need, just like in the example above. ( https://angular.io/guide/http#making-a-post-request )

    • 0

  3. One thing that is important to know about Angular and its way of handling requests is that HttpHeadersand objects HttpParamsare immutable . Every time you use the method set(...), you have to save the returned object.

    An example request might look like this:

    @Injectable()
export class AuthenticationService {

  constructor(
    private http: HttpClient,
    ...
  ) { }

  login(username: string, password: string): Observable<...> {
    
    const headers = new HttpHeaders()
      .append('Authorization', `Basic ${this.b64EncodeUnicode(username + ':' + password)}`)
      .append('X-Requested-With', 'XMLHttpRequest');
    return this.http.post<string>(ENV.url.login, null, { headers: headers }).pipe(
      map((data: string) => {
        // login successful if there's a jwt token in the response
        if (data) {
          return data;
        } else {
          // failed login
          return null;
        }

      }),
      catchError((error: any) =>
        observableThrowError(error || 'Server error'))
    );
  }

  b64EncodeUnicode(str: string): string {
    return btoa(encodeURIComponent(str).replace(/%([0-9A-F]{2})/g, (match, p1) => {
      return String.fromCharCode(('0x' + p1) as any);
    }));
  }
}

    Explanation:

    A common way of sending the username and password is basic authentication , which requires passing the string 'Basic <usuario>:<password>'in the header to Base64 "Authorization". The server's response can vary, from sending only the token or sending it with more information in a JSON or other format. The problem is that passing to base 64 special characters can be a source of problems, so in the given example certain previous transformations are performed, that's why I added the b64EncodeUnicode.

    • 0