0

All. Forgive me if my question is off topic or a dumb question. I really want to know how to implement a authentication mechanist like GitHub for Plunker. In my project.I think I have the same situation like this. I have some websites like Plunker. and I want to implement a SSO center authication website or services for all the other websites like GitHub. when I click the button Sign in with GitHub in the Plunker. The website will open the new windows with the url https://github.com/login?return_to=%2Flogin%2Foauth%2Fauthorize%3Fclient_id%3D7e377e5657c4d5c332db%26redirect_uri%3Dhttp%253A%252F%252Fplnkr.co%252Fauth%252Fgithub%26scope%3Dgist

When I succeed to login in GitHub. Then the Plunker will login with the authenticated user I just used in the GitHub.

My problem is I don't know how does the authentication works between the GitHub and Plunker. Could someone please tell me something about it ? It will be appriciated. Thanks.

Joe.wang
  • 11,537
  • 25
  • 103
  • 180

2 Answers2

1

Plunker's "log in with GitHub" button uses OAuth2, an open standard for this kind of thing. It's the same technology used by Google for their sign-in with Google functionality, as well as many other providers.

Here is GitHub's documentation for adding "log in with OAuth" to your site.

Creating your own OAuth provider is a significant task, and one that you probably don't want to tackle without weighing carefully. If you do choose to go down this path you'll likely want to use an existing library for your language or stack of choice, e.g. perhaps something from this list. This is also good advice if you only plan to build an OAuth client.

ChrisGPT was on strike
  • 127,765
  • 105
  • 273
  • 257
  • To add a few more details, in Plunker's specific case, the user is directed to the OAuth 2.0 url via `window.open()` call from the browser. When the OAuth transaction has completed, the website at the callback url includes a ` – Geoff Goodman Sep 21 '15 at 21:14
  • I had thought It would be a common and light SSO implementation. But it is not. It looks like OAth2 became popular authentication implementation in the internet right now. And I think I need to implement my own OAuth provider. Thanks your informative guide of OAuth to me. – Joe.wang Sep 22 '15 at 01:17
  • @Joe.wang, well OAuth2 _is_ common, and it _is_ relatively lightweight. This topic is very complex. As I mentioned in my answer, there are libraries out there to help you write your OAuth2 provider or client. Using one of them is going to be your "lightest" option, since most of the complexity will reside outside of your own code. – ChrisGPT was on strike Sep 23 '15 at 11:09
  • 1
    @Chris Got it . But I think the most important part of it is understanding how it works. Then choose a library to implement it . That is the right way to go. Thanks your nice post . – Joe.wang Sep 24 '15 at 05:55
0

As pointed out, Plunkr's login process appears to be using Github's OAuth2, but manages to pull it off on the client without redirects/reloads using window.open and postMessage. A detailed description of the technique can be found here. The demo code looks relatively painless.

The Gatekeeper project seems to be a more polished implementation (with node.js) of that idea and there is a detailed tutorial on doing client-side auth with it here.

mikewilliamson
  • 24,303
  • 17
  • 59
  • 90