I have more conteptual question, how exactly should I handle social login in my project.
The use case is that I would like to allow user to login with Facebook, and keep on my backend information about this user (email, firstname, lastname)
I have some proposal Flow, but I'm not sure if it's a proper approach.
Let's say that I have application architecture as above. Now I would like to explain step-by-step full success flow.
Client (Vue application) make a call to AuthProvider (Facebook)
AuthProvider returns access_token
Client after reciving access_token make a call to backend endpoint like /fb_profile with access_token and userID (?)
Backend make a call to AuthProvider to check if given by client access_token is valid or not.
AuthProvider returns information about user. Backend after getting information about user, save it to database and generate new JWT token
Backend returns generated token to user
Now my question is - Is this good approach? Or should i handle it in other way? Like keep more logic to backend part? Instead of make a call to Facebook from Client, maybe should I make a call to backend, and backend make a call to Facebook?
You seem to be on right track. There could me many ways to do the same thing, here is the way which is working for me using vue/laravel/passport/socialite/github.
Trigger redirect in controller from frontend,
Provider(here github app) is triggered in browser with its url using client id/app name saved in back end config/env. Fill out your login details
It will redirect as created in provider and configured in backend-> show it on frontend, in my case its
http://localhost:8080/authorize/github/callback
From frontend now trigger callback in controller, it will check if user details already exist and will insert if its first time user as per logic. Then it will send back access_token to frontend which can be used in frontend for all the operations
DB
The above will be the sequence of the request flow ( same as yours ).
This would be the standard practice we used to integrate with Facebook. In this case, I strictly advise you to use the JavaScript SDK for Facebook.
Refer below link in case if you run into the following issue:
Vuejs component wait for facebook sdk to load
Related
I am trying to think of the best way to implement the oauth authorization code grant in my API codebase.
I cant use the standard routes passport generates because I have no frontend so I can't create sessions or anything to store user data/codes etc...
Instead I was planning to use the following workflow -
User redirects to frontend (seperate codebase) https://{frontend}/oauth/authorize endpoint passing through the require URL params (client_id, redirect_uri)
Once this page is hit a request is made to my backend system, this checks to make sure the client_id and redirect_uri match a record in the database. A success response is returned if a record exists.
On the frontend because the backend response was a success they can now enter their username and password, a request is made to my backend system again to check these details are correct. If everything is correct the backend returns an auth code in the response data
If the login response was successful the frontend redirects the user back to the callback URL with the code url param
External app then makes a request to https://{backend}/oauth/token which checks the code and if its a success returns an access_token, refesh_token and expires_in
My question is does this flow look correct for an app with seperate frontend/backend codebases. Just to clarify my frontend codebase is using the laravel password grant which is working fine so this question is only for integrating external systems via oauth.
I was also wondering when the backend generates the auth code where should this be stored which can then be checked again when the /oauth/token request is made?
How can I authenticate a user with sanctum when the whole login process happens server side? The question I am asking is kind of hard to phrase so I will explain my situation.
I have a Vue SPA for my front end and a Laravel app as a backend api (they run on the same domain). Normally, to authenticate with the laravel api using sanctum, you would send the credentials in a post request, and if the login was successful, you would get the session information returned. However, I want to use steam login for authentication. I already have to whole process on the backend figured out in terms of actually logging in, however I am unsure how to pass the session data back to the SPA. Currently I have a link on my site that takes the user to the login endpoint on the api, and that endpoint will have them authenticate with steam, so the entire login process is handled on the backend. Now I just need to figure out how to send the session data back to the SPA. I guess it world be similar to using sanctum with socialite.
So far I've tried usisng Sanctums Mobile Aplication Authentication. I did this by having the user log in into the laravel app using steam, then once authenticated, a access token for their account would be created, and they would get redirected back to the Vue apps call back file, with the token as a part of the query string. Then the token would be stored and . This worked, however it presented some security issues.
The token was passed back in the url, so anyone could screenshot it and use it
Anyone who obtained the token by some other method could use it.
Here is the code for what I tried: https://gist.github.com/DriedSponge/4e8549486c2bfa33e4c0b21a539bdf85
So in summary, I want the entire login process to take place on the server, but somehow at the same time authenticate the SPA. If you have any ideas on how I can make this work, please let me know. If you have any questions just leave a comment. Thanks in advance.
I am working on Xamarin Forms application and new to providing login authentication of the application. I have completed the design part of the application with using Entries for user id and password and button for Submit. Also, i am having web API and for authentication. Now how to connect that Web API in xamarin forms application for login.
Please guide or provide some use full samples...
Thanks in advance...!
I assume you've built out your authentication API already, and that you can make Fiddler or Postman calls directly to your controller, pass in a set of credentials, and return back a JWT / bearer token that you can then use for authenticated calls?
At this point, it's relatively simple then as you'll want to use build a proxy layer / API layer to make calls out to your API. These calls will simply mirror the ones you've made in Fiddler/Postman/your proxy of choice.
I used Refit to achieve this:
https://github.com/reactiveui/refit
Specifically, you can see on the "Setting request headers" section how they easily encapsulate it for you to pass your token.
Of course, your initial call should be to login, and then once logged in, take the JWT response back from your controller, set the token in your Keychain, and then pull it out of Keychain to set in the header.
Let me know specific questions you have? For example, which of the following do you need more info on?
Sending and parsing a response (serializing the response) from your Login action to set/assign a token in keychain?
Saving the token, and setting it in a header for subsequent calls?
Building a proxy layer using a framework like Refit to make generic outbound calls?
I'm learning both Sails and Vue.js and making a full REST app to do that.
So far from now, I've made a multi-step sign-up page in Vue which is working fine and POST all needed informations in my different Controllers in Sails, it also creates the user.
Now, I'm working on my login page. Again, no problem to PUT informations in my Login Controller and I receive an OK (200) response which let me know the user is logged on my backend server.
Now, I would like to understand how I could keep the information the user is logged-in my server and let him access to private content on my front-end app -> securely. I have understood that Sails use Sessions (alias of cookies ?). Also in the common example on the web, people tend to use JWT which transmit a crypted JSON between the two environnement (and so desactivate the cookies ?).
So, could you please give me a semantic explanation on how I can make both app exchange securely and manage it in Vue Js. I just need some "track" to follow.
SOLUTION
For those who like me are blocked at this initial step, I resolved my problem this way.
1) My backend Sails app generates a JWT (token) on each login.
2) My frontend Vue app stores that information thanks to Vuex and set the header of each request with an Authorization parameter composed of : 'Barear ' + token.
3) All frontend resquests to any Sails controller are verified thanks to a Policy which compares the token in the header of the request with the one generated at the first step.
Now I just wonder if using built in sessions in Sails is relevant or not.
I am using MEAN stack for developing a web application. I choose it be completely RESTFULL that is stateless. For authentication I am using JWT(Json Web Token) strategy.
Client sends login request to server, server authenticates and sends JWT and user data to the client(here angular 2).I am storing this JWT token in the cookie.
Now my question is how do we store/display user details in the view continuously. For eg if we consider Facebook as restful , after a user logs in, client display user data such as profile image, profile link etc etc.
Since Rest Authentication just retrieves the data, with credentials sent in each request.
How are these user related data retained in the client side. Is it like for each request, user data is fetched from the server and updated continuously in the view.
If yes how or if no then am I missing something.
I know this question might be nonsense to experts, but any advice, suggestion or kickstarter information would be helpful for a novice like me.Are there any best practises for these?
Thanks in advance
Yes, you can fetch user data from server on every request but the right approach is to store it in JWT token as custom claims and on each request get the token from cookie, decode it and get the necessary details from those custom claims.
By the way, you can store user data in localStorage for frequent use.