Replies: 1 comment 5 replies
-
|
This is your frontend that will make the API calls to the OAuth routes. 1. AuthorizationThe first thing is to generate the right authorization URL for the OAuth Provider (here, Google). From your frontend, you call the {
"authorization_url": "https://www.tintagel.bt/oauth/authorize?client_id=CLIENT_ID&scopes=a+b&redirect_uri=https://www.camelot.bt/oauth/callback"
}You should redirect your user to window.location.href = authorization_url2. CallbackAfter user has authenticated on Google, they'll be redirected to your application. That's the "callback". What I usually suggest is to make a redirection to a special page on your frontend. The URL will look like this: At that moment, from your JS app, you can catch the flowchart LR
subgraph BACKEND [Backend]
AUTH["/oauth/authorize"]
CB["/oauth/callback"]
end
subgraph FRONTEND [Frontend]
FAUTH["/authorize"]
FCB["/oauth-callback"]
end
GOOGLE[Google]
FAUTH -- asks URL --> AUTH
AUTH -- returns URL --> FAUTH
FAUTH -- redirects to URL --> GOOGLE
GOOGLE -- redirects --> FCB
FCB -- forwards code --> CB
CB -- returns token --> FCB
3. CORSYou may have CORS errors from your browsers if your frontend is not on the same domain as your backend. That's a normal security measure from your browser. If you need to relax that security measure, you have to setup a |
Beta Was this translation helpful? Give feedback.
-
|
Thank you frankie567 for your response. I am developing front end with Angular for this specific case. When I do this: this.boxesService.googleLogin().subscribe((res) => { I am redirected to new page, which url is: http://webapp-eture.azurewebsites.net/auth/google/callback?state=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdWQiOiJmYXN0YXBpLXVzZXJzOm9hdXRoLXN0YXRlIiwiZXhwIjoxNjgwMzM2NTUxfQ.Se10d-Sp4HudeSEnwvB5aRCx4GANhqhOw6TpQm3UEng&code=4%2F0AVHEtk5M5NOKtgyWcNQ1gkxYEqLg4kVSHGZ22qoF4PWDsf8uEo0KcAHaSdu8WjCQoxWHtQ&scope=email+profile+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.profile+openid+https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fuserinfo.email&authuser=0&prompt=none This would be very helpful to us and we would definetely buy you a coffe, since this is driving us crazy |
Beta Was this translation helpful? Give feedback.
-
|
You'll need to set a custom redirect URI. It can be set in argument of https://github.com/fastapi-users/fastapi-users/blob/master/fastapi_users/fastapi_users.py#L91-113 Don't forget to add it as allowed redirect URI on Google's side. I just notice that this argument is not explicitly documented, this needs to be improved. |
Beta Was this translation helpful? Give feedback.
-
|
Hi @frankie567 thanks for the very detailed explanation. I did not see it initially and had to figure it out myself, it would probably be great to add this to your OAuth documentation, this clarifies a ton. However, I still have the following problem: when I intercept the code and state in the gauth callback and make a get request to the authorize endpoint, I get the following error in the backend:
I am aware this is not the exact way you described (making the same endpoint on the front-end too, redirecting to that and then posting from there), but does that make a difference? Both my front and backend are running on localhost so the redirect URI should be the same. I also did not set any additional URLs in the router which seems to be a source of problems sometimes. |
Beta Was this translation helpful? Give feedback.
-
|
NVM, I got lazy. Dropped the pre-made frontend package and just followed what is described here and it worked wonderfully. Thanks for hte great write-up, I think it should really be on the OAuth authentification page. |
Beta Was this translation helpful? Give feedback.
-
|
Would be nice if this flow of having frontend URI as redirect uri, passing the state and code to backend etc documented somewhere in fastapi-users documentation(I searched quite a bit and it was not obvious that this is the recommended flow). Would have saved a ton of time for me. |
Beta Was this translation helpful? Give feedback.
Uh oh!
There was an error while loading. Please reload this page.
Uh oh!
There was an error while loading. Please reload this page.
-
We use fastapi-users to integrate Google auth. By default there are defined to endpoints
/auth/google/authorizeand/auth/google/callback.So frontend which is in Angular calls
/auth/google/authorizeand as result we got URL in body. Than if we call this URL we got CORS error. After that we are not sure if this is right approach or on which order should we call API.Also API
/auth/google/callbackhas code, code_verifier, state and error fields where we get this fields?We use fastapi-users package in our backend. We have major problems with integrating Google OAuth.
URL: google auth
By default there are two endpoints
/auth/google/authorizeand/auth/google/callback.What is actually a flow for these endpoints? When we call the /auth/google/authorize endpoint, the response is:
We tried then calling this URL again in the frontend, because if we copy paste this URL in google, the response is token and token type.
If we call this endpoint in our frontend, we get CORS error.
Is this even right approach? What frontend should do with these two endpoints? And what to do with the /auth/google/callback endpoint?
Thanks to everyone for help
@frankie567 Please could you help. Thank you
Beta Was this translation helpful? Give feedback.
All reactions