How do I make a "signup with Github" button like the one on Coderwall?

Question

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

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

Solution 1

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

There's also an example implementation in Github's documentation guides.

Solution 2

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

However, I find that most OAuth examples are missing 2 things:

1. How to create a proper 'Login with ....' button on your page. Sounds easy but if you google around, you will encounter mostly CSS hacks, which is not ideal
2. A sandbox with all the pieces of OAuth code that is already up and running so that you can poke around it to get a better understanding. Without this, an OAuth newbie has to spend hours trying to setup different pieces (OAuth provider app, front-end, back-end), before he can get started. More likely than not she may make a mistake in one of the pieces, and spend hours debugging it.

So we created this jsfiddle (https://jsfiddle.net/dg9h7dse/30/), with accompanying detailed explanation here on coderwall. You can use this immediately to test out an OAuth provider's API endpoints.

I'll summarize it here:

1. To create a nice social button

   • Use bootstrap (http://getbootstrap.com), font-awesome (https://fontawesome.io), bootstrap-social (https://lipis.github.io/bootstrap-social/)
   • Add this snippet:

```

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

```

2. For us to put the demo code on jsfiddle for people to play around with, we needed a front-end only OAuth solution, so we use https://oauth.io, which has a Javascript front-end only library (https://github.com/oauth-io/oauth-js) that works with the service.

NOTE: https://oauth.io is a paid-service but lets you integrate with hundreds(?) of OAuth providers without writing backend code.

All we need to do then is to bind our nice social login button to a 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 to understand and get started on using OAuth.