Wie mache ich eine "Anmeldung mit Github" -Schaltfläche wie bei Coderwall?

Ja, das ist im OAuth-Abschnitt der GitHub-API Dokumentation .

In Githubs Dokumentationshandbüchern gibt es auch eine Beispielimplementierung .

Das von Github bereitgestellte und von Adrian Petrescu geteilte Beispiel ist großartig und so einfach wie es geht.

Ich finde jedoch, dass die meisten OAuth-Beispiele 2 Dinge vermissen:

1. So erstellen Sie eine ordnungsgemäße Anmeldung mit ... auf Ihrer Seite. Hört sich einfach an, aber wenn Sie herum googlen, werden Sie meistens auf CSS-Hacks stoßen, was nicht ideal ist
2. Eine Sandbox mit all den OAuth-Code-Teilen, die bereits in Betrieb sind, sodass Sie herumstochern können, um ein besseres Verständnis zu bekommen. Ohne dies muss ein OAuth-Neuling stundenlang versuchen, verschiedene Teile (OAuth-Provider-App, Front-End, Back-End) einzurichten, bevor er beginnen kann. Wahrscheinlicher ist, dass sie in einem der Teile einen Fehler macht und Stunden damit verbringt, sie zu debuggen.

Also haben wir dieses jsfiddle ( Ссылка ) erstellt, mit einer ausführlichen Erklärung hier auf coderwall .

Ich fasse es hier zusammen:

1. Um eine nette soziale Schaltfläche zu erstellen

   • Benutze Bootstrap ( Ссылка ), font-awesome ( Ссылка ) ), bootstrap-social ( Ссылка )
   • Fügen Sie dieses Snippet hinzu:

'' '

'' '

2. Damit wir den Demo-Code auf jsfiddle stellen können, benötigen wir eine OAuth-Lösung, die nur für das Front-End gedacht ist. Daher verwenden wir Ссылка , die eine Javascript-Frontend-Bibliothek ( Ссылка ) hat, die funktioniert mit dem Service.

HINWEIS: Ссылка ist ein kostenpflichtiger Dienst, mit dem Sie sich jedoch in Hunderte (?) von OAuth-Anbietern integrieren können Backend-Code schreiben.

Alles, was wir dann tun müssen, ist, unsere nette soziale Login-Schaltfläche an ein JavaScript-Snippet zu binden, das den OAuth-Service-Provider aufruft.

'' '

'' '

Ich hoffe, dass dies mehr Menschen hilft, OAuth zu verstehen und damit anzufangen.