I have built a website with vuejs front-end and laravel back-end.
Only way to login is via Facebook Login using Socialite
All that works fine.
Now I am building some React Native apps (Ios/Android) that also use Facebook login but need to interact with the same web api.
I want to use JWT to secure the API for React Native -> Laravel API
I set up JWT w/ Dingo on Laravel side and I am able to generate a token using the JWTAuth::fromUser(). And I have established some API endpoints that use the token to authenticate.. so far so good.
Now here's the part that becomes sticky. I understand that on the Laravel side of things you can create JWT token with any user.. right now the JWT "identifier" is simply "id".. and it's my understanding that the token I generate from JWTAuth::fromUser() simply has no idea or care that this user doesn't have conventional credentials and instead used a Facebook Login.
On the React Native side however.. when a new user first authenticates via the Facebook Login.. it has no idea what the "matching user" is on the Laravel app, all I have to go on is basically the unique Facebook Provider Id.
So the question is as follows:
How can I generate a JWT token on the React Native side using only the Facebook Provider Id and the JWT Secret, and more importantly, how do I modify my JWT code on the Laravel side so that it can understand tokens that were generated with the Facebook Provider Id and JWT Token
In other words, I think my Laravel JWT implementation needs to be modified so that tokens are created/parsed purely on the basis of the Facebook Provider Id because otherwise it won't match up with tokens generated on the React Native side.
Many thanks!!
Ok after doing some reading I think this flow might work. Your thoughts please?
1 User authenticates via Facebook on in on Android/Ios app
2 Retrieve facebook access token
3 Do api call to public endpoint on web server and pass FB Access Token and FB ID
4a Web server makes Facebook Graph Api call w/ Access Token and verifies token is valid, is authenticated with Facebook App, and matches Facebook ID
4b If user doesn't exist on web first.. create user
5 If above matches, then web servers generates JWT token from user model and returns JWT token to app
6 App now uses JWT token for future API calls
Related
We have a web app that has authentication on the front-end (React JS) using Microsoft OAuth, but no authentication at the back end side (Spring Boot), meaning everybody can access the APIs. We want to secure the APIs using the "Access token" generated by the UI (front-end). The idea is that UI passes the token to the back-end in every API call. Since each API call would contain the token, the back-end will use this to validate which user this token belongs to. Is there a way to achieve this using MSAL?
Tl;dr: How to obtain user details (email and user name) from Microsoft OAuth generated token using MSAL?
I did try going through this: https://learn.microsoft.com/en-us/azure/active-directory/develop/scenario-protected-web-api-overview but to no help
I have an api written in GO that, at the moment, serves an authorization token based on a username and password. (Without MSAL)
I am trying to implement MSAL logins with Microsoft accounts. I have setup my angular frontend to log a user in to an Azure AD app registration. Would it be possible to authenticate that they have successfully logged in to the Azure AD, and serve them one of my tokens (unrelated to msal) from my GO API?
The username that they use to login with MSAL also exists in my backend, the flow would be something like this;
User logs in with MSAL -> my frontend makes a request to golang backend with username -> golang verifies that this username has logged in with MSAL -> backend serves a token for this user
It appears golang integration with MSAL is limited, so not sure how possible this is.
Thanks.
What you can do is acquire an access token for your API in the front-end from Azure AD. For this you will either register the API in Azure AD or use the same app registration. Either way, you should add a scope in the Expose an API page in the registration. Your front-end can then use that scope's id to get the needed token.
Your API can then have an endpoint that validates the access token, and issues the local token. The access token will contain the user's username for example, if you want to map to that. A more robust way would be to map to the user's object id (also in the token) since it is immutable, unlike the user email.
For token validation, you should be able to use a generic JWT validation library. Also remember to check for that scope in the token that you defined to properly authorize the request.
I am working on the backend for our two applications, which require sign-in and sign-up with a google account via REST - SPA app in Vue and Angular app.
I am thinking about this flow:
User from SPA or mobile application will log in google auth server with his credentials
App receive auth code from google
App request for sign-in / sign-up with this code to our auth service
Auth service fetch information about the user from google by this token, and generate jwt token for our SPA / mobile app which return back
Can you tell me if Spring Social module provides some endpoints to handle and generate this tokens via REST or I must implement it by myself? Thank you.
I'm doing some Android app that needs API and users.
I'm planning adding login (and register) button via Facebook.
I'm wondering: how should the flow of such an operation look like?
My idea:
Request the Facebook token in the app.
Send the token to the laravel backend by POST request (is this even secure approach?)
Get the Facebook user by Facebook token using socialite
Create / auth laravel user using Facebook user.
Return laravel's bearer token to the app (do I need passport to get the token or laravel has something built in?)
Is this the best approach?
I'm developing a javascript spa in vue.js which is going to eventually be a cordova application. As well as a backend api built with lumen.
I'm trying to provide login with facebook and google functionality. I've added the laravel socialite package and created a redirect and callback route. Ive created a page in my spa with the login buttons that direct to my api redirect. The user is redirected to facebook's oauth mechanism I login, the callback routes handle function looks something like this
public function handleProviderCallback($provider)
{
$oauthUser = $this->socialiteManager->with($provider)->stateless()->user();
$userEntity = $this->repository->findOrCreateOauthUser($oauthUser);
$providerEntity = app()
->make('em')
->getRepository('Entities\Social\Provider')
->findOneBy(['name' => $provider]);
if(is_null($providerEntity))
{
throw new \Exception('Oauth Provider not found');
}
$socialAccountEntity = app()
->make('em')
->getRepository('Entities\Social\SocialAccount')
->findOrCreateSocialAccount($providerEntity, $oauthUser, $userEntity);
$token = $this->auth->fromUser($userEntity);
$resource = $this->item($token)
->transformWith($this->transformer)
->serializeWith(new ArraySerialization())
->toArray();
return $this->showResponse($resource);
}
It basically gets a the oauth user, finds or stores them in the database, finds or stores their social account info,
$token = $this->auth->fromUser($userEntity);
Then authenticates them with JWT issuing a token. Which is then serialised and returned as a json response.
The problem is that the response is given while on the backend application, im never returned back to the javascript SPA.
Instead of returning json I could do some redirect like
return redirect()->to('/some-spa-callback-route');
But should the api be aware of the SPA location? and how will this work when the SPA is ported into cordova, as the mobile application wont have a url?
My thoughts are that A
The social provider should redirect directly to the SPA at which point it should make another request exchanging the authorisation code for a JWT token.
B it redirects to the SPA with a query string containing the token, which doesn't sound secure.
or c sends some type of cookie back.
And I am still confused as to how to actually redirect from my api to a mobile application.
In the end I ended up with the following login flow
User is directed to Oauth provider
Oauth provider returns an access token to the client
the client sends the access token to my api
my api sends a renew request to the Oauth provider
the Oauth provider validates the token and returns a new one to my api
my api exchanges the access token for a jwt token
my api returns the jwt token to the client
In my opinion it is the only correct way to authenticate SPA applications, and it is important to renew the Oauth token the client provides rather than blindly exchanging for a jwt as you can't trust the client, and is better than issuing redirects from the api that isn't very restfull
Instead of dealing with 2 services, your spa should talk to a single auth service in your backend. You register your service as the oauth callback and you handle oauth/jwt as you described. Your auth service can also be the decision point for user (re-)authentication. Since your frontend calls your backend directly, you can now return the json payload back to your web/mobile caller.