Geek Answers Handbook

How to make the "Register with Github" button, like a button on Coderwall?

Is there any documentation on using github to authenticate users on my site? Preferably in PHP.

Like the button here: http://coderwall.com/

+8
github oauth github-api
source share
2 answers

Yes, it is documented in the OAuth section of the GitHub API documentation.

There's also a sample implementation in the Github documentation guides.

+14
source share

The example provided by Github and shared by Adrian Petrescu is great and as simple as he is.

However, I found that in most OAuth examples, two things are missing:

  • How to create the correct "Login from ..." button on your page. It sounds simple, but if you google around, you will come across mostly CSS hacks, which is not perfect.
  • A sandbox with all the pieces of OAuth code that is already running and working so that you can navigate around to better understand. Without this, an OAuth novice should spend hours trying to configure the different parts (OAuth provider application, front-end, back-end) before he can get started. Most likely, it can be mistaken in one of the parts and spend hours debugging.

So, we created this jsfiddle ( https://jsfiddle.net/dg9h7dse/1/ ), accompanying a detailed explanation here of the coderwall .

I will describe it here:

`` ``

<a id="github-button" class="btn btn-block btn-social btn-github"> <i class="fa fa-github"></i> Sign in with GitHub </a>

`` ``

  1. In order to put the demo code on jsfiddle for the people you need to play with, we needed only an OAuth solution for login only, so we use https://oauth.io , which has only the foreground Javascript library ( https: //github.com/oauth-io/oauth-js ) that works with this service.

NOTE: https://oauth.io is a paid service, but allows integration with hundreds (?) Of OAuth providers without writing backend code.

All we need to do is bind our nice social login button to the Javascript snippet that calls the OAuth service provider.

`` ``

 $('#github-button').on('click', function() { // Initialize with your OAuth.io app public key OAuth.initialize('YOUR OAUTH.IO PUBLIC KEY'); // Use popup to prompt user for their OAuth provider credentials OAuth.popup('github').then(github => { // If login is successful, // retrieve user data from oauth provider console.log(github.me()); }); })

`` ``

Hope this helps more people understand and start using OAuth.

+1
source share

More articles:


All Articles