Autenticar usando o Yahoo com JavaScript

Permita que os usuários se autentiquem com o Firebase usando provedores OAuth, como o Yahoo. Basta integrar o login genérico do OAuth ao seu app usando o SDK do Firebase para realizar o fluxo de login completo.

Antes de começar

Para fazer login de usuários usando contas do Yahoo, primeiro ative o Yahoo como um provedor de login do seu projeto do Firebase:

Adicione o Firebase ao seu projeto em JavaScript.
No console do Firebase, abra a seção Autenticação.
Na guia Método de login, ative o provedor Yahoo.
Adicione o ID do cliente e a Chave secreta do cliente no console de desenvolvimento às configurações do provedor:
1. Para registrar um cliente OAuth do Yahoo, siga a documentação do desenvolvedor dessa plataforma sobre como registrar um aplicativo da Web no Yahoo.
  
  Selecione as duas permissões da API OpenID Connect: profile e email.
2. Ao registrar apps nesses provedores, registre o domínio *.firebaseapp.com do projeto como o domínio de redirecionamento do seu app.
Clique em Salvar.

Processar o fluxo de login com o SDK do Firebase

Se você está desenvolvendo um app da Web, a maneira mais fácil de autenticar seus usuários com o Firebase usando contas do Yahoo é processando todo o fluxo de login com o SDK do Firebase para JavaScript.

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

Crie uma instância de um OAuthProvider usando o ID de provedor yahoo.com.

Web

import { OAuthProvider } from "firebase/auth";

const provider = new OAuthProvider('yahoo.com');auth_yahoo_provider_create.js

Web

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

Opcional: especifique os parâmetros OAuth personalizados que você quer enviar com a solicitação OAuth.
Web

Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.
```
provider.setCustomParameters({
  // Prompt user to re-authenticate to Yahoo.
  prompt: 'login',
  // Localize to French.
  language: 'fr'
});  auth_yahoo_provider_params.js
```
Web
```
provider.setCustomParameters({
  // Prompt user to re-authenticate to Yahoo.
  prompt: 'login',
  // Localize to French.
  language: 'fr'
});  yahoo-oauth.js
```
Para saber quais parâmetros são aceitos pelo Yahoo, consulte a documentação do OAuth do Yahoo (em inglês). Não é possível transmitir os parâmetros exigidos pelo Firebase com setCustomParameters(). Esses parâmetros são client_id, redirect_uri, response_type, scope e state.
Opcional: especifique escopos adicionais do OAuth 2.0 além de profile e email que você quer solicitar ao provedor de autenticação. Se o aplicativo exigir acesso a dados particulares de usuários das APIs do Yahoo, será necessário solicitar permissões às APIs em Permissões de APIs no console de desenvolvimento do Yahoo. Os escopos do OAuth solicitados precisam corresponder exatamente àqueles pré-configurados nas permissões da API do app. 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 app, será necessário transmitir sdct-w em vez do escopo somente leitura sdct-r do OAuth. Caso contrário, o fluxo falhará e um erro será mostrado ao usuário final.
Web

Saiba mais sobre a API modular da Web que oferece suporte a tree shaking e o upgrade da API com namespace.
```
// 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
```
// 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 do escopo do Yahoo (em inglês).

Use o objeto de provedor do OAuth para a autenticação no Firebase. Solicite que os usuários façam login nas contas da Microsoft deles em uma nova janela pop-up ou os redirecionando para a página de login. O método de redirecionamento é recomendável para dispositivos móveis.

Para fazer login com uma janela pop-up, chame signInWithPopup:

Web

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

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 redirecionar os usuários à página de login, chame signInWithRedirect:

  firebase.auth().signInWithRedirect(provider);

Depois que o usuário fizer login e retornar à página, chame getRedirectResult para saber o resultado do login.

Web

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

const auth = getAuth();
signInWithRedirect(auth, provider);auth_yahoo_signin_redirect.js

Web

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

Se o processo tiver sido bem-sucedido, os tokens de ID OAuth e de acesso associados ao provedor poderão ser recuperados no objeto firebase.auth.UserCredential.

Com o token de acesso OAuth, é possível chamar a API do Yahoo.

Por exemplo, para receber as informações básicas do perfil, é possível chamar a seguinte API REST:

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

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

Os exemplos acima se concentram nos fluxos de login, mas também é possível vincular um provedor do Yahoo a um usuário atual usando linkWithPopup/linkWithRedirect. Por exemplo, é possível vincular vários provedores ao mesmo usuário, isso permitirá que ele faça login usando qualquer um deles.

Web

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

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

É possível usar o mesmo padrão com reauthenticateWithPopup/reauthenticateWithRedirect, que pode ser utilizado para recuperar credenciais novas para operações confidenciais que exigem um login recente.

Web

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

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

Processar erros account-exists-with-different-credential

Se você ativou a configuração Uma conta por endereço de e-mail no console do Firebase, quando um usuário tentar se conectar a um provedor (como o Yahoo) com um e-mail que já existe em outro provedor de usuários do Firebase (como o Google), o erro auth/account-exists-with-different-credential será exibido com um objeto AuthCredential (credencial do Yahoo). Para concluir o login no provedor pretendido, o usuário primeiro precisa fazer login no provedor atual (Google) e, em seguida, vinculá-lo ao AuthCredential anterior (credencial do Yahoo).

Se você usar signInWithPopup, poderá corrigir erros auth/account-exists-with-different-credential utilizando código, como o do exemplo a seguir:

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 redirecionamento

O processamento desse erro é similar no modo de redirecionamento. No entanto, nele, as credenciais pendentes devem ser armazenadas em cache entre os redirecionamentos de página usando, por exemplo, o armazenamento de sessão.

Ao contrário de outros provedores OAuth aceitos pelo Firebase, como Google, Facebook e Twitter, em que é possível fazer login diretamente com credenciais baseadas em token de acesso OAuth, isso não é possível no Firebase Auth ao usar provedores como o Yahoo porque o servidor do Firebase Auth não consegue verificar o público dos tokens de acesso OAuth do Yahoo. Esse é um requisito de segurança fundamental e pode expor aplicativos e sites a ataques de repetição, em que um token de acesso OAuth do Yahoo recebido em um projeto (invasor) pode ser usado para acessar outro projeto (vítima). Em vez disso, o Firebase Auth permite gerenciar todo o fluxo do OAuth e trocar o código de autorização usando o ID do cliente e o secret do OAuth configurados no Console do Firebase. Um código de autorização recebido em um projeto não pode ser usado em outro, porque só pode ser utilizado em conjunto com um ID do cliente/secret específicos.

Se for preciso usar esses provedores em ambientes sem suporte, será necessário usar uma biblioteca OAuth de terceiros e uma autenticação personalizada do Firebase. O primeiro é necessário para autenticar no provedor, e o segundo para trocar a credencial do provedor por um token personalizado.

Autenticar com Firebase em uma extensão do Chrome

Se você estiver criando um app de extensão do Google Chrome, consulte a Guia de documentos fora da tela.

O Firebase vai provisionar um subdomínio exclusivo para o projeto https://my-app-12345.firebaseapp.com no momento da criação dele.

Esse subdomínio também será usado como mecanismo de redirecionamento para o login do OAuth. O domínio precisaria ter permissão para todos os provedores OAuth com suporte. No entanto, isso significa que é possível que os usuários vejam esse domínio ao fazer login no Yahoo antes do redirecionamento para o aplicativo: Continuar para: https://my-app-12345.firebaseapp.com.

Para evitar a exibição do subdomínio, configure um domínio personalizado com o Firebase Hosting:

Siga as etapas de 1 a 3 em Configurar o domínio para o Hosting. Quando você verifica a propriedade do domínio, o Hosting provisiona um certificado SSL para o domínio personalizado.
Adicione o domínio personalizado à lista de domínios autorizados no console do Firebase: auth.custom.domain.com.
Na página de configuração do console do desenvolvedor do Yahoo ou OAuth, coloque na lista de permissões o URL da página de redirecionamento, que ficará acessível no seu domínio personalizado: https://auth.custom.domain.com/__/auth/handler.

Ao inicializar a biblioteca do JavaScript, especifique seu domínio personalizado com o campo authDomain:

var config = {
  apiKey: '...',
  // Changed from 'my-app-12345.firebaseapp.com'.
  authDomain: 'auth.custom.domain.com',
  databaseURL: 'https://my-app-12345.firebaseio.com',
  projectId: 'my-app-12345',
  storageBucket: 'my-app-12345.appspot.com',
  messagingSenderId: '1234567890'
};
firebase.initializeApp(config);

Próximas etapas

Depois que um usuário faz login pela primeira vez, uma nova conta de usuário é criada e vinculada às credenciais, que podem ser o número do telefone, o nome de usuário e a senha ou as informações do provedor de autenticação. Essa nova conta é armazenada como parte do projeto do Firebase e pode ser usada para identificar um usuário em todos os apps do projeto, seja qual for o método de login utilizado.

Nos apps, a maneira recomendada de saber o status de autenticação do seu usuário é definindo um observador no objeto Auth. É possível, então, receber as informações básicas de perfil do usuário do objeto User. Consulte Gerenciar usuários.
Nas Regras de segurança Firebase Realtime Database e Cloud Storage, você pode acessar o ID exclusivo do usuário conectado pela variável auth e usar essas informações para controlar quais dados um usuário pode acessar.

Os usuários podem fazer login no app usando vários provedores de autenticação. Basta vincular as credenciais desses provedores a uma conta de usuário.

Para desconectar um usuário, chame signOut:

Web

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

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

Autenticar usando o Yahoo com JavaScript

Antes de começar

Processar o fluxo de login com o SDK do Firebase

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Web

Processar erros account-exists-with-different-credential

Modo de pop-up

Modo de redirecionamento

Avançado: processar o fluxo de login manualmente

Autenticar com Firebase em uma extensão do Chrome

Personalizar o domínio de redirecionamento para o login do Yahoo

Próximas etapas

Web

Web