Puedes dejar que los usuarios se autentiquen con Firebase mediante proveedores de OAuth, como Yahoo, con solo integrar un acceso genérico de OAuth en tu app, usando el SDK de Firebase para llevar a cabo el flujo de acceso de extremo a extremo.
Antes de comenzar
Para que los usuarios accedan con cuentas de Yahoo, primero debes habilitar Yahoo como un proveedor de acceso para tu proyecto de Firebase.
- Agrega Firebase a tu proyecto de JavaScript.
- En Firebase console, abre la sección Auth.
- En la pestaña Método de acceso, habilita el proveedor de Yahoo.
- Agrega el ID y el secreto del cliente de la consola para desarrolladores de ese proveedor a la configuración correspondiente:
-
Si quieres registrar un cliente de OAuth de Yahoo, consulta la documentación para desarrolladores sobre cómo registrar una aplicación web con esa plataforma.
Asegúrate de seleccionar los dos permisos de la API de OpenID Connect:
profile
yemail
. - Cuando registres apps con estos proveedores, asegúrate de registrar el dominio
*.firebaseapp.com
para el proyecto como el dominio de redireccionamiento de la app.
-
- Haz clic en Guardar.
Maneja el flujo de acceso con el SDK de Firebase
Si estás compilando una app web, la manera más sencilla de autenticar a tus usuarios con Firebase mediante sus cuentas de Yahoo es manejar el flujo de acceso completo con el SDK de Firebase JavaScript.
Para manejar el flujo de acceso con el SDK de Firebase JavaScript, sigue estos pasos:
Crea una instancia de un OAuthProvider con el ID de proveedor yahoo.com.
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com');
var provider = new firebase.auth.OAuthProvider('yahoo.com');
Opcional: Especifica otros parámetros de OAuth personalizados que quieras enviar con la solicitud de OAuth.
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
Para conocer los parámetros que admite Yahoo, consulta la documentación de OAuth de Yahoo. Ten en cuenta que no puedes pasar los parámetros obligatorios de Firebase con
setCustomParameters()
. Estos parámetros son client_id, redirect_uri, response_type, scope y state.Opcional: Especifica permisos de OAuth 2.0 adicionales aparte de
profile
yemail
que desees solicitar al proveedor de autenticación. Si tu aplicación requiere acceso a los datos privados del usuario desde las APIs de Yahoo, deberás solicitar permisos a estas últimas en la sección API Permissions de la consola para desarrolladores de Yahoo. Los permisos de OAuth solicitados deben coincidir exactamente con los preconfigurados en los permisos de API de la app. Por ejemplo, si se solicita acceso de lectura y escritura a los contactos del usuario, y se preconfigura en los permisos de API de la app, debes pasarsdct-w
en vez del permiso pde OAuth de solo lecturasdct-r
. De lo contrario, el flujo fallará y se mostrará un error al usuario final.// Request access to Yahoo Mail API. provider.addScope('mail-r'); // Request read/write access to user contacts. // This must be preconfigured in the app's API permissions. provider.addScope('sdct-w');
// Request access to Yahoo Mail API. provider.addScope('mail-r'); // Request read/write access to user contacts. // This must be preconfigured in the app's API permissions. provider.addScope('sdct-w');
Para obtener más información, consulta la documentación de alcances de Yahoo.
Autentica con Firebase mediante el objeto del proveedor de OAuth. Puedes pedirles a los usuarios que accedan con sus cuentas de Yahoo 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, OAuthProvider } from "firebase/auth"; const auth = getAuth(); signInWithPopup(auth, provider) .then((result) => { // IdP data available in result.additionalUserInfo.profile // ... // Yahoo OAuth access token and ID token can be retrieved by calling: const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; }) .catch((error) => { // Handle error. });
firebase.auth().signInWithPopup(provider) .then((result) => { // IdP data available in result.additionalUserInfo.profile // ... /** @type {firebase.auth.OAuthCredential} */ const credential = result.credential; // Yahoo OAuth access token and ID token can be retrieved by calling: var accessToken = credential.accessToken; var idToken = credential.idToken; }) .catch((error) => { // Handle error. });
Para acceder con el redireccionamiento a la página de acceso, llama a
signInWithRedirect
como se indica a continuación:
Sigue las prácticas recomendadas cuando uses
signInWithRedirect
,linkWithRedirect
oreauthenticateWithRedirect
.firebase.auth().signInWithRedirect(provider);
Después de que el usuario termine de acceder y vuelva a la página, puedes obtener el resultado de acceso con solo llamar a
getRedirectResult
.import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
firebase.auth().signInWithRedirect(provider);
Si se termina correctamente, el token de ID de OAuth y el token de acceso asociado con el proveedor se pueden recuperar a partir del objeto
firebase.auth.UserCredential
que se muestra.Con el token de acceso de OAuth, puedes llamar a la API de Yahoo.
Por ejemplo, para obtener información básica de perfil, se puede llamar a la siguiente API de REST:
curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json
En la que
YAHOO_USER_UID
es el ID del usuario de Yahoo, que se puede recuperar desde el campofirebase.auth().currentUser.providerData[0].uid
o desderesult.additionalUserInfo.profile
.Si bien los ejemplos anteriores se enfocan en los flujos de acceso, también puedes vincular un proveedor de Yahoo con un usuario existente mediante
linkWithPopup
olinkWithRedirect
. Por ejemplo, puedes vincular varios proveedores al mismo usuario para que este pueda acceder con cualquiera de ellos.import { getAuth, linkWithPopup, OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com'); const auth = getAuth(); linkWithPopup(auth.currentUser, provider) .then((result) => { // Yahoo credential is linked to the current user. // IdP data available in result.additionalUserInfo.profile. // Get the OAuth access token and ID Token const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; }) .catch((error) => { // Handle error. });
var provider = new firebase.auth.OAuthProvider('yahoo.com'); firebase.auth().currentUser.linkWithPopup(provider) .then((result) => { // Yahoo credential is linked to the current user. // IdP data available in result.additionalUserInfo.profile. // Yahoo OAuth access token can be retrieved by calling: // result.credential.accessToken // Yahoo OAuth ID token can be retrieved by calling: // result.credential.idToken }) .catch((error) => { // Handle error. });
Se puede utilizar el mismo patrón con
reauthenticateWithPopup
oreauthenticateWithRedirect
, que se puede usar a fin de recuperar credenciales nuevas para operaciones sensibles que requieran un acceso reciente.import { getAuth, reauthenticateWithPopup, OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com'); const auth = getAuth(); reauthenticateWithPopup(auth.currentUser, provider) .then((result) => { // User is re-authenticated with fresh tokens minted and // should be able to perform sensitive operations like account // deletion and email or password update. // IdP data available in result.additionalUserInfo.profile. // Get the OAuth access token and ID Token const credential = OAuthProvider.credentialFromResult(result); const accessToken = credential.accessToken; const idToken = credential.idToken; }) .catch((error) => { // Handle error. });
var provider = new firebase.auth.OAuthProvider('yahoo.com'); firebase.auth().currentUser.reauthenticateWithPopup(provider) .then((result) => { // User is re-authenticated with fresh tokens minted and // should be able to perform sensitive operations like account // deletion and email or password update. // IdP data available in result.additionalUserInfo.profile. // Yahoo OAuth access token can be retrieved by calling: // result.credential.accessToken // Yahoo OAuth ID token can be retrieved by calling: // result.credential.idToken }) .catch((error) => { // Handle error. });
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 console, aparecerá el error auth/account-exists-with-different-credential
junto con un objeto AuthCredential
(credencial de Yahoo) cuando un usuario trate de acceder a un proveedor (como Yahoo) 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 (credencial de Yahoo).
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, OAuthProvider, } from "firebase/auth"; try { // Step 1: User tries to sign in using Yahoo. let result = await signInWithPopup(getAuth(), new OAuthProvider()); } catch (error) { // Step 2: User's email already exists. if (error.code === "auth/account-exists-with-different-credential") { // The pending Yahoo 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 Yahoo 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 caché entre acciones de redireccionamiento de páginas (por ejemplo, el uso de almacenamiento de sesión).
Avanzado: Administra el flujo de acceso manualmente
A diferencia de los proveedores de OAuth que admiten Firebase, como Google, Facebook y Twitter, en los que se puede lograr el acceso con credenciales de OAuth basadas en un token, Firebase Auth no admite la misma capacidad para los proveedores como Yahoo debido a la incapacidad del servidor de Firebase Auth para verificar el público de los tokens de acceso de OAuth de Yahoo. Este es un requisito de seguridad fundamental y podría exponer las aplicaciones y los sitios web a volver a reproducir ataques en los que el token de acceso de OAuth de Yahoo que se obtuvo para un proyecto (atacante) se puede usar para acceder a otro proyecto (víctima). En su lugar, Firebase Auth ofrece la capacidad de manejar todo el flujo de OAuth y el intercambio de códigos de autorización con el ID y secreto del cliente de OAuth configurados en Firebase console. Como el código de autorización solo se puede usar junto con un ID/secreto de cliente específico, no se puede usar un código de autorización obtenido para un proyecto con otro.
Si es necesario usar estos proveedores en entornos no admitidos, se requerirían una biblioteca de OAuth de terceros y la autenticación personalizada de Firebase. La primera es necesaria para autenticarse con el proveedor y la última para intercambiar la credencial del proveedor por un token personalizado.
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 el acceso con Yahoo
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 lo vean cuando accedan a Yahoo 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 Yahoo 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. });