Jak zrobić przycisk "rejestracja z Githubem", tak jak na Coderwall?

Question

Czy istnieje dokumentacja dotycząca używania github do uwierzytelniania użytkowników w mojej witrynie? Najlepiej w PHP.

jak przycisk tutaj: http://coderwall.com/

Answer 1

Tak, jest udokumentowany w OAuth section z GitHub API documentation.

Istnieje również an example implementation w przewodniku po dokumentacji Githuba.

Answer 2

Przykład dostarczony przez Githuba i udostępniony przez Adrian Petrescu jest świetny i jest tak prosty, jak to tylko możliwe.

Jednak uważam, że większość przykładów OAuth brakuje 2 rzeczy:

1. Jak stworzyć właściwe „Praca z ....” przycisk na swojej stronie. Brzmi łatwo, ale jeśli będziesz googlować, napotkasz głównie hacki CSS, które nie są idealne
2. Piaskownica z wszystkimi elementami kodu OAuth, która jest już uruchomiona, dzięki czemu możesz ją przeglądać, aby uzyskać lepsze zrozumienie. Bez tego nowicjusz OAuth musi spędzić wiele godzin próbując skonfigurować różne elementy (aplikacja dostawcy OAuth, front-end, back-end), zanim będzie mógł zacząć. Najprawdopodobniej może popełnić błąd w jednym z utworów i spędzić wiele godzin na debugowaniu.

Dlatego stworzyliśmy ten jsfiddle (https://jsfiddle.net/dg9h7dse/1/), z towarzyszącym szczegółowe wyjaśnienie tutaj na coderwall.

będę go podsumować tutaj:

1. Aby stworzyć miłą przycisk społecznej

   • Zastosowanie bootstrap (http://getbootstrap.com), font-niesamowite (https://fontawesome.io), bootstrap-społeczne (https://lipis.github.io/bootstrap-social/)
   • Dodaj ten opis:

`` `

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

` ``

2. Dla nas umieścić kod demo na jsfiddle by ludzie mogli bawić się, potrzebowaliśmy przód- Kończymy tylko rozwiązanie OAuth, więc używamy https://oauth.io, która ma bibliotekę tylko z przodu JavaScript (https://github.com/oauth-io/oauth-js), która współpracuje z usługą.

UWAGA: https://oauth.io to usługa płatna, ale umożliwia integrację z setkami (?) Dostawców OAuth bez pisania kodu zaplecza.

Wszystko, co musimy zrobić, to powiązać nasz miły przycisk logowania społecznościowego z fragmentem kodu JavaScript, który wywołuje dostawcę usług OAuth.

`` `

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

` ``

Nadzieja to pomaga więcej ludzi zrozumieć i zacząć przy użyciu protokołu OAuth.