oauth - 如何制作像 Coderwall 上的“使用 Github 注册”按钮？

Question

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

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

Answer 1

是的，它记录在GitHub API文档的OAuth 部分。

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

Answer 2

Github 提供并由 Adrian Petrescu 分享的示例非常棒，而且非常简单。

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

1. 如何在您的页面上创建正确的“使用 .... 登录”按钮。听起来很简单，但如果你用谷歌搜索，你会遇到大多数 CSS hack，这并不理想
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。