Social Login con Firebase, c9 y GitHub

[UlisesGascon]

Social Login con Firebase, c9 y GitHub

Hola a todos! Os he preparado esta mini-guía de como configurar sobretodo GitHub y Firebase para que funcionen los callbacks y los tokens.

Esta tarde en clase lo veremos paso a paso.

Pasos a seguir

1 - Incluir el dominio desde el que realizas el desarrollo en Firebase.

• Necesitas incluir c9users.io y c9.io en Login & Auth (dentro de tu aplicación de Firebase)
• Nota: 127.0.0.1, localhost, proveedores de redes sociales y tu {APPNAME}.firebaseapp.com ya están incluidos

2 - Registrar una nueva aplicación en GitHub.

• Rellena este formulario:
  • Application name: Nombre de la aplicación
  • Homepage URL: En un principio C9 (desarrollo) o firebaseapp (producción).
  • https://{WORKSPACE}-{USUARIO}.c9users.io/
  • https://{APPNAME}.firebaseapp.com/
  • Application description: opcional
  • Authorization callback URL: Es una url especifica de Firebase.
  • https://auth.firebase.com/v2/{APPNAME}/auth/github/callback

3 - Copiar el Client ID y Client Secret en nuestra aplicación de Firebase en Login & Auth/Github y validamos la opción Enable Github Authentication

• Nota: Si no realizaste el paso 1, ahora es un buen momento para añadir los dominios.

4 - Incluir el login Social en nuestro JavaScript podemos hacerlo de dos maneras.

• vía popup (muy recomendado)

    var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
    ref.authWithOAuthPopup("github", function(error, authData) {
      if (error) {
        console.log("Login Failed!", error);
      } else {
        console.log("Authenticated successfully with payload:", authData);
      }
    });

• vía redirección (desaconsejado)

    var ref = new Firebase("https://<YOUR-FIREBASE-APP>.firebaseio.com");
    ref.authWithOAuthRedirect("github", function(error) {
      if (error) {
        console.log("Login Failed!", error);
      } else {
        // We'll never get here, as the page will redirect on success.
      }
    });

• Más info:
  • User Authentication
  • GitHub Authentication

Nos vemos esta tarde :-)!