Esta página foi traduzida pela API Cloud Translation.

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:

Adicione o Firebase ao seu projeto JavaScript .
No console do Firebase , abra a seção Auth .
Na guia Método de login , habilite o provedor Yahoo .
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.
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:

Crie uma instância de um OAuthProvider usando o ID do provedor yahoo.com .
Web modular API
Saiba mais sobre a API da Web modular que pode ser abalada em árvore e faça upgrade da API com namespace.
```
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
```
Opcional : Especifique parâmetros OAuth customizados adicionais que você deseja enviar com a solicitação OAuth.
Web modular API
Saiba mais sobre a API da Web modular que pode ser abalada em árvore e faça 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 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 .
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
Saiba mais sobre a API da Web modular que pode ser abalada em árvore e faça 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 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 .
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
  Saiba mais sobre a API da Web modular que pode ser abalada em árvore e faça upgrade da API com namespace.
```
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
Saiba mais sobre a API da Web modular que pode ser abalada em árvore e faça upgrade da API com namespace.
```
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 .

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

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

Tratamento de erros de conta existente com credenciais diferentes

Se você ativou a configuração Uma conta por endereço de e-mail no console do Firebase , quando um usuário tenta fazer login em um provedor (como o Yahoo) com um e-mail que já existe para o provedor de outro usuário do Firebase (como o Google), o erro auth/account-exists-with-different-credential é lançada junto com um objeto AuthCredential (credencial do Yahoo). Para concluir o login no provedor pretendido, o usuário deve primeiro fazer login no provedor existente (Google) e, em seguida, vincular-se ao antigo AuthCredential (credencial do Yahoo).

Se você usar signInWithPopup , poderá lidar com erros auth/account-exists-with-different-credential com código como o 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

Este erro é tratado de maneira semelhante no modo de redirecionamento, com a diferença de que a credencial pendente deve ser armazenada em cache entre os redirecionamentos de página (por exemplo, usando armazenamento de sessão).

Ao contrário de outros provedores OAuth com suporte do Firebase, como Google, Facebook e Twitter, onde o login pode ser feito diretamente com credenciais baseadas em token de acesso OAuth, o Firebase Auth não oferece suporte ao mesmo recurso para provedores como o Yahoo devido à incapacidade do Servidor Firebase Auth para verificar o público dos tokens de acesso Yahoo OAuth. Este é um requisito crítico de segurança e pode expor aplicativos e sites a ataques repetidos em que um token de acesso Yahoo OAuth obtido para um projeto (invasor) pode ser usado para fazer login em outro projeto (vítima). Em vez disso, o Firebase Auth oferece a capacidade de lidar com todo o fluxo OAuth e a troca de código de autorização usando o ID do cliente OAuth e o segredo configurados no Firebase Console. Como o código de autorização só pode ser usado em conjunto com um ID/segredo de cliente específico, um código de autorização obtido para um projeto não pode ser usado com outro.

Se for necessário 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 com o provedor e o último para trocar a credencial do provedor por um token personalizado.

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 .

Na criação do projeto, o Firebase provisionará um subdomínio exclusivo para o seu projeto: https://my-app-12345.firebaseapp.com .

Isso também será usado como mecanismo de redirecionamento para login do OAuth. Esse domínio precisaria ser permitido para todos os provedores OAuth suportados. No entanto, isso significa que os usuários podem ver esse domínio ao fazer login no Yahoo antes de redirecionar de volta para o aplicativo: Continue para: https://my-app-12345.firebaseapp.com .

Para evitar a exibição do seu subdomínio, você pode configurar um domínio personalizado com Firebase Hosting:

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

Ao inicializar a biblioteca 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ó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

Autenticar usando Yahoo com JavaScript

Antes de você começar

Lidar com o fluxo de login com o SDK do Firebase

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Web modular API

Web namespaced API

Tratamento de erros de conta existente com credenciais diferentes

Modo pop-up

Modo de redirecionamento

Avançado: lidar com o fluxo de login manualmente

Autenticar com Firebase em uma extensão do Chrome

Personalizando o domínio de redirecionamento para login do Yahoo

Próximos passos

Web modular API

Web namespaced API