Puedes permitir que tus usuarios se autentiquen con Firebase mediante sus cuentas de GitHub integrando la autenticación de GitHub en tu app. Para hacerlo, usa el SDK de Firebase para ejecutar el flujo de acceso, o ejecuta el flujo de GitHub OAuth 2.0 de forma manual y pasa el token de acceso resultante a Firebase.
Antes de comenzar
- Agrega Firebase a tu proyecto de JavaScript.
- En Firebase console, abre la sección Authentication.
- En la pestaña Método de acceso, habilita el proveedor de GitHub.
- Agrega a la configuración correspondiente el ID de cliente y el Secreto de cliente de la consola para
desarrolladores del proveedor:
- 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.
- 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.
- Haz clic en Guardar.
Maneja el flujo de acceso con el SDK de Firebase
Si estás desarrollando 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:
- Crea una instancia del objeto del proveedor de GitHub:
import { GithubAuthProvider } from "firebase/auth"; const provider = new GithubAuthProvider();
var provider = new firebase.auth.GithubAuthProvider();
- 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:provider.addScope('repo');
provider.addScope('repo');
- 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:provider.setCustomParameters({ 'allow_signup': 'false' });
provider.setCustomParameters({ 'allow_signup': 'false' });
- 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
: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); // ... });
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; // ... });
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
: Sigue las prácticas recomendadas cuando uses “signInWithRedirect”.import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
firebase.auth().signInWithRedirect(provider);
getRedirectResult
cuando tu página se cargue, de la siguiente manera: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); // ... });
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; // ... });
- Para acceder con una ventana emergente, llama a
Maneja errores de cuentas que ya existen con otras credenciales
Si habilitaste la configuración Una cuenta por dirección de correo electrónico en Firebase Firebase,
aparecerá el error auth/account-exists-with-different-credential
junto con un objeto AuthCredential
(token de acceso de GitHub) cuando un usuario
trate de acceder a un proveedor (como GitHub) con un correo electrónico que ya está
vinculado al proveedor de otro usuario
de Firebase (como Google). Para completar el acceso al proveedor deseado, el usuario primero debe acceder al proveedor existente (Google) y, luego, vincularlo con la AuthCredential
anterior (token de acceso de GitHub).
Modo de ventanas emergentes
Si usas signInWithPopup
, puedes manejar los errores auth/account-exists-with-different-credential
con un código como el siguiente:
import { getAuth, linkWithCredential, signInWithPopup, GitHubAuthProvider, } from "firebase/auth"; try { // Step 1: User tries to sign in using GitHub. let result = await signInWithPopup(getAuth(), new GitHubAuthProvider()); } catch (error) { // Step 2: User's email already exists. if (error.code === "auth/account-exists-with-different-credential") { // The pending GitHub credential. let pendingCred = error.credential; // Step 3: Save the pending credential in temporary storage, // Step 4: Let the user know that they already have an account // but with a different provider, and let them choose another // sign-in method. } } // ... try { // Step 5: Sign the user in using their chosen method. let result = await signInWithPopup(getAuth(), userSelectedProvider); // Step 6: Link to the GitHub credential. // TODO: implement `retrievePendingCred` for your app. let pendingCred = retrievePendingCred(); if (pendingCred !== null) { // As you have access to the pending credential, you can directly call the // link method. let user = await linkWithCredential(result.user, pendingCred); } // Step 7: Continue to app. } catch (error) { // ... }
Modo de redireccionamiento
Este error se maneja de manera similar en el modo de redireccionamiento, con la diferencia de que la credencial pendiente debe almacenarse en la caché entre las acciones de redireccionamiento de páginas (por ejemplo, mediante almacenamiento de sesió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:
- 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.
- 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.
- Una vez que un usuario acceda correctamente con GitHub, intercambia el token de acceso de OAuth 2.0
por una credencial de Firebase:
import { GithubAuthProvider } from "firebase/auth"; const credential = GithubAuthProvider.credential(token);
var credential = firebase.auth.GithubAuthProvider.credential(token);
- Usa la credencial de Firebase para autenticar con Firebase:
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; // ... });
// 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; // ... });
Autentica con Firebase en una extensión de Chrome
Si desarrollas una app de extensión de Chrome, consulta la guía de Documentos fuera de pantalla.
Personaliza el dominio de redireccionamiento para acceder a GitHub
Cuando crees un proyecto, Firebase le otorgará un subdominio único:
https://my-app-12345.firebaseapp.com
.
También se usará como mecanismo de redireccionamiento para el acceso con OAuth. Todos los proveedores de OAuth compatibles deberían permitir el dominio. Sin embargo, es probable que los usuarios vean ese dominio cuando accedan a GitHub antes de que se los redireccione a la aplicación; p. ej., Continúa a: https://my-app-12345.firebaseapp.com.
Para evitar que se muestre el subdominio, puedes configurar un dominio personalizado con Firebase Hosting:
- Sigue los pasos 1 a 3 de Configura tu dominio para Hosting. Cuando verificas la propiedad de tu dominio, Hosting aprovisiona un certificado SSL para el dominio personalizado.
- Agrega tu dominio personalizado a la lista de dominios autorizados en
Firebase console:
auth.custom.domain.com
. - En la consola para desarrolladores de GitHub o en la página de configuración de OAuth, incluye en la lista de entidades permitidas la URL de la página de redireccionamiento,
a la que se podrá acceder en tu dominio personalizado:
https://auth.custom.domain.com/__/auth/handler
. - Cuando inicialices la biblioteca JavaScript, especifica el dominio personalizado en el campo
authDomain
:var config = { apiKey: '...', // Changed from '
PROJECT_ID .firebaseapp.com'. authDomain: 'auth.custom.domain.com', databaseURL: 'https://PROJECT_ID .firebaseio.com', projectId: 'PROJECT_ID ', storageBucket: ' ', messagingSenderId: 'PROJECT_ID .firebasestorage.appSENDER_ID ' }; firebase.initializeApp(config);
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
. Luego podrás obtener la información de perfil básica del usuario a partir del objetoUser
. 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 tu app mediante 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:
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });