Inicio de sesión de usuarios con GitHub

En este documento se explica cómo usar Identity Platform para iniciar sesión con GitHub.

Antes de empezar

En este tutorial se da por hecho que ya has habilitado Identity Platform y que tienes una aplicación web básica escrita en HTML y JavaScript. Consulta la guía de inicio rápido para saber cómo hacerlo.

Configurar GitHub como proveedor

Para configurar GitHub como proveedor de identidades, sigue estos pasos:

  1. Ve a la página Proveedores de identidades de la consola de Google Cloud .

    Ir a la página Proveedores de identidades

  2. Haz clic en Add A Provider (Añadir proveedor).

  3. Selecciona GitHub en la lista.

  4. Introduce tu ID de cliente y tu secreto de cliente de GitHub. Si aún no tienes un ID y un secreto, puedes obtenerlos en la página Aplicaciones de GitHub.

  5. Configura el URI que aparece en Configurar GitHub como un URI de redirección de OAuth válido para tu aplicación de GitHub. Si has configurado un dominio personalizado en Identity Platform, actualiza el URI de redirección en la configuración de tu aplicación de GitHub para que use el dominio personalizado en lugar del dominio predeterminado. Por ejemplo, cambia https://myproject.firebaseapp.com/__/auth/handler por https://auth.myownpersonaldomain.com/__/auth/handler.

  6. Para registrar los dominios de tu aplicación, haz clic en Añadir dominio en Dominios autorizados. Para las actividades de desarrollo, localhost ya está habilitado de forma predeterminada.

  7. En Configura tu aplicación, haz clic en Detalles de la configuración. Copia el fragmento en el código de tu aplicación para inicializar el SDK de cliente de Identity Platform.

  8. Haz clic en Guardar.

Inicio de sesión de usuarios con el SDK de cliente

  1. Crea una instancia del objeto de proveedor de GitHub:

    Versión web 9

    import { GithubAuthProvider } from "firebase/auth";

const provider = new GithubAuthProvider();
    auth_github_provider_create.js

    Versión web 8

    var provider = new firebase.auth.GithubAuthProvider();
    github.js

  2. Opcional: Añade permisos de OAuth. Los permisos especifican los datos que solicitas a GitHub. Es posible que los datos más sensibles requieran ámbitos específicos. Consulta la documentación del proveedor para determinar qué ámbitos necesita tu aplicación.

    Versión web 9

    provider.addScope('repo');
    auth_github_provider_scopes.js

    Versión web 8

    provider.addScope('repo');
    github.js

  3. Opcional: Localiza el flujo de autenticación. Puedes especificar un idioma o usar el idioma predeterminado del dispositivo:

    Versión web 9

    import { getAuth } from "firebase/auth";

const auth = getAuth();
auth.languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// auth.useDeviceLanguage();
    auth_set_language_code.js

    Versión web 8

    firebase.auth().languageCode = 'it';
// To apply the default browser preference instead of explicitly setting it.
// firebase.auth().useDeviceLanguage();
    index.js

  4. Opcional: especifica parámetros de OAuth personalizados adicionales. Son específicos de GitHub y se suelen usar para personalizar la experiencia de autenticación. No puedes transferir parámetros reservados por OAuth o Identity Platform.

    Versión web 9

    provider.setCustomParameters({
  'allow_signup': 'false'
});
    auth_github_provider_params.js

    Versión web 8

    provider.setCustomParameters({
  'allow_signup': 'false'
});
    github.js

  5. Usa el objeto del proveedor de GitHub para iniciar la sesión del usuario. Puedes abrir una ventana emergente o redirigir la página actual. La redirección es más sencilla para los usuarios de dispositivos móviles.

    Para mostrar una ventana emergente, llama a signInWithPopup():

    Versión web 9

    import { getAuth, signInWithPopup, GithubAuthProvider } from "firebase/auth";

const auth = getAuth();
signInWithPopup(auth, provider)
  .then((result) => {
    // This gives you a GitHub Access Token. You can use it to access the GitHub API.
    const credential = GithubAuthProvider.credentialFromResult(result);
    const token = credential.accessToken;

    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GithubAuthProvider.credentialFromError(error);
    // ...
  });
    auth_github_signin_popup.js

    Versión web 8

    firebase
  .auth()
  .signInWithPopup(provider)
  .then((result) => {
    /** @type {firebase.auth.OAuthCredential} */
    var credential = result.credential;

    // This gives you a GitHub Access Token. You can use it to access the GitHub API.
    var token = credential.accessToken;

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });
    github.js

    Para redirigir la página, primero llama a signInWithRedirect().

    Sigue las prácticas recomendadas cuando uses signInWithRedirect, linkWithRedirect o reauthenticateWithRedirect.

    Versión web 9

    import { getAuth, signInWithRedirect } from "firebase/auth";

const auth = getAuth();
signInWithRedirect(auth, provider);
    auth_signin_redirect.js

    Versión web 8

    firebase.auth().signInWithRedirect(provider);
    index.js

    A continuación, recupera el token de GitHub llamando a getRedirectResult() cuando se cargue la página:

    Versión web 9

    import { getAuth, getRedirectResult, GithubAuthProvider } from "firebase/auth";

const auth = getAuth();
getRedirectResult(auth)
  .then((result) => {
    const credential = GithubAuthProvider.credentialFromResult(result);
    if (credential) {
      // This gives you a GitHub Access Token. You can use it to access the GitHub API.
      const token = credential.accessToken;
      // ...
    }

    // The signed-in user info.
    const user = result.user;
    // IdP data available using getAdditionalUserInfo(result)
    // ...
  }).catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // The AuthCredential type that was used.
    const credential = GithubAuthProvider.credentialFromError(error);
    // ...
  });
    auth_github_signin_redirect_result.js

    Versión web 8

    firebase.auth()
  .getRedirectResult()
  .then((result) => {
    if (result.credential) {
      /** @type {firebase.auth.OAuthCredential} */
      var credential = result.credential;

      // This gives you a GitHub Access Token. You can use it to access the GitHub API.
      var token = credential.accessToken;
      // ...
    }

    // The signed-in user info.
    var user = result.user;
    // IdP data available in result.additionalUserInfo.profile.
      // ...
  }).catch((error) => {
    // Handle Errors here.
    var errorCode = error.code;
    var errorMessage = error.message;
    // The email of the user's account used.
    var email = error.email;
    // The firebase.auth.AuthCredential type that was used.
    var credential = error.credential;
    // ...
  });
    github.js

Una vez que tengas un token de acceso, podrás usarlo para llamar a la API de GitHub. Por ejemplo:

REST

curl -H "Authorization: Bearer [TOKEN]" https://api.github.com/gists/starred

Inicio de sesión de usuarios de forma manual

Si no quieres usar el SDK de cliente, también puedes gestionar el flujo de inicio de sesión manualmente:

  1. Integra la autenticación de GitHub en tu aplicación siguiendo los pasos que se indican en su documentación para desarrolladores.

  2. Inicia la sesión del usuario con GitHub mediante el flujo que has implementado en el paso anterior.

  3. Intercambia el token que recibes de GitHub por una credencial de Identity Platform:

    Versión web 9

    import { GithubAuthProvider } from "firebase/auth";

const credential = GithubAuthProvider.credential(token);
    auth_github_provider_credential.js

    Versión web 8

    var credential = firebase.auth.GithubAuthProvider.credential(token);
    github.js

  4. Usa la credencial para iniciar la sesión del usuario con Identity Platform:

    Versión web 9

    import { getAuth, signInWithCredential } from "firebase/auth";

// Sign in with the credential from the user.
const auth = getAuth();
signInWithCredential(auth, credential)
  .then((result) => {
    // Signed in 
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.customData.email;
    // ...
  });
    auth_signin_credential.js

    Versión web 8

    // Sign in with the credential from the user.
firebase.auth()
  .signInWithCredential(credential)
  .then((result) => {
    // Signed in 
    // ...
  })
  .catch((error) => {
    // Handle Errors here.
    const errorCode = error.code;
    const errorMessage = error.message;
    // The email of the user's account used.
    const email = error.email;
    // ...
  });
    index.js

Siguientes pasos