如何使用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上手。