2

Estoy intentando realizar un login mediante tokens en Angular. Para ello necesito enviar el usuario y contraseña mediante método POST incluyendo cabecera y parametro.

Estos son la cabecera y los parametros:

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

Pero no se como inlcuir estos datos en el POST para que me devuelva el access_token y los demás campos.

He probado lo siguiente:

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

Pero no se agregar de esta forma el usuario y la contraseña para que lo verifique. Y me devuelve errores.

3 respuestas 3

1

Lo solucioné de esta forma:

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

Tuve que añadir el usuario y password dentro de los parámetros también.

0

Una cosa que es importante saber sobre Angular y su forma de tratar las peticiones es que los objetos HttpHeaders y HttpParams son inmutables. Cada vez que usas el método set(...), tienes que guardar el objeto devuelto.

Un ejemplo de petición podría ser así:

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

Explicación:

Una forma habitual de de enviar el usuario y el password es la autenticación básica, que requiere pasar a Base64 la cadena 'Basic <usuario>:<password>' en el header "Authorization". La respuesta del servidor puede variar, desde mandar sólo el token o mandarlo con más información en un JSON u otro formato. El problema es que pasar a base 64 caracteres especiales puede ser fuente de problemas, así que en el ejemplo dado se realizan ciertas transformaciones previas, por eso añadí el método b64EncodeUnicode.

0

Hola me parece que estas pasando mal los parametros al POST, te muestro un ejemplo de un 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)

El metodo post, acepta 3 argumentos, URL que es la dirección HTTP destino, OBJ que es el json a mandar como body del request, y el 3er parámetro es OPTIONS, que puedes utilizar para mandar los headers que precisas, así como esta en el ejemplo de arriba.(https://angular.io/guide/http#making-a-post-request)

5
  • Por favor explica el código. Saludos. Commented el 17 ago. 2020 a las 17:18
  • Hola!, el post acepta 3 parámetros, URL, OBJ que es el json a mandar como body del request, y el 3er parámetro es OPTIONS, que puedes utilizar para mandar los headers que precisas. acá esta el link que lo explica cada parámetro angular.io/guide/http#making-a-post-request Commented el 17 ago. 2020 a las 17:43
  • La explicación debe ir en la respuesta, por favor edita tu respuesta y coloca la explicación de tu código. Saludos. Commented el 17 ago. 2020 a las 17:44
  • Disculpa José, soy nuevo en esto, ahí edité la respuesta, espero que te pueda ayudar. Saludos Commented el 17 ago. 2020 a las 17:55
  • Tranquilo, no tienes por que pedir disculpas, solamente se hacen las observaciones en busca de mejorar las respuestas. Saludos. Commented el 17 ago. 2020 a las 17:56

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.