Google se compromete a impulsar la igualdad racial para las comunidades afrodescendientes. Obtén información al respecto.

Autentica mediante GitHub con JavaScript

Puedes permitir que tus usuarios se autentiquen con Firebase mediante sus cuentas de GitHub si integras la autenticación de GitHub en tu app. Puedes hacerlo si usas el SDK de Firebase para ejecutar el flujo de acceso o ejecutar el flujo de GitHub OAuth 2.0 de forma manual y pasar el token de acceso resultante a Firebase.

Antes de comenzar

  1. Agrega Firebase al proyecto de JavaScript.
  2. En Firebase console, abre la sección Authentication.
  3. En la pestaña Sign-in method, habilita el proveedor GitHub.
  4. Agrega el ID de cliente y el Secreto de cliente de la consola para desarrolladores del proveedor a la configuración correspondiente:
    1. Registra tu app como aplicación de desarrollador en GitHub y obtén el ID de cliente y el Secreto de cliente de OAuth 2.0.
    2. Asegúrate de que tu URI de redireccionamiento de OAuth de Firebase (p. ej., my-app-12345.firebaseapp.com/__/auth/handler) esté configurado como URL de devolución de llamada de autorización en la página de configuración de tu app en GitHub.
  5. Haz clic en Save.

Maneja el flujo de acceso con el SDK de Firebase

Si estás compilando una app web, la manera más fácil de autenticar a tus usuarios en Firebase con sus cuentas de GitHub es administrar el flujo de acceso con el SDK de Firebase JavaScript. Si deseas autenticar a un usuario en Node.js o en cualquier otro entorno que no sea de un navegador, debes manejar el flujo de acceso de forma manual.

Para manejar el flujo de acceso con el SDK de Firebase JavaScript, sigue estos pasos:

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

    Web v8

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

    Web v9

    import { GithubAuthProvider } from "firebase/auth";
    
    const provider = new GithubAuthProvider();
  2. Opcional: Especifica los permisos adicionales de OAuth 2.0 que deseas solicitarle al proveedor de autenticación. Para agregar un permiso, llama a addScope. Por ejemplo:

    Web v8

    provider.addScope('repo');

    Web v9

    provider.addScope('repo');
    Consulta la documentación del proveedor de autenticación.
  3. Opcional: Especifica los parámetros personalizados adicionales del proveedor de OAuth que quieres enviar junto con la solicitud de OAuth. Para agregar un parámetro personalizado, llama a setCustomParameters en el proveedor inicializado con un objeto que contenga la clave que se indica en la documentación del proveedor de OAuth y su valor correspondiente. Por ejemplo:

    Web v8

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

    Web v9

    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    No se permiten los parámetros de OAuth necesarios reservados y se omitirán. Consulta la referencia del proveedor de autenticación para obtener más información.
  4. Autentica con Firebase a través del objeto del proveedor de GitHub. Puedes pedirles a los usuarios que accedan con sus cuentas de GitHub a través de una ventana emergente o mediante un redireccionamiento a la página de acceso. En dispositivos móviles, se prefiere el método de redireccionamiento.
    • Para acceder con una ventana emergente, llama a signInWithPopup:

      Web v8

      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;
          // ...
        }).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;
          // ...
        });

      Web v9

      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;
          // ...
        }).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;
          // The AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });
      Además, ten en cuenta que puedes recuperar el token de OAuth del proveedor de GitHub, que se puede usar para obtener datos adicionales mediante las API de GitHub.

      Aquí también puedes detectar y resolver errores. Para obtener una lista de códigos de error, consulta los documentos de referencia de autenticación.

    • Para acceder mediante el redireccionamiento a la página de acceso, llama a signInWithRedirect como se indica a continuación:

      Web v8

      firebase.auth().signInWithRedirect(provider);

      Web v9

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);
      Luego, para recuperar el token de OAuth del proveedor de GitHub, puedes llamar a getRedirectResult cuando tu página se cargue:

      Web v8

      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;
        }).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;
          // ...
        });

      Web v9

      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;
        }).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;
          // The AuthCredential type that was used.
          const credential = GithubAuthProvider.credentialFromError(error);
          // ...
        });
      Aquí también puedes detectar y resolver errores. Para obtener una lista de códigos de error, consulta los documentos de referencia de autenticación.

Maneja el flujo de acceso de manera manual

También puedes autenticar con Firebase a través de una cuenta de GitHub. Para hacerlo, debes llamar a los extremos de GitHub OAuth 2.0 a fin de manejar el flujo de acceso:

  1. Para integrar la autenticación de GitHub en la app, sigue las indicaciones que se brindan en la documentación para programadores. Al final del flujo de acceso de GitHub, recibirás un token de acceso de OAuth 2.0.
  2. Si necesitas acceder a una aplicación de Node.js, envía el token de acceso de OAuth a la aplicación de Node.js.
  3. Una vez que un usuario acceda correctamente con GitHub, intercambia el token de acceso de OAuth 2.0 por una credencial de Firebase:

    Web v8

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

    Web v9

    import { GithubAuthProvider } from "firebase/auth";
    
    const credential = GithubAuthProvider.credential(token);
  4. Usa la credencial de Firebase para autenticar con Firebase:

    Web v8

    // 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;
        // ...
      });

    Web v9

    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.email;
        // ...
      });

Autentica con Firebase en una extensión de Chrome

Si compilas una app de extensión de Chrome, debes agregar el ID de la extensión de Chrome:

  1. Abre tu proyecto en Firebase console.
  2. En la sección Authentication, abre la página Sign-in method.
  3. Agrega un URI como el siguiente a la lista de dominios autorizados:
    chrome-extension://CHROME_EXTENSION_ID

Solo las operaciones con ventanas emergentes (signInWithPopup y linkWithPopup) están disponibles para las extensiones de Chrome, ya que estas no pueden usar redireccionamientos HTTP. Deberías llamar a estos métodos desde una secuencia de comandos en segundo plano en lugar de una ventana emergente de acción en el navegador, ya que la ventana emergente de autenticación cancela la de acción del navegador.

En el archivo de manifiesto de tu extensión de Chrome, asegúrate de agregar la URL https://apis.google.com a la lista de anunciantes permitidos content_security_policy.

Próximos pasos

Cuando un usuario accede por primera vez, se crea una cuenta de usuario nueva y se la vincula con las credenciales (el nombre de usuario y la contraseña, el número de teléfono o la información del proveedor de autenticación) que el usuario utilizó para acceder. Esta cuenta nueva se almacena como parte de tu proyecto de Firebase y se puede usar para identificar a un usuario en todas las apps del proyecto, sin importar cómo acceda.

  • En tus apps, para conocer el estado de autenticación del usuario, te recomendamos configurar un observador en el objeto Auth. Puedes obtener la información básica de perfil del usuario a partir del objeto User. Consulta Administra usuarios en Firebase.

  • En tus reglas de seguridad de Firebase Realtime Database y Cloud Storage, puedes obtener el ID del usuario único que accedió a partir de la variable auth y usarlo para controlar a qué datos podrá acceder.

Para permitir que los usuarios accedan a la app con varios proveedores de autenticación, puedes vincular las credenciales de estos proveedores con una cuenta de usuario existente.

Para salir de la sesión de un usuario, llama a signOut de la siguiente manera:

Web v8

firebase.auth().signOut().then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});

Web v9

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

const auth = getAuth();
signOut(auth).then(() => {
  // Sign-out successful.
}).catch((error) => {
  // An error happened.
});