Autenticar usando Yahoo com JavaScript

Você pode permitir que seus usuários se autentiquem com o Firebase usando provedores OAuth como o Yahoo, integrando o login genérico do OAuth ao seu aplicativo usando o SDK do Firebase para realizar o fluxo de login de ponta a ponta.

Antes de você começar

Para fazer login de usuários usando contas do Yahoo, primeiro você deve ativar o Yahoo como provedor de login para seu projeto do Firebase:

  1. Adicione o Firebase ao seu projeto JavaScript .
  2. No console do Firebase , abra a seção Auth .
  3. Na guia Método de login , habilite o provedor Yahoo .
  4. Adicione o ID do cliente e o segredo do cliente do console do desenvolvedor desse provedor à configuração do provedor:

    1. Para registrar um cliente Yahoo OAuth, siga a documentação do desenvolvedor do Yahoo sobre como registrar um aplicativo Web no Yahoo .

      Certifique-se de selecionar as duas permissões da API OpenID Connect: profile e email .

    2. Ao registrar aplicativos com esses provedores, registre o domínio *.firebaseapp.com do seu projeto como o domínio de redirecionamento do seu aplicativo.
  5. Clique em Salvar .

Lidar com o fluxo de login com o SDK do Firebase

Se você estiver criando um aplicativo da Web, a maneira mais fácil de autenticar seus usuários no Firebase usando suas contas do Yahoo é lidar com todo o fluxo de login com o SDK JavaScript do Firebase.

Para lidar com o fluxo de login com o SDK JavaScript do Firebase, siga estas etapas:

  1. Crie uma instância de um OAuthProvider usando o ID do provedor 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 customizados adicionais que você deseja enviar com a solicitação 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 obter os parâmetros suportados pelo Yahoo, consulte a documentação do Yahoo OAuth . Observe que você não pode passar parâmetros exigidos pelo Firebase com setCustomParameters() . Esses parâmetros são client_id , redirect_uri , response_type , scope e state .

  3. Opcional : Especifique escopos adicionais do OAuth 2.0 além profile e email que você deseja solicitar do provedor de autenticação. Se o seu aplicativo exigir acesso a dados privados de usuários das APIs do Yahoo, você precisará solicitar permissões para as APIs do Yahoo em Permissões de API no console do desenvolvedor do Yahoo. Os escopos OAuth solicitados devem corresponder exatamente aos pré-configurados nas permissões da API do aplicativo. Por exemplo, se o acesso de leitura/gravação for solicitado aos contatos do usuário e pré-configurado nas permissões da API do aplicativo, sdct-w deverá ser passado em vez do escopo OAuth somente leitura sdct-r . Caso contrário, o fluxo falhará e um erro será mostrado ao usuário 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 saber mais, consulte a documentação de escopos do Yahoo .

  4. Autentique-se com o Firebase usando o objeto do provedor OAuth. Você pode solicitar que seus usuários façam login com suas contas do Yahoo abrindo uma janela pop-up ou redirecionando para a página de login. O método de redirecionamento é preferido em dispositivos móveis.

    • Para fazer login com uma janela pop-up, chame 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 fazer login redirecionando para a página de login, chame signInWithRedirect :

    Siga as práticas recomendadas ao usar signInWithRedirect , linkWithRedirect ou reauthenticateWithRedirect .

      firebase.auth().signInWithRedirect(provider);

    Depois que o usuário concluir o login e retornar à página, será possível obter o resultado do login chamando 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

    Após a conclusão bem-sucedida, o token de ID OAuth e o token de acesso associados ao provedor podem ser recuperados do objeto firebase.auth.UserCredential retornado.

    Usando o token de acesso OAuth, você pode chamar a API do Yahoo .

    Por exemplo, para obter as informações básicas do perfil, a seguinte API REST pode ser chamada:

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

    Onde YAHOO_USER_UID é o ID do usuário do Yahoo que pode ser recuperado do campo firebase.auth().currentUser.providerData[0].uid ou de result.additionalUserInfo.profile .

  5. Embora os exemplos acima se concentrem em fluxos de login, você também tem a capacidade de vincular um provedor do Yahoo a um usuário existente usando linkWithPopup / linkWithRedirect . Por exemplo, você pode vincular vários provedores ao mesmo usuário, permitindo que eles façam login com qualquer um deles.

    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. O mesmo padrão pode ser usado com reauthenticateWithPopup / reauthenticateWithRedirect que pode ser usado para recuperar credenciais novas para operações confidenciais que exigem login recente.

    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

Autenticar com Firebase em uma extensão do Chrome

Se você estiver criando um aplicativo de extensão do Chrome, consulte o guia Documentos fora da tela .

Próximos passos

Depois que um usuário faz login pela primeira vez, uma nova conta de usuário é criada e vinculada às credenciais (ou seja, nome de usuário e senha, número de telefone ou informações do provedor de autenticação) com as quais o usuário fez login. Essa nova conta é armazenada como parte do seu projeto do Firebase e pode ser usada para identificar um usuário em todos os aplicativos do seu projeto, independentemente de como o usuário faz login.

  • Em seus aplicativos, a maneira recomendada de saber o status de autenticação do seu usuário é definir um observador no objeto Auth . Você pode então obter as informações básicas do perfil do usuário no objeto User . Consulte Gerenciar usuários .

  • Nas regras de segurança do Firebase Realtime Database e do Cloud Storage , você pode obter o ID de usuário exclusivo do usuário conectado na variável auth e usá-lo para controlar quais dados um usuário pode acessar.

Você pode permitir que os usuários façam login no seu aplicativo usando vários provedores de autenticação vinculando as credenciais do provedor de autenticação a uma conta de usuário existente.

Para desconectar um usuário, chame signOut :

Web modular API

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

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

Web namespaced API

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