Authenticating server Api is the problem
I am trying to create an API in laravel and and Angular App in 2 different server. I am not getting a good article which can explain me step by step process.
The problem I am facing is I am not sure what to do with the client_secret I am sure I need to verify this while I authenticate and login on my Angular app (verify on server laravel)
Do I use the redirect url to set it to a laravel route (since google with redirect with the access token on successful login from angular to whatever url I point it to)or do I make a call from angular after I have it in angular scope ie send the id token to a laravel route using a rest call
I am making the laravel api since in future I may have an mobile app and I could reuse the api
I know I may be in a wrong forum. But this is the most responsive forum I know.
You can use JWT for authenticate SPA.
Here good, steps:
You need provide an endpoint to login. Let's say, /api/v1/login
. This endpoint, you should implement JWT as I mention it. So this endpoint should request like this:
HTTP METHOD: POST
headers
{'Content-Type': 'application/json'}
body
{'email': email, 'password': password}
and return a token:
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.XbPfbIHMI6arZ3Y922BhjWgQzWXcXNrz0ogtVhfEd2o
This token you should save in life cycle app or better put in local storage js. For security reason, you have to set expired that token.
No you have a token, this token use for authorize user to request secure api. Let's say, user want fetch his profile /api/v1/users/1
. Because this api is secure, you need pass token.
HTTP METHOD: GET
headers
{
'Content-Type': 'application/json',
'Authorization': "Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWIiOiIxMjM0NTY3ODkwIiwibmFtZSI6IkpvaG4gRG9lIiwiaWF0IjoxNTE2MjM5MDIyfQ.XbPfbIHMI6arZ3Y922BhjWgQzWXcXNrz0ogtVhfEd2o"
}
That's it.
Every time you want to access secure (authenticate) endpoint, you should send the header bearer.
Notes:
I believe you have two options, based on what you need to achieve. (The way Google Auth works might eliminate the first one - I'm not familiar with that one I'm afraid.)
Option 1)
Option 2)
*** you could use the redirect URL from Google directly if you wanted to but then (if I understood correctly and you've got two separate apps) you will have to probably do a POST with some derived credentials from your Laravel API to the original app which in turn can do its thing and redirect back to the UI - and that's not really helping with discoverability, and worse, it will introduce unnecessary coupling between your apps so it just does not feel right
Note: I don't know your use case and whether you are intended to use the Google API within your application after the login or just use it as a convenience feature. For that reason I outlined the basic options I think you have but I may be way off here.
Lets say you have an angular app which client_id="angularId"
and client_secret="angularsecret"
and also you have a mobile applicaiton which has client_id="mobileclientId"
and client_secret="mobilesomuchsecret"
configured. So google using client_id and secret to identify and secure which client the user want to log in.
After user authenticate with their credentials, google checks the return url of the client you configured in developer console. If it is valid, it returns access_token
and id_token
in return_url of the client as hash parameter in browser. And you need to store the access_token returned from google in cookies or some localStorage.
What your laravel api need to to is, validate the token that you sent in headers. Thou making request to google about the access_token which you've send with api request. It asks google that if access_token is valid or not? I'm not familiar with laravel but, I'm sure you will find some libraries. Also Check this thread: How can I verify a Google authentication API access token?
Also be careful with authentication if you don't have enough experience. I think you must use a Oidc library in client side. This might help you: https://github.com/manfredsteyer/angular-oauth2-oidc
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With