Autenticar usando Yahoo con JavaScript

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

Antes de que empieces

Para iniciar sesión como usuario con cuentas de Yahoo, primero debes habilitar Yahoo como proveedor de inicio de sesión para tu proyecto de Firebase:

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 Yahoo .
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. Para registrar un cliente Yahoo OAuth, siga la documentación para desarrolladores de Yahoo sobre cómo registrar una aplicación web con Yahoo .

      Asegúrese de seleccionar los dos permisos de la 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. 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 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 utilizando el ID de proveedor yahoo.com .

   Web modular API

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

   Web namespaced API

   var provider = new firebase.auth.OAuthProvider('yahoo.com');
   yahoo-oauth.js

2. Opcional : especifique parámetros OAuth personalizados adicionales que desee enviar con la solicitud OAuth.

   Web modular API

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

   Web namespaced API

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

   Para conocer los parámetros que admite Yahoo, consulte la documentación de Yahoo OAuth . Ten en cuenta que no puedes pasar los parámetros requeridos por Firebase con setCustomParameters() . Estos parámetros son client_id , redirigir_uri , tipo_respuesta , alcance y estado .

3. Opcional : especifique alcances de OAuth 2.0 adicionales más allá profile y email que desea solicitar al proveedor de autenticación. Si su aplicación requiere acceso a datos privados de usuario 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 alcances de OAuth solicitados deben coincidir exactamente con los preconfigurados en los permisos API de la aplicación. Por ejemplo, si se solicita acceso de lectura/escritura a los contactos del usuario y se preconfigura en los permisos API de la aplicación, se debe pasar sdct-w en lugar del alcance OAuth de solo lectura sdct-r . De lo contrario, el flujo fallará y se mostrará un error al usuario final.

   Web modular API

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

   Web namespaced API

   // 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');
   yahoo-oauth.js

   Para obtener más información, consulte la documentación de alcances de Yahoo .

4. Autentíquese con Firebase utilizando el objeto 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, llame signInWithPopup :

     Web modular API

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

     Web namespaced API

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

   • Para iniciar sesión redirigiendo a la página de inicio de sesión, llame a signInWithRedirect :

   Siga las mejores prácticas al utilizar signInWithRedirect , linkWithRedirect o reauthenticateWithRedirect .

     firebase.auth().signInWithRedirect(provider);
     

   Una vez que el usuario completa el inicio de sesión y regresa a la página, puede obtener el resultado del inicio de sesión llamando getRedirectResult .

   Web modular API

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

   Web namespaced API

   firebase.auth().signInWithRedirect(provider);
   yahoo-oauth.js

   Una vez completado correctamente, 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 desde el campo firebase.auth().currentUser.providerData[0].uid o desde result.additionalUserInfo.profile .

5. Si bien los ejemplos anteriores se centran en los flujos de inicio de sesión, también tiene la posibilidad 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 modular API

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

   Web namespaced API

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

6. Se puede usar el mismo patrón con reauthenticateWithPopup / reauthenticateWithRedirect , que se puede usar para recuperar credenciales nuevas para operaciones confidenciales que requieren un inicio de sesión reciente.

   Web modular API

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

   Web namespaced API

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

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

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 :

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

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

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