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

Autenticar usando Yahoo con JavaScript

Organiza tus páginas con colecciones Guarda y categoriza el contenido según tus preferencias.

Puede permitir que sus usuarios se autentiquen con Firebase usando proveedores de OAuth como Yahoo integrando el inicio de sesión OAuth genérico en su aplicación usando el SDK de Firebase para llevar a cabo el flujo de inicio de sesión de extremo a extremo.

Antes de que empieces

Para que los usuarios inicien sesión con cuentas de Yahoo, primero debe habilitar Yahoo como proveedor de inicio de sesión para su proyecto de Firebase:

  1. Agregue Firebase a su proyecto de JavaScript .
  2. En Firebase console , abra la sección Auth .
  3. En la pestaña Método de inicio de sesión , habilite el proveedor de Yahoo .
  4. Agregue el ID de cliente y el secreto de cliente de la consola de desarrollador de ese proveedor a la configuración del proveedor:
    1. Para registrar un cliente de Yahoo OAuth, siga la documentación para desarrolladores de Yahoo sobre el registro de una aplicación web con Yahoo .

      Asegúrese de seleccionar los dos permisos de API de OpenID Connect: profile y email .

    2. Al registrar aplicaciones con estos proveedores, asegúrese de registrar el dominio *.firebaseapp.com para su proyecto como dominio de redireccionamiento para su aplicación.
  5. Haga clic en Guardar .

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

Si está creando una aplicación web, la forma más fácil de autenticar a sus usuarios con Firebase usando sus cuentas de Yahoo es manejar todo el flujo de inicio de sesión con el SDK de JavaScript de Firebase.

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

  1. Cree una instancia de OAuthProvider con el ID de proveedor yahoo.com .

    Web version 9

    import { OAuthProvider } from "firebase/auth";
    
    const provider = new OAuthProvider('yahoo.com');

    Web version 8

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
  2. Opcional : especifique parámetros de OAuth personalizados adicionales que desee enviar con la solicitud de OAuth.

    Web version 9

    provider.setCustomParameters({
      // Prompt user to re-authenticate to Yahoo.
      prompt: 'login',
      // Localize to French.
      language: 'fr'
    });  

    Web version 8

    provider.setCustomParameters({
      // Prompt user to re-authenticate to Yahoo.
      prompt: 'login',
      // Localize to French.
      language: 'fr'
    });  

    Para conocer los parámetros compatibles con Yahoo, consulte la documentación de Yahoo OAuth . Tenga en cuenta que no puede pasar parámetros requeridos por Firebase con setCustomParameters() . Estos parámetros son client_id , redirect_uri , response_type , scope y state .

  3. Opcional : especifique ámbitos de OAuth 2.0 adicionales además del profile y el email que desee solicitar al proveedor de autenticación. Si su aplicación requiere acceso a datos de usuario privados de las API de Yahoo, deberá solicitar permisos para las API de Yahoo en Permisos de API en la consola de desarrollador de Yahoo. Los ámbitos de OAuth solicitados deben coincidir exactamente con los preconfigurados en los permisos de la API de la aplicación. Por ejemplo, si se solicita acceso de lectura/escritura a los contactos del usuario y está preconfigurado en los permisos de la API de la aplicación, se debe pasar sdct-w en lugar del alcance de OAuth de solo lectura sdct-r . De lo contrario, el flujo fallará y se mostrará un error al usuario final.

    Web version 9

    // 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');

    Web version 8

    // 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, consulte la documentación de los ámbitos de Yahoo .

  4. Autenticarse con Firebase mediante el objeto del proveedor de OAuth. Puede solicitar a sus usuarios que inicien sesión con sus cuentas de Yahoo abriendo una ventana emergente o redirigiéndolos 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, llama a signInWithPopup :

      Web version 9

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

      Web version 8

      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 iniciar sesión redirigiendo a la página de inicio de sesión, llame a signInWithRedirect :

      firebase.auth().signInWithRedirect(provider);
      

      Después de que el usuario complete el inicio de sesión y regrese a la página, puede obtener el resultado del inicio de sesión llamando a getRedirectResult .

      Web version 9

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

      Web version 8

      firebase.auth().signInWithRedirect(provider);

    Al completarse con éxito, el token de ID de OAuth y el token de acceso asociados con el proveedor se pueden recuperar del objeto firebase.auth.UserCredential devuelto.

    Con el token de acceso de OAuth, puede llamar a la API de Yahoo .

    Por ejemplo, para obtener la información básica del perfil, se puede llamar a la siguiente API REST:

    curl -i -H "Authorization: Bearer ACCESS_TOKEN" https://social.yahooapis.com/v1/user/YAHOO_USER_UID/profile?format=json
    

    Donde YAHOO_USER_UID es el ID del usuario de Yahoo que se puede recuperar del firebase.auth().currentUser.providerData[0].uid o de result.additionalUserInfo.profile .

  5. Si bien los ejemplos anteriores se enfocan en los flujos de inicio de sesión, también tiene la capacidad de vincular un proveedor de Yahoo a un usuario existente mediante linkWithPopup / linkWithRedirect . Por ejemplo, puede vincular varios proveedores al mismo usuario, permitiéndoles iniciar sesión con cualquiera de ellos.

    Web version 9

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

    Web version 8

    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.
        });
  6. El mismo patrón se puede usar con reauthenticateWithPopup / reauthenticateWithRedirect , que se puede usar para recuperar credenciales nuevas para operaciones confidenciales que requieren un inicio de sesión reciente.

    Web version 9

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

    Web version 8

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

Autenticarse con Firebase en una extensión de Chrome

Si está creando una aplicación de extensión de Chrome, debe agregar su ID de extensión de Chrome:

  1. Abra su proyecto en la consola de Firebase .
  2. En la sección Autenticación , abra la página Método de inicio de sesión .
  3. Agregue un URI como el siguiente a la lista de dominios autorizados:
    chrome-extension://CHROME_EXTENSION_ID

Solo las operaciones emergentes ( signInWithPopup , linkWithPopup y reauthenticateWithPopup ) están disponibles para las extensiones de Chrome, ya que las extensiones de Chrome no pueden usar redireccionamientos HTTP. Debe llamar a estos métodos desde un script de página de fondo en lugar de una ventana emergente de acción del navegador, ya que la ventana emergente de autenticación cancelará la ventana emergente de acción del navegador. Los métodos emergentes solo se pueden usar en extensiones que usan Manifest V2 . El Manifest V3 más nuevo solo permite scripts en segundo plano en forma de trabajadores de servicio, que no pueden realizar las operaciones emergentes en absoluto.

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

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 establecer un observador en el objeto Auth . A continuación, puede obtener la información básica del perfil del User del objeto Usuario. Consulte Administrar usuarios .

  • En sus Reglas de seguridad de Firebase Realtime Database y Cloud Storage, puede obtener el ID de usuario único del usuario que inició sesión 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 varios 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 a signOut :

Web version 9

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

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

Web version 8

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