如何在Coderwall上进行"使用Github注册"按钮？

Question

有没有关于使用github对我网站上的用户进行身份验证的文档？最好是在PHP中.

像这里的按钮:http://coderwall.com/

Answer 1

是的,它在GitHub API 文档的OAuth部分中有记录.

在Github的文档指南中还有一个示例实现.

Answer 2

由Github提供并由Adrian Petrescu分享的例子很棒,而且很简单.

但是,我发现大多数OAuth示例都缺少两件事:

1. 如何在页面上创建正确的"使用....登录"按钮.听起来很简单,但如果你谷歌周围,你会遇到大多数CSS黑客,这是不理想的
2. 一个沙盒,其中包含已经启动并运行的所有OAuth代码,以便您可以围绕它进行更好的理解.没有这一点,一个OAuth新手不得不花费几个小时来设置不同部分(OAuth的提供商的应用程序,前端,后端),他才能开始.更有可能的是,她可能会在其中一件作品中犯错,并花费数小时调试它.

因此,我们创造了这个的jsfiddle(https://jsfiddle.net/dg9h7dse/30/),与此相关的详细解释coderwall.您可以立即使用它来测试OAuth提供程序的API端点.

我在这里总结一下:

1. 创建一个很好的社交按钮

   • 使用bootstrap(http://getbootstrap.com),font-awesome(https://fontawesome.io),bootstrap-social(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>

```

2. 为了让我们将演示代码放在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.