How get API response using username and password?

Question

The API is protected with a login. After I enter the login on the direct site, it shows curl result, which contains a token. At some point I was able get the result by doing:

const headers = new HttpHeaders() .set('accept', 'application/json') .set('Authorization', `Bearer xxxx<); //xxx is the token

and

 this.data = this.http.get(url, { headers: headers })

But it doesn't work anymore.

Also, I think I should be able able to do http.post with user credentials, get a token and get json from API using the token. I am kind of confused. I read a lot of SO posts, but neither were helpful in my case. I still get nothing.

Also, the token changes time after time. Could it be the reason?

This seems to work:

this.data = this.http.post(this.url, { headers: headers }) .subscribe((res) => { return res })

But this doesn't

this.data = this.http.post(this.url, { username: 'username', password: 'password' }) //with real credentials .subscribe((res) => { return res })

This request gives 405 error :(

this.http.post(this.url, { username: 'username', password: 'password' }) .subscribe((res) => { return res })

iamaword · Accepted Answer · 2022-08-23 21:04:51Z

You likely need an auth interceptor, and need to utilize a refresh token. It's a lot to discover on a whim, but effectively you would store a refresh token (comes with a jwt) in your app, set up an auth interceptor, and on 400s you would try to get a new token with your refresh token, and try the endpoint again.

it's a bit convoluted, but at a high level it makes sense. Access tokens only last 15 minutes, whereas refresh tokens last longer and are used to continually cycle access tokens as they expire. You jut need to stick some fun middleware to handle error cases seamlessly, and never think about it again.

peep https://www.bezkoder.com/angular-12-refresh-token/

EDIT: to clarify: you would use an auth interceptor as a middleware ofr any http calls being made to your apis. It is primarily used to append your auth headers (bearer token) to each http call without having to manually do it every api call. The refresh of the access token is just a side attribute to handle things all in one location. when you define it:

export class AuthInterceptor implements HttpInterceptor

and in your app module you declare it as a provider:

{ provide: HTTP_INTERCEPTORS, useClass: AuthInterceptor, multi: true },

Thank you. The all exemples, including the one in your post, are doing with login http calls. I don't want user authentification with token to identify them for the routing. I just want to get json from API. It is really hard to adapt the code in tutorials to my case. I want the identification/autentification only on the API side, not my frontend side
added an edit. Sounds like you need an interceptor as mentioned for the calls to your api, which is the fundamental use for these interceptors

Collectives™ on Stack Overflow

How get API response using username and password?

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related