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:
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
eemail
.- 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 .
import { OAuthProvider } from "firebase/auth";
const provider = new OAuthProvider('yahoo.com');var provider = new firebase.auth.OAuthProvider('yahoo.com');
Opcional : Especifique parâmetros OAuth customizados adicionais que você deseja enviar com a solicitação OAuth.
provider.setCustomParameters({
// Prompt user to re-authenticate to Yahoo.
prompt: 'login',
// Localize to French.
language: 'fr'
});provider.setCustomParameters({
// Prompt user to re-authenticate to Yahoo.
prompt: 'login',
// Localize to French.
language: 'fr'
});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
eemail
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 leiturasdct-r
. Caso contrário, o fluxo falhará e um erro será mostrado ao usuário 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');// 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 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
: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.
});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.
});Para fazer login redirecionando para a página de login, chame
signInWithRedirect
:
Siga as práticas recomendadas ao usar
signInWithRedirect
,linkWithRedirect
oureauthenticateWithRedirect
.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
.import { getAuth, signInWithRedirect } from "firebase/auth";
const auth = getAuth();
signInWithRedirect(auth, provider);firebase.auth().signInWithRedirect(provider);
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 campofirebase.auth().currentUser.providerData[0].uid
ou deresult.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.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.
});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.
});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.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.
});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.
});
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).
Modo pop-up
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).
Avançado: lidar com o fluxo de login manualmente
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 .
Personalizando o domínio de redirecionamento para login do Yahoo
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 objetoUser
. 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
:
import { getAuth, signOut } from "firebase/auth";
const auth = getAuth();
signOut(auth).then(() => {
// Sign-out successful.
}).catch((error) => {
// An error happened.
});
firebase.auth().signOut().then(() => {
// Sign-out successful.
}).catch((error) => {
// An error happened.
});