Autenticar usando GitHub con JavaScript

Puedes permitir que tus usuarios se autentiquen con Firebase usando sus cuentas de GitHub integrando la autenticación de GitHub en tu aplicación. Puede integrar la autenticación de GitHub utilizando el SDK de Firebase para llevar a cabo el flujo de inicio de sesión o realizando el flujo de GitHub OAuth 2.0 manualmente y pasando el token de acceso resultante a Firebase.

Antes de que empieces

  1. Agrega Firebase a tu proyecto de JavaScript .
  2. En Firebase console , abre la sección Auth .
  3. En la pestaña Método de inicio de sesión , habilite el proveedor de GitHub .
  4. Agregue el ID de cliente y el Secreto de cliente desde la consola de desarrollador de ese proveedor a la configuración del proveedor:
    1. Registre su aplicación como aplicación de desarrollador en GitHub y obtenga el ID de cliente y el secreto de cliente OAuth 2.0 de su aplicación.
    2. Asegúrese de que su URI de redireccionamiento de Firebase OAuth (por ejemplo, my-app-12345.firebaseapp.com/__/auth/handler ) esté configurado como su URL de devolución de llamada de autorización en la página de configuración de su aplicación en la configuración de su aplicación GitHub .
  5. Clic en Guardar .

Maneja el flujo de inicio de sesión con el SDK de Firebase

Si está creando una aplicación web, la forma más sencilla de autenticar a sus usuarios con Firebase utilizando sus cuentas de GitHub es manejar el flujo de inicio de sesión con el SDK de JavaScript de Firebase. (Si desea autenticar a un usuario en Node.js u otro entorno que no sea un navegador, debe controlar el flujo de inicio de sesión manualmente).

Para manejar el flujo de inicio de sesión con el SDK de JavaScript de Firebase, sigue estos pasos:

  1. Cree una instancia del objeto proveedor de GitHub:

    Web modular API

    import { GithubAuthProvider } from "firebase/auth";
    
    const provider = new GithubAuthProvider();

    Web namespaced API

    var provider = new firebase.auth.GithubAuthProvider();
  2. Opcional : especifique ámbitos de OAuth 2.0 adicionales que desee solicitar al proveedor de autenticación. Para agregar un alcance, llame addScope . Por ejemplo:

    Web modular API

    provider.addScope('repo');

    Web namespaced API

    provider.addScope('repo');
    Consulte la documentación del proveedor de autenticación .
  3. Opcional : especifique parámetros de proveedor de OAuth personalizados adicionales que desee enviar con la solicitud de OAuth. Para agregar un parámetro personalizado, llame a setCustomParameters en el proveedor inicializado con un objeto que contenga la clave especificada en la documentación del proveedor de OAuth y el valor correspondiente. Por ejemplo:

    Web modular API

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

    Web namespaced API

    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    Los parámetros OAuth requeridos reservados no están permitidos y se ignorarán. Consulte la referencia del proveedor de autenticación para obtener más detalles.
  4. Autenticarse con Firebase utilizando el objeto proveedor de GitHub. Puede solicitar a sus usuarios que inicien sesión con sus cuentas de GitHub abriendo una ventana emergente o redirigiendo a la página de inicio de sesión. Se prefiere el método de redireccionamiento en dispositivos móviles.
    • Para iniciar sesión con una ventana emergente, llame signInWithPopup :

      Web modular API

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

      Web namespaced API

      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;
          // ...
        });
      Tenga en cuenta también que puede recuperar el token OAuth del proveedor de GitHub, que se puede utilizar para obtener datos adicionales mediante las API de GitHub.

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

    • Para iniciar sesión redirigiendo a la página de inicio de sesión, llame a signInWithRedirect : siga las mejores prácticas al usar `signInWithRedirect`.

      Web modular API

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Web namespaced API

      firebase.auth().signInWithRedirect(provider);
      Luego, también puedes recuperar el token OAuth del proveedor de GitHub llamando getRedirectResult cuando se carga tu página:

      Web modular API

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

      Web namespaced API

      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;
          // ...
        });
      Aquí también es donde puedes detectar y manejar errores. Para obtener una lista de códigos de error, consulte los documentos de referencia de autenticación .

Manejar el flujo de inicio de sesión manualmente

También puedes autenticarte con Firebase usando una cuenta de GitHub manejando el flujo de inicio de sesión llamando a los puntos finales de GitHub OAuth 2.0:

  1. Integre la autenticación de GitHub en su aplicación siguiendo la documentación del desarrollador . Al final del flujo de inicio de sesión de GitHub, recibirá un token de acceso OAuth 2.0.
  2. Si necesita iniciar sesión en una aplicación Node.js, envíe el token de acceso OAuth a la aplicación Node.js.
  3. Después de que un usuario inicie sesión correctamente con GitHub, intercambie el token de acceso de OAuth 2.0 por una credencial de Firebase:

    Web modular API

    import { GithubAuthProvider } from "firebase/auth";
    
    const credential = GithubAuthProvider.credential(token);

    Web namespaced API

    var credential = firebase.auth.GithubAuthProvider.credential(token);
  4. Autenticarse con Firebase usando la credencial de Firebase:

    Web modular API

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

    Web namespaced API

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

Autenticarse con Firebase en una extensión de Chrome

Si está creando una aplicación de extensión de Chrome, consulte la guía Documentos fuera de pantalla .

Próximos pasos

Después de que un usuario inicia sesión por primera vez, se crea una nueva cuenta de usuario y se vincula a las credenciales (es decir, el nombre de usuario y la contraseña, el número de teléfono o la información del proveedor de autenticación) con las que el usuario inició sesión. Esta nueva cuenta se almacena como parte de su proyecto de Firebase y se puede usar para identificar a un usuario en cada aplicación de su proyecto, independientemente de cómo inicie sesión el usuario.

  • En sus aplicaciones, la forma recomendada de conocer el estado de autenticación de su usuario es configurar un observador en el objeto Auth . Luego puede obtener la información básica del perfil del usuario desde el objeto User . Consulte Administrar usuarios .

  • En las reglas de seguridad de Firebase Realtime Database y Cloud Storage, puede obtener el ID de usuario único del usuario que inició sesión a partir de la variable auth y usarlo para controlar a qué datos puede acceder un usuario.

Puede permitir que los usuarios inicien sesión en su aplicación utilizando múltiples proveedores de autenticación vinculando las credenciales del proveedor de autenticación a una cuenta de usuario existente.

Para cerrar la sesión de un usuario, llame signOut :

Web modular API

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

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

Web namespaced API

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

Puedes permitir que tus usuarios se autentiquen con Firebase usando sus cuentas de GitHub integrando la autenticación de GitHub en tu aplicación. Puede integrar la autenticación de GitHub utilizando el SDK de Firebase para llevar a cabo el flujo de inicio de sesión o realizando el flujo de GitHub OAuth 2.0 manualmente y pasando el token de acceso resultante a Firebase.

Antes de que empieces

  1. Agrega Firebase a tu proyecto de JavaScript .
  2. En Firebase console , abre la sección Auth .
  3. En la pestaña Método de inicio de sesión , habilite el proveedor de GitHub .
  4. Agregue el ID de cliente y el Secreto de cliente desde la consola de desarrollador de ese proveedor a la configuración del proveedor:
    1. Registre su aplicación como aplicación de desarrollador en GitHub y obtenga el ID de cliente y el secreto de cliente OAuth 2.0 de su aplicación.
    2. Asegúrese de que su URI de redireccionamiento de Firebase OAuth (por ejemplo, my-app-12345.firebaseapp.com/__/auth/handler ) esté configurado como su URL de devolución de llamada de autorización en la página de configuración de su aplicación en la configuración de su aplicación GitHub .
  5. Clic en Guardar .

Maneja el flujo de inicio de sesión con el SDK de Firebase

Si está creando una aplicación web, la forma más sencilla de autenticar a sus usuarios con Firebase utilizando sus cuentas de GitHub es manejar el flujo de inicio de sesión con el SDK de JavaScript de Firebase. (Si desea autenticar a un usuario en Node.js u otro entorno que no sea un navegador, debe controlar el flujo de inicio de sesión manualmente).

Para manejar el flujo de inicio de sesión con el SDK de JavaScript de Firebase, sigue estos pasos:

  1. Cree una instancia del objeto proveedor de GitHub:

    Web modular API

    import { GithubAuthProvider } from "firebase/auth";
    
    const provider = new GithubAuthProvider();

    Web namespaced API

    var provider = new firebase.auth.GithubAuthProvider();
  2. Opcional : especifique ámbitos de OAuth 2.0 adicionales que desee solicitar al proveedor de autenticación. Para agregar un alcance, llame addScope . Por ejemplo:

    Web modular API

    provider.addScope('repo');

    Web namespaced API

    provider.addScope('repo');
    Consulte la documentación del proveedor de autenticación .
  3. Opcional : especifique parámetros de proveedor de OAuth personalizados adicionales que desee enviar con la solicitud de OAuth. Para agregar un parámetro personalizado, llame a setCustomParameters en el proveedor inicializado con un objeto que contenga la clave especificada en la documentación del proveedor de OAuth y el valor correspondiente. Por ejemplo:

    Web modular API

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

    Web namespaced API

    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    Los parámetros OAuth requeridos reservados no están permitidos y se ignorarán. Consulte la referencia del proveedor de autenticación para obtener más detalles.
  4. Autenticarse con Firebase utilizando el objeto proveedor de GitHub. Puede solicitar a sus usuarios que inicien sesión con sus cuentas de GitHub abriendo una ventana emergente o redirigiendo a la página de inicio de sesión. Se prefiere el método de redireccionamiento en dispositivos móviles.
    • Para iniciar sesión con una ventana emergente, llame signInWithPopup :

      Web modular API

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

      Web namespaced API

      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;
          // ...
        });
      Tenga en cuenta también que puede recuperar el token OAuth del proveedor de GitHub que se puede utilizar para obtener datos adicionales mediante las API de GitHub.

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

    • Para iniciar sesión redirigiendo a la página de inicio de sesión, llame a signInWithRedirect : siga las mejores prácticas al usar `signInWithRedirect`.

      Web modular API

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Web namespaced API

      firebase.auth().signInWithRedirect(provider);
      Luego, también puedes recuperar el token OAuth del proveedor de GitHub llamando getRedirectResult cuando se carga tu página:

      Web modular API

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

      Web namespaced API

      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;
          // ...
        });
      Aquí también es donde puedes detectar y manejar errores. Para obtener una lista de códigos de error, consulte los documentos de referencia de autenticación .

Manejar el flujo de inicio de sesión manualmente

También puedes autenticarte con Firebase usando una cuenta de GitHub manejando el flujo de inicio de sesión llamando a los puntos finales de GitHub OAuth 2.0:

  1. Integre la autenticación de GitHub en su aplicación siguiendo la documentación del desarrollador . Al final del flujo de inicio de sesión de GitHub, recibirá un token de acceso OAuth 2.0.
  2. Si necesita iniciar sesión en una aplicación Node.js, envíe el token de acceso OAuth a la aplicación Node.js.
  3. Después de que un usuario inicie sesión correctamente con GitHub, intercambie el token de acceso de OAuth 2.0 por una credencial de Firebase:

    Web modular API

    import { GithubAuthProvider } from "firebase/auth";
    
    const credential = GithubAuthProvider.credential(token);

    Web namespaced API

    var credential = firebase.auth.GithubAuthProvider.credential(token);
  4. Autenticarse con Firebase usando la credencial de Firebase:

    Web modular API

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

    Web namespaced API

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

Autenticarse con Firebase en una extensión de Chrome

Si está creando una aplicación de extensión de Chrome, consulte la guía Documentos fuera de pantalla .

Próximos pasos

Después de que un usuario inicia sesión por primera vez, se crea una nueva cuenta de usuario y se vincula a las credenciales (es decir, el nombre de usuario y la contraseña, el número de teléfono o la información del proveedor de autenticación) con las que el usuario inició sesión. Esta nueva cuenta se almacena como parte de su proyecto de Firebase y se puede usar para identificar a un usuario en cada aplicación de su proyecto, independientemente de cómo inicie sesión el usuario.

  • En sus aplicaciones, la forma recomendada de conocer el estado de autenticación de su usuario es configurar un observador en el objeto Auth . Luego puede obtener la información básica del perfil del usuario desde el objeto User . Consulte Administrar usuarios .

  • En las reglas de seguridad de Firebase Realtime Database y Cloud Storage, puede obtener el ID de usuario único del usuario que inició sesión a partir de la variable auth y usarlo para controlar a qué datos puede acceder un usuario.

Puede permitir que los usuarios inicien sesión en su aplicación utilizando múltiples proveedores de autenticación vinculando las credenciales del proveedor de autenticación a una cuenta de usuario existente.

Para cerrar la sesión de un usuario, llame signOut :

Web modular API

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

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

Web namespaced API

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

Puedes permitir que tus usuarios se autentiquen con Firebase usando sus cuentas de GitHub integrando la autenticación de GitHub en tu aplicación. Puede integrar la autenticación de GitHub utilizando el SDK de Firebase para llevar a cabo el flujo de inicio de sesión o realizando el flujo de GitHub OAuth 2.0 manualmente y pasando el token de acceso resultante a Firebase.

Antes de que empieces

  1. Agrega Firebase a tu proyecto de JavaScript .
  2. En Firebase console , abre la sección Auth .
  3. En la pestaña Método de inicio de sesión , habilite el proveedor de GitHub .
  4. Agregue el ID de cliente y el Secreto de cliente desde la consola de desarrollador de ese proveedor a la configuración del proveedor:
    1. Registre su aplicación como aplicación de desarrollador en GitHub y obtenga el ID de cliente y el secreto de cliente de OAuth 2.0 de su aplicación.
    2. Asegúrese de que su URI de redireccionamiento de Firebase OAuth (por ejemplo, my-app-12345.firebaseapp.com/__/auth/handler ) esté configurado como su URL de devolución de llamada de autorización en la página de configuración de su aplicación en la configuración de su aplicación GitHub .
  5. Clic en Guardar .

Maneja el flujo de inicio de sesión con el SDK de Firebase

Si está creando una aplicación web, la forma más sencilla de autenticar a sus usuarios con Firebase utilizando sus cuentas de GitHub es manejar el flujo de inicio de sesión con el SDK de JavaScript de Firebase. (Si desea autenticar a un usuario en Node.js u otro entorno que no sea un navegador, debe controlar el flujo de inicio de sesión manualmente).

Para manejar el flujo de inicio de sesión con el SDK de JavaScript de Firebase, sigue estos pasos:

  1. Cree una instancia del objeto proveedor de GitHub:

    Web modular API

    import { GithubAuthProvider } from "firebase/auth";
    
    const provider = new GithubAuthProvider();

    Web namespaced API

    var provider = new firebase.auth.GithubAuthProvider();
  2. Opcional : especifique ámbitos de OAuth 2.0 adicionales que desee solicitar al proveedor de autenticación. Para agregar un alcance, llame addScope . Por ejemplo:

    Web modular API

    provider.addScope('repo');

    Web namespaced API

    provider.addScope('repo');
    Consulte la documentación del proveedor de autenticación .
  3. Opcional : especifique parámetros de proveedor de OAuth personalizados adicionales que desee enviar con la solicitud de OAuth. Para agregar un parámetro personalizado, llame a setCustomParameters en el proveedor inicializado con un objeto que contenga la clave especificada en la documentación del proveedor de OAuth y el valor correspondiente. Por ejemplo:

    Web modular API

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

    Web namespaced API

    provider.setCustomParameters({
      'allow_signup': 'false'
    });
    Los parámetros OAuth requeridos reservados no están permitidos y se ignorarán. Consulte la referencia del proveedor de autenticación para obtener más detalles.
  4. Autenticarse con Firebase utilizando el objeto proveedor de GitHub. Puede solicitar a sus usuarios que inicien sesión con sus cuentas de GitHub abriendo una ventana emergente o redirigiendo a la página de inicio de sesión. Se prefiere el método de redireccionamiento en dispositivos móviles.
    • Para iniciar sesión con una ventana emergente, llame signInWithPopup :

      Web modular API

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

      Web namespaced API

      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;
          // ...
        });
      Tenga en cuenta también que puede recuperar el token OAuth del proveedor de GitHub que se puede utilizar para obtener datos adicionales mediante las API de GitHub.

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

    • Para iniciar sesión redirigiendo a la página de inicio de sesión, llame a signInWithRedirect : siga las mejores prácticas al usar `signInWithRedirect`.

      Web modular API

      import { getAuth, signInWithRedirect } from "firebase/auth";
      
      const auth = getAuth();
      signInWithRedirect(auth, provider);

      Web namespaced API

      firebase.auth().signInWithRedirect(provider);
      Luego, también puedes recuperar el token OAuth del proveedor de GitHub llamando getRedirectResult cuando se carga tu página:

      Web modular API

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

      Web namespaced API

      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;
          // ...
        });
      Aquí también es donde puedes detectar y manejar errores. Para obtener una lista de códigos de error, consulte los documentos de referencia de autenticación .

Manejar el flujo de inicio de sesión manualmente

También puedes autenticarte con Firebase usando una cuenta de GitHub manejando el flujo de inicio de sesión llamando a los puntos finales de GitHub OAuth 2.0:

  1. Integre la autenticación de GitHub en su aplicación siguiendo la documentación del desarrollador . Al final del flujo de inicio de sesión de GitHub, recibirá un token de acceso OAuth 2.0.
  2. Si necesita iniciar sesión en una aplicación Node.js, envíe el token de acceso OAuth a la aplicación Node.js.
  3. Después de que un usuario inicie sesión correctamente con GitHub, intercambie el token de acceso de OAuth 2.0 por una credencial de Firebase:

    Web modular API

    import { GithubAuthProvider } from "firebase/auth";
    
    const credential = GithubAuthProvider.credential(token);

    Web namespaced API

    var credential = firebase.auth.GithubAuthProvider.credential(token);
  4. Autenticarse con Firebase usando la credencial de Firebase:

    Web modular API

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

    Web namespaced API

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

Autenticarse con Firebase en una extensión de Chrome

Si está creando una aplicación de extensión de Chrome, consulte la guía Documentos fuera de pantalla .

Próximos pasos

Después de que un usuario inicia sesión por primera vez, se crea una nueva cuenta de usuario y se vincula a las credenciales (es decir, el nombre de usuario y la contraseña, el número de teléfono o la información del proveedor de autenticación) con las que el usuario inició sesión. Esta nueva cuenta se almacena como parte de su proyecto de Firebase y se puede usar para identificar a un usuario en cada aplicación de su proyecto, independientemente de cómo inicie sesión el usuario.

  • En sus aplicaciones, la forma recomendada de conocer el estado de autenticación de su usuario es configurar un observador en el objeto Auth . Luego puede obtener la información básica del perfil del usuario desde el objeto User . Consulte Administrar usuarios .

  • En las reglas de seguridad de Firebase Realtime Database y Cloud Storage, puede obtener el ID de usuario único del usuario que inició sesión a partir de la variable auth y usarlo para controlar a qué datos puede acceder un usuario.

Puede permitir que los usuarios inicien sesión en su aplicación utilizando múltiples proveedores de autenticación vinculando las credenciales del proveedor de autenticación a una cuenta de usuario existente.

Para cerrar la sesión de un usuario, llame signOut :

Web modular API

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

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

Web namespaced API

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