¿Cómo puedo hacer un botón "registrarse con Github" como el que está en Coderwall?

Question

¿Existe alguna documentación sobre el uso de github para autenticar usuarios en mi sitio? Preferiblemente en PHP.

Al igual que el botón aquí: http://coderwall.com/

Answer 1

Sí, está documentada en el OAuth section de la API de GitHub documentation.

También hay an example implementation en las guías de documentación de Github.

Answer 2

El ejemplo proporcionado por Github y compartido por Adrian Petrescu es genial y es tan simple como se pone.

Sin embargo, considero que la mayoría de los ejemplos de OAuth faltan 2 cosas:

1. Como crear un adecuado 'Ingresar con ....' botón en su página. Suena fácil, pero si buscas en Google, encontrarás principalmente hacks CSS, que no es ideal.
2. Un sandbox con todas las piezas de código OAuth que ya están en funcionamiento para poder explorarlo mejor. Sin esto, un novato de OAuth tiene que pasar horas intentando configurar diferentes piezas (aplicación del proveedor de OAuth, front-end, back-end), antes de que pueda comenzar. Lo más probable es que cometa un error en una de las piezas y pase horas depurándolo.

Por ello hemos creado este jsFiddle (https://jsfiddle.net/dg9h7dse/1/), con el acompañamiento de la explicación detallada aquí en coderwall.

voy a resumir aquí:

1. para crear un botón social, agradable

   • Uso de arranque (http://getbootstrap.com), fuente-impresionante (https://fontawesome.io), arranque-sociales (https://lipis.github.io/bootstrap-social/)
   • Agregar este fragmento:

`` `

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

` ``

2. para nosotros para poner el código de demostración en jsFiddle para las personas a jugar con, necesitábamos un delantero finalice solo con la solución OAuth, por lo que usaremos https://oauth.io, que tiene una biblioteca de front-end de Javascript (https://github.com/oauth-io/oauth-js) que funciona con el servicio.

NOTA: https://oauth.io es un servicio de pago pero le permite integrarse con cientos (?) De proveedores de OAuth sin escribir código de back-end.

Todo lo que tenemos que hacer entonces es vincular nuestro bonito botón de inicio de sesión social a un fragmento de Javascript que llama al proveedor del servicio 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()); 
    }); 
}) 

` ``

Espero que esto ayude a más personas a entender y empezar a trabajar en el uso de OAuth.