How do I make a "signup with Github" button like the one on Coderwall?
Is there any documentation about using github to authenticate users on my site? Prefe开发者_开发问答rably in PHP.
Like the button here: http://coderwall.com/
Yes, it's documented in the OAuth section of the GitHub API documentation.
There's also an example implementation in Github's documentation guides.
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:
- 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
- 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:
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>
```
- 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.
精彩评论