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 Auth.
- 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:
-
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
eemail
. - 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.
API modular da Web
import { OAuthProvider } from "firebase/auth"; const provider = new OAuthProvider('yahoo.com');
API com namespace da Web
var provider = new firebase.auth.OAuthProvider('yahoo.com');
Opcional: especifique os parâmetros OAuth personalizados que você quer enviar com a solicitação OAuth.
API modular da Web
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
API com namespace da Web
provider.setCustomParameters({ // Prompt user to re-authenticate to Yahoo. prompt: 'login', // Localize to French. language: 'fr' });
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
eemail
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 transmitirsdct-w
em vez do escopo somente leiturasdct-r
do OAuth. Caso contrário, o fluxo falhará e um erro será mostrado ao usuário final.API modular da 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');
API com namespace da 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');
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
:API modular da 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. });
API com namespace da 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. });
Para redirecionar os usuários à 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 fizer login e retornar à página, chame
getRedirectResult
para saber o resultado do login.API modular da Web
import { getAuth, signInWithRedirect } from "firebase/auth"; const auth = getAuth(); signInWithRedirect(auth, provider);
API com namespace da Web
firebase.auth().signInWithRedirect(provider);
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 campofirebase.auth().currentUser.providerData[0].uid
ou deresult.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.API modular da 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. });
API com namespace da 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. });
É 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.API modular da 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. });
API com namespace da 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. });
Fazer autenticação com o Firebase em uma extensão do Chrome
Se você está criando um app de extensão do Chrome, é necessário adicionar o ID da extensão:
- Abra seu projeto no Console do Firebase.
- Na seção Autenticação, abra a página Método de login.
- Adicione um URI como o seguinte à lista de domínios autorizados:
chrome-extension://CHROME_EXTENSION_ID
Somente as operações pop-up (signInWithPopup
, linkWithPopup
e reauthenticateWithPopup
) estão disponíveis
para as extensões do Chrome. Isso ocorre porque as extensões não podem usar
redirecionamentos HTTP. Chame esses métodos usando um script de página em segundo plano porque,
se usar o pop-up de ação do navegador, ele será cancelado pelo pop-up de autenticação. Os métodos
pop-up só podem ser usados em extensões que usam
o Manifest V2. O Manifest V3
mais recente só permite scripts em segundo plano na forma de service workers, que não podem realizar as operações
pop-up.
No arquivo de manifesto da sua extensão do Chrome, adicione o URL
https://apis.google.com
à lista de permissões content_security_policy
.
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 objetoUser
. Consulte Gerenciar usuários. Nas Regras de segurança do Firebase Realtime Database e do Cloud Storage, é possível receber o ID exclusivo do usuário conectado da variável
auth
e usar esse ID para controlar quais dados uma pessoa 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
:
API modular da Web
import { getAuth, signOut } from "firebase/auth"; const auth = getAuth(); signOut(auth).then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });
API com namespace da Web
firebase.auth().signOut().then(() => { // Sign-out successful. }).catch((error) => { // An error happened. });