How to use OAuth 2.0 correctly in SPA? - authentication

I'am working on an project where we have a Vue.js Frontend and a Microservices architecture for the backend hosted in Azure Service Fabric.
We wan't to add an IdentityService for authentication using IdentityServer4.
What we want to achieve is a login that is basically the same as stackoverflow provides:
You can login on the website with an embedded login or use external providers like Google and Facebook.
My question only concerns the embedded login.
I have read articles that state using Authorization Code Grant with PKCE is the best way in my scenario. Moreover they say, that Ressource Owner Password Grant should not be used.
But as far as I know, with this flow it is not possible to embed the login to our own website. It will always be a redirect to the IdentityService.
How do Stackoverflow achieve this? Do they use Resource Owner Passwort Grant?
Thank you!

First of all, I welcome you to check how Stackoverflow (SO) handle their user registration process.
SO allows you three options. Login through Google, Facebook or register directly to SO. When someone use Google Or Facebook, SO uses Authorization code flow. User is redirected to respective login page. Once you login there, SO receive user profile details from those identity providers, which allows SO to complete the profile and onboard the user.
But when someone use built in register page, it is simply good old registration page. There is no OAuth involved there. SO obtain end user credentials, complete the profile and save them at their backend.
In your scenario also, you can omit OAuth and use a built in registration or login page. Only concern is the maintenance burden of end user credentials.

Related

How to implement authentication based on organization

I'm building a web app using Clojure and ClojureScript and I need it to have authentication based on a white-list of organization. For example, let's say I've added University1.edu to my white-list, and when a student from that university wants to login to my web app, they would be redirected to their own universities login system. After that I would just a confirmation of whether or not they successfully logged in there and maybe create a session, cookies, or or something for them.
Is that possible and if so, how can I implement that?
Some common ways to implement this authentication schemes are OAuth2 and OpenID, which are commonly used in websites were you can log in with your social / Twitter / Facebook / Google account.
Using OAuth for instance, you register your website in some developer portal (depending on the service that you'll use to authenticate) and obtain a token that that you'll use during the login flow and after logging on their portal, users are redirected back to your site.
In order for this to work, every organization (eg. University1) needs to be a provider of this authentication scheme, so that's something you'll need to research.
In Clojure there is a couple of options: the buddy library seems to be a popular choice, but you could also use some Java libraries through interop.

Oauth or OpenID to sign users into Gmail?

We currently have a corporate portal in which users authenticate and get different page views based on their access level. We have been tasked with allowing them to click a Google Mail icon to sign them into their domain Google Mail Account. To do something like this, should we be looking in to oAuth or Open ID? Presently, they're already using their email and password to sign in.
From what we understand, Open ID requires their email and password to go to us, which we have; but will Open ID do what we're looking for?
Thank you.
Since your users have a Google Apps for Business email address already, I would suggest using the Google+ Federated Login feature-set. (You can learn more here: https://developers.google.com/accounts/docs/OpenID)
A quick snippet from the aforementioned link:
If you are planning to provide a “sign-in with Google” feature, we recommend using Google+ Sign-in, which provides the OAuth 2.0 authentication mechanism along with additional access to Google desktop and mobile features...[the] OpenID+OAuth Hybrid protocol lets web developers combine an OpenID request with an OAuth authentication request. This extension is useful for web developers who use both OpenID and OAuth, particularly in that it simplifies the process for users by requesting their approval once instead of twice.
You can find more on the Google+ Federated Login toolset and explore a sample application here: https://developers.google.com/+/
Hope this helps!

Login to Single Page Application with Google authentication and Google Oauth 2.0

We are developing an SPA - full client base javascript application and need to authenticate our users to get access to the internals.
As I found from the search we can outsource our authentication mechanism and use Google accounts for that. I learned from this site
https://developers.google.com/accounts/docs/OAuth2Login -
How to deal with Google API and mechanism for authentication.
In the short word, we need:
send request to google url with params to ask user to allow SPA use their personal data
in case of success we get a token from Google
we may use this token to get access to API we were asked and work with it.
This is described well and I understand it and have some JS code to make it happen.
What I do not understand.
I have an application with it's private data. I want use user's e-mail as the login, or user id (doesn't matter how to call it) to access app's internals, such as user's created tasks, user's profile, etc. So, to display user's created tasks in my SPA I need query database with the user's e-mail.
I imagine the next scenario:
user click Login with Google button
we obtain an token - this means user was authenticated successfully
we persist user and his e-mail to work with SPA
when user click Logout we clear all access data
Where should I persist this data?
In case of Forms Authentication I understand that we pass login/password to server and if they match the database we create Forms Ticket and store it in cookie.
Is there any similar case with Google's auth? If I'll store user's email in cookie I think that's not very good from security reason. If I'll save a token - I'm not sure why I need it and how to use it in my SPA, I'm not using any Google API after authentication.
Do you have any example case how do we build our process in similar cases?
Thank you.
If all you need is the user's email address, then you would be better off using OpenID instead of OAuth. OAuth provides access to a user's account and services, scoped to a specific resource or set of resources. OpendID is designed just for logging into a third-party service. You can then extract the user's ID and email address from the OpenID login. Note: The ID will always be sent but the email address has to be explicitly requested during authentication.
Google also supports a hybrid OpenID+OAuth scheme that lets you piggyback OAuth requests on top of an OpenID login if there is some resource you need to authenticate to. Take a look at the authentication document to get an idea of how both protocols work and which is better for your scenario.
Once you have the email address returned, you probably shouldn't persist it in a cookie. The normally recommended way to handle it is to add it as a session parameter. That way only the session cookie is stored on the client, and the server can use it find the values it needs. This answer has a good explanation of the differences and when you want to use sessions versus cookies.

How do I use OAuth 2.0 just for authentication for Google?

The OAuth2 PHP client code is awesome. It gives great examples on how to use OAuth 2 with Google APIs. The problem is that I only want to use OAuth 2 for authentication NOT for authorization. I've looked around in the API for something that just authenticates but I can't find the right class.
How do I configure the Google PHP client to only authenticate via OAuth?
I considered just authenticating the client (i.e. `$client->authenticate($_GET['token'])) but that's not ideal because the user is still asked to authorize access to different resources. I don't want to see their email, picture, etc. I just want Google to verify that they are who they say they are.
Well, OAuth is an open standard for authorization and not for authentication!
Most providers however give you the chance to query a users profile, so you can authenticate the user. Without the access to his profile data, especially his user id, you can not achieve this.
See Google's documentation for obtaining the user's profile information for login.
If you only want to use authetication you have to use: OpenID / Federated Login.
See: https://developers.google.com/accounts/docs/OpenID

Using oAuth (Twitter, LinkedIn) for login to a web app

Should I use oAuth, for example LinkedIn or Twitter, as my signin mechanism for my app? It seems that most apps just use oAuth to connect other services to it, but they make you set up your own user/password after you use oAuth (including StackOverflow), and I'm not really sure why this is. Would love some insight here. Thank you.
Why not use OpenId, to allow people to sign into your application, without having to type any specific login/password ?
Quoting the corresponding wikipedia entry :
OpenID is an open, decentralized
standard for authenticating users
which can be used for access control,
allowing users to log on to different
services with the same digital
identity where these services trust
the authentication body. OpenID
replaces the common log on process
that uses a login-name and a password,
...
BTW, that's exactly how one logs-in on stackoverflow ;-)
OAuth purpose is not authenticating your users with your site, is letting your users allow you (the oauth consumer) access to their protected resources in other sites (oauth providers) like LinkedIn, Twitter, Google APIs etc.
For authentication, you should use OpenId as others have pointed
Twitter provides a Sign in with Twitter flow that is OAuth but provides a faster redirect if it is an existing user of your service and they are already authenticated with Twitter.
http://apiwiki.twitter.com/Sign-in-with-Twitter
If you are building a Twitter centric application this makes a lot of since to use and you won't have to implement an entire alternate authentication method like OpenID.
Be careful if you let users authenticate with both Twitter and LinkedIn as users will inadvertently create two accounts and need them to be merged.
Facebook and Twitter both have the "Login with Facebook/Twitter" APIs to actually allow users to login without having to create an account for your website. Both of them will return you a valid session that may (or may not) expire. So you actually wouldn't have to ask users to decide on a username/password, as you can fetch both from the APIs (you can not get the users email address when using Twitter though)
So why add those functions to your website?
Users are in general more likely to hit the "Login with ..." button than going through the whole mail address authorization process and entering their name, etc...
Linkedin only has OAuth for usage to its API. It will also depend on what type of language you are writing your webapp in, they should have premade wrapper libraries you could tap on to.