Ir a la consola

Autentica mediante Yahoo con JavaScript

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.

  1. Agrega Firebase al proyecto de JavaScript.
  2. En Firebase console, abre la sección Auth.
  3. En la pestaña Método de acceso, habilita el proveedor de Yahoo.
  4. Agrega el ID de cliente y el secreto del cliente de la consola para desarrolladores de ese proveedor a la configuración del proveedor, como se muestra a continuación:
    1. Para registrar un cliente de OAuth de Yahoo, sigue las instrucciones de Yahoo sobre cómo registrar una aplicación web con esta plataforma.
    2. Cuando registres apps con estos proveedores, asegúrate de registrar el dominio *.firebaseapp.com para tu proyecto como el dominio de redireccionamiento de tu app.
  5. 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 con el SDK de Firebase para JavaScript.

A fin de manejar el flujo de acceso con el SDK de Firebase para JavaScript, sigue estos pasos:

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

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

    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 parámetros que requiere Firebase con setCustomParameters(). Estos parámetros son client_id, redirect_uri, response_type, scope y state.

  3. Opcional: Especifica alcances de OAuth 2.0 adicionales aparte del perfil básico que quieres solicitar del proveedor de autenticación. Si tu aplicación requiere acceso a datos privados del usuario desde las API de Yahoo, será necesario que solicites permisos a estas últimas en Permisos de API en la consola para desarrolladores de Yahoo. Los alcances de OAuth solicitados deben coincidir exactamente con los preconfigurados en los permisos de API de la app. Por ejemplo, si se solicita el acceso de lectura/escritura a los contactos del usuario y se preconfigura en los permisos de API de la app, 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.

    // 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.

  4. 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:

      firebase.auth().signInWithPopup(provider)
        .then(function(result) {
          // User is signed in.
          // 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(function(error) {
          // Handle error.
        });
      
    • Para acceder mediante el redireccionamiento a la página de acceso, llama a signInWithRedirect:

      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.

      firebase.auth().getRedirectResult()
        .then(function(result) {
          // User is signed in.
          // 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(function(error) {
          // Handle error.
        });
      

    Si se termina correctamente, el token de ID de acceso de OAuth asociado con el proveedor se puede recuperar a partir del objeto firebase.auth.UserCredential que se muestra.

    Mediante 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 campo firebase.auth().currentUser.providerData[0].uid o desde result.additionalUserInfo.profile.

  5. Si bien los ejemplos anteriores se enfocan en los flujos de acceso, también tienes la capacidad de vincular un proveedor de Yahoo con un usuario existente mediante linkWithPopup/linkWithRedirect. Por ejemplo, puedes vincular varios proveedores con el mismo usuario para permitirles acceder con cualquiera de estos.

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.linkWithPopup(provider)
        .then(function(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(function(error) {
          // Handle error.
        });
    
  6. Se puede usar el mismo patrón con reauthenticateWithPopup/reauthenticateWithRedirect, que se puede usar a fin de recuperar credenciales nuevas para operaciones sensibles que requieren un acceso reciente.

    var provider = new firebase.auth.OAuthProvider('yahoo.com');
    firebase.auth().currentUser.reauthenticateWithPopup(provider)
        .then(function(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(function(error) {
          // Handle error.
        });
    

Autentica con Firebase en una extensión de Chrome

Si estás compilando una app de extensión de Chrome, debes incluir en la lista blanca el ID de extensión de Chrome:

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

Solo las operaciones con elementos 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.

Asegúrate de incluir la URL https://apis.google.com en la lista blanca content_security_policy en tu archivo de manifiesto de la extensión de Chrome.

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 usó para acceder. Esta cuenta nueva se almacena como parte del proyecto de Firebase y puede usarse para identificar a un usuario en todas las apps del proyecto, sin importar el método de acceso que se use.

  • En las 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 Cómo administrar usuarios.

  • En las reglas de seguridad de Firebase Realtime Database y Cloud Storage, puedes obtener el ID único del usuario 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 con varios proveedores de autenticación, puedes vincular las credenciales de proveedores de autenticación a una cuenta de usuario existente.

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

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