CODEWITHSUNDEEP
angularsingle-sign-on
k.vincent
k.vincent

Reputation: 4133

How to build a single sign-on application (email and pass)?

I want to build a single login interface (with Angular) which should be a kind of stand alone, so that it can be used and embedded from/on any page.

E.g. a customer can embed it on his index page as over layer and the code/functions should be will passed from a JavaScript API and build the the UI and the connection.

I'am thinking about a concept like single sign-on application which allows users to interact on other websites through their account on Facebook. Something like Facebook connect.

What's the best approach to reach this? Preferred technology is Angular2, Angular4

Upvotes: 0

Views: 5449

Answers (1)

Basic
Basic

Reputation: 26766

[Not entirely an answer but too long for a comment]

I think the fundamental mis-match is that you're asking "how do I do auth" and I'm countering with "there are lots of ways, with varied costs/benefits. You need to assess them and pick the right approach for your use case. OAuth2 is a sensible starting point, but many others exist."

After that, finding a library that does the work is (relatively) simple.

So... there are a number of things which I think you'll need to get nailed down before you can proceed.

My initial questions would be:

  • What level of security do we need to offer end-users considering the data that's being exposed.
  • Who are our adversaries? Hackers? Nation States? How about disgruntled employees?
  • How are we going to mitigate against all of the above?
  • What logging and auditing will be needed so that after a breach we can understand what happened.
  • If we're using a 3rd party IAM service, what data does it expect to be passed to it and what does it return. Does it handle a 3-way auth (us, end-user, third party) automatically or is that something that has to be built around it? If the latter, does the IAM provider have an SDK/similar that includes the functionality we need.

Broad strokes, I'd suggest an architecture that does something like this:

  • User wants to authenticate in third party app
  • 3rd party redirects the user to your server/api/IAM platform where the user logs in (or reclaims an active session).
  • Your system prompts the user to allow the 3PA access to (a subset of?) your data.
  • Assuming the user approves, redirect the user back to the 3PA, along with an auth token specific to that 3PA.

The 3PA can then use that token to act on behalf of the user until the token is cancelled.

Benefits:

  • 3PA never sees user credentials, only learns of its token after a successful approval.
  • Tokens are specific per-service, meaning you can revoke permission for one site without revoking for all.
  • User can track who has authorised access to their details.
  • You can track which systems are authenticating to you (depending on how much info you ask for on the initial connect, and whether 3PA have to pre-register and get an ID to be able to request authentication).

What I've described is basically, a minimalist OAuth workflow. You could go about implementing it yourself, but there are a lot of pitfalls and I'm not convinced you fully appreciate the security implications of what you're attempting, so I'd definitely suggest using a known-good process rather than trying to roll your own.

Assuming OAuth fits your use-case.... I've never had to do this from Angular so can't recommend a library but a quick Google shows dozens... Near the top of the results was a simple tutorial: https://devcenter.kinvey.com/angular/tutorials/how-to-implement-safe-signin-via-oauth

And one potential library: https://github.com/oauthjs/angular-oauth2 (although at a glance, that doesn't seem to handle the intercepted-credentials scenario very well)

Upvotes: 3

Related Questions