如何使用Coderwall上的按钮进行“Github注册”按钮？

Question

是否有任何关于使用github验证我的网站上的用户的文档？最好在PHP中。

喜欢这里的按钮：http://coderwall.com/

Answer 1

是的，它记录在GitHub的API documentation的OAuth section。

Github的文档指南中还有an example implementation。

Answer 2

Github提供的示例和Adrian Petrescu共享的示例非常棒，并且非常简单。

然而，我发现大多数的OAuth的例子是缺少两件事情：

1. 如何创建一个适当的按钮，你的页面上“与....登录”。听起来很简单，但如果你谷歌周围，你会遇到大多数CSS黑客，这是不理想的
2. 一个沙箱，所有的OAuth代码已经启动和运行，以便您可以捅一下，以获得更好的理解。如果没有这个，OAuth新手必须花费数小时才能开始创建不同的组件（OAuth提供程序，前端，后端）。更可能的是，她可能会在其中一个部分出错，并花费数小时来调试它。

所以我们创建了这个jsfiddle（https://jsfiddle.net/dg9h7dse/1/），并附有关于coderwall的详细解释。

我会在这里总结一下吧：

1. 要建立良好的社交按钮

   • 使用引导程序（http://getbootstrap.com），字体真棒（https://fontawesome.io），引导，社会（https://lipis.github.io/bootstrap-social/）
   • 添加此片段：

```

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

```

为我们上演的演示代码上的jsfiddle的人一起玩周围，我们需要一个前置式只结束OAuth解决方案，因此我们使用https://oauth.io，它具有与该服务一起使用的仅用于Javascript前端的库（https://github.com/oauth-io/oauth-js）。

注意：https://oauth.io是付费服务，但可让您与数百（？）个OAuth提供程序集成，而无需编写后端代码。

然后，我们需要做的就是将我们良好的社交登录按钮绑定到调用OAuth服务提供者的JavaScript代码片段。

```

$('#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()); 
    }); 
}) 

```

希望这有助于更多的人了解和使用OAuth上手。