I have a Workflow application(website) using canjs. The various steps(pages) are preloaded. A user is allowed to explore the app without login. However if the user wishes to save the workflow, they must login. Alternatively the user can login at any of the steps in the workflow.
The application has a provision for users to login using Facebook and Twitter.
The backend consists of Laravel and Socialitelinkpackage take care of the login process.
As Facebook and Twitter use OAUTH the login work flow is as follows :
Client calls a login init route.
The route redirects to a login page of the social login provider(FB or twitter)
User Authenticates/Authorises your app
The user is redirected to a success route (say /success_callback) on your app. At this point we can use Socialite package to get the user information.
The issue I'm facing is that I don't want to reload the APP on the client browser. So how to inform the client from /success_callback if the user has logged in or not, etc.
Related
Introduction
I have my own user account database and am building an oauth2 authorization server to centralize authentication logic across my companies' websites using authorization code grant type.
Let's say I have deployed my authorization server's login page at https://auth.my.company.com, and deployed a website at https://my.website1.com. When a user click on the login button at https://my.website1.com, the typical oauth2 authroization code flow will be triggered as shown in the picture below.
To explain the picture:
The user access to https://my.website1.com which renders a login button.
The user is navigated to the centralized login page with url https://auth.my.company.com?client_id=mysite1&redirect_url=https://my.website1.com/oauth/callback
The user enters username and password and submit the login form.
After the authrization server validates the user credential, it redirects the user back the the redirect_url https://my.website1.com/oauth/callback?auth_code=abcd passing a parameter auth_code=abcd
The website backend server communicates with the authorization server using the input auth_code to authenticate the user, the authorization server returns an access token.
The website responses to the user that the login process is success.
The Problem
At https://my.website1.com, I would like that the user can also login with his/her Facebook account, which will be bound with the account in my user account database. I would like to centralized this process as well (i.e. so that my another site https://my.website2.com can reuse the same login process). So I am thinking of implementing a 2-hop oauth flow as in the following picture.
The user access to https://my.website1.com which renders a login button.
The user is navigated to my centralized Facebook login endpoint https://auth.my.company.com/facebook
The authorization resolves its Facebook client id and redirect url and then redirect the user to Facebook login page.
The user logins through Facebook.
Facebook redirects the user back to my authorization server, passing the authroization code.
My authorization server uses the authroization code from Facebook to authenticate the user with Facebook APIs
My authorization server redirects the user back to https://my.website1.com passing its own generated authorization code.
The website backend server communicates with the authorization server using the input auth_code to authenticate the user, the authorization server returns an access token.
The website responses to the user that the login process is success.
Question
I cannot find any reference to this kind of 2-hop oauth so I am afraid that I am doing it wrong. I would like to know if there are standard approch the handle the centralized social login like this.
Found a reference from IBM website that looks very similar to the flow in question. Here
I am very new to IdentityServer and Open ID Connect and most of what I know comes through the three walk throughs in the Overview section of the IdentityServer3 documentation. All of those samples demonstrate how to use the Authorize attribute to secure a controller action, which results in a redirect to the IdentityServer-hosted login page. What is the typical or recommended way to provide a Login link in the client application? Could my client application have it's own login page and then call IdentityServer to validate the login and provide a token? If so, is there a sample that shows this? If not, is there a way to have the login link in my application bring up the IdentityServer login page? Is it as simple as securing the Login action with an Authorize attribute?
I don't think it is right that client has its own login page. Imagine you use Facebook as identity provider, and would you expect facebook users to enter their Facebook crediential on your login page?
One method is what you described using server side challenge redirect, or configure your app as a Javascript implicit client - see example , which it builds up authroize challenge URL. Either way user sees login page from identity server.
We are currently using the Facebook registration plugin to sign up users (we let them signup without it too).
We were using the FB login plugin previously but needed to allow users to set their passwords for our site, which the login plugin doesn't allow.
The way the login plugin works is that on authorization the FB javascript sdk triggers an event which your client side code can subscribe to. I would like to know if there is a way to have a similar flow but using the registration plugin. That is, instead of redirecting to a specified url when the user authorizes our app, catch the registration info in a javascript callback so we can register the user through an ajax interface.
The registration plugin doesn't provide any client-side callback in place of the redirect_uri. You can achieve this with FB.login, by handling the event and using the access token and user id from the authResponse to do a Graph API call to get the info you need to populate a registration form client-side. This registration form can ask for a password, which you can associate with the account along with the user id for future seamless logins from Facebook.
I am creating an app in which you can login via Facebook, Twitter, or our own internal mechanism. The issue is the following scenario:
I open the app and login using Facebook
I logout
I open the app and login using Twitter
The above scenario will result in me as a user having two accounts in the system. How do I prevent this from happening so that I have one account and it doesn't matter whether I login using Facebook/Twitter?
Every time a user login using Facebook I am as well creating an internal account, with the Facebook username and Facebook id as password. The same thing when I login using Twitter I am creating an internal account with the Twitter user name and id as password.
An idea came in my mind to solve this:
When a user logs in using Twitter check the name and email if a user with that information already exists in the database. However, the name and email they use in both Facebook and Twitter might not be the same, so this might not work all the time.
You can't make this work with your current flow (when the user logs in then logs out again). Instead you should allow a user to login with either their Facebook or Twitter credentials and then, whilst they're still logged in, get them to associate their account with their other service with that user.
So, the flow would be something like:
New user arrives at site User logs in with Facebooks oauth2
mechanism
Your server receives their FB ID and generates a new user
in your systems. Stores their FB ID against that user.
You prompt
the user to add their twitter auth credentials. User logs in with
Twitter oauth2 mechanism
Your server receives their twitter ID,
checks to see if a user is currently logged in with your
application. Because there is, you save the twitter ID agains the
current user.
Later, the user can log out and then log in with either service.
How do they manage to get user to login to Twitter / Facebook through Javascript so smoothly?
I am trying to replicate it for the web app. Basically, the user only needs to add a javascript snippet to their site to kickstart but I am clueless as to how to integrate facebook and twitter connect seamlessly.
Do they store access tokens after successfully authenticating a user?
Short answer is yes, they store access tokens after successfully authenticating a user.
After you try facebook and twitter apis, you'll see that, they both returns ids for every user who succesfully logged-in through your application. You can then simply add those ids pairing with the platform they logged in to your database. You can then use that data to track users easily.
You need to
Create applications on both platforms
Have pages for each provider to check if user performed a succesful login
Check if user is a newcomer and add that user to your database if so.
Set a session or cookie variable of user's local id in your own application or do whatever you are normally doing to track if a user logged-in as that user is your local user.