Angular5 Authentication to Api with jwt

Question

I have an api accessible through an jwt token.

I have the expected result with postman and curl (curl -X POST http://localhost/api/login_check -d _username=login -d _password=pass) but not with angular.

Successful header request with postman:

POST /api/login_check 
cache-control: no-cache 
postman-token: 2b4a6be8-5c3d-4c66-99f9-daa49572d4bf 
user-agent: PostmanRuntime/7.1.1 
accept: */* 
host: localhost 
cookie: PHPSESSID=06u39ri0rr2i2sgdkjr451d6tj 
accept-encoding: gzip, deflate 
content-type: multipart/form-data; boundary=--------------------------825758704558259093486061 
content-length: 287

This is my configuration:

Angular CLI: 1.5.5
Node: 9.2.0
OS: linux x64
Angular: 5.1.1
... animations, common, compiler, compiler-cli, core, forms
... http, language-service, platform-browser
... platform-browser-dynamic, router

@angular/cli: 1.5.5
@angular-devkit/build-optimizer: 0.0.36
@angular-devkit/core: 0.0.22
@angular-devkit/schematics: 0.0.42
@ngtools/json-schema: 1.1.0
@ngtools/webpack: 1.8.5
@schematics/angular: 0.1.11
@schematics/schematics: 0.0.11
typescript: 2.4.2
webpack: 3.8.1

And this is my service:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';

const API_URL = 'http://localhost/api';

@Injectable()
export class SecurityService {

    constructor(private http: HttpClient) {
    }

    login(username: string, password: string) {
        let url = `${API_URL}/login_check`;

        return this.http.post(
            url,
            {_username: username, _password: password },
        ).subscribe(
            (response) => {
                console.log(response);
            }
        );
    }
}

This call return me an 401 error, invalid credentials. I had try to add header with contentType: 'application/x-www-form-urlencoded' but still the same error.

I am new to Angular, and do not understand how to proceed this authentification call.

Thanks

You need an Authorization header: angular.io/guide/http#headers — R. Richards
– R. Richards, Commented Jan 7, 2018 at 16:00
I don't think this is the problem as this url is not protected. With some deeper debugging, I figure that my Api receive the request, but cannot find the credentials. — MatMouth
– MatMouth, Commented Jan 7, 2018 at 17:13
The Authorization header has nothing to do with the URL being protected. It is how you pass the AWT token to the API so it can use that to authorize the client application. I am certain the API is receiving the request, but without the token: 401 unauthorized. — R. Richards
– R. Richards, Commented Jan 7, 2018 at 18:15
I probably misexplained myself, the url I try to reach is the login page. So I do not have a token. Should I put an empty authorization header ? — MatMouth
– MatMouth, Commented Jan 7, 2018 at 19:15

David · Accepted Answer · 2020-09-14 09:34:33Z

1

It's probably because http.post posts the content as json, but your server is expecting x-www-form-urlencoded (which is what you are doing with the CURL -d option)

You need to set the correct headers

let options = {
headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
};

And you need to set the correct body.

You can either do it manually, or use URLSearchParams

let body = new URLSearchParams();
body.set('_username', username);
body.set('_password', password);

this.http.post(this.loginUrl, body.toString(), options)

If you want to set the body manually, use

let body = '_username=username&_password=password';
this.http.post(this.loginUrl, body, options)

edited Sep 14, 2020 at 9:34

answered Jan 7, 2018 at 19:24

David

34.6k13 gold badges90 silver badges124 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

MatMouth Over a year ago

Hello, and thanks for your time. Unfortunately, it doesn't work. With Postman either. With Postman, the successful query is in "raw data", with no aditionnal header

MatMouth Over a year ago

I have added the postman successful query's header to my post

MatMouth Over a year ago

You were right. with the urlencoded header, and the body set as a string, it is working ! Thank you

Collectives™ on Stack Overflow

Angular5 Authentication to Api with jwt

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related