Introdução Este guia é um complemento de . Na introdução desse guia, observei que o Firebase oferece outros esquemas de autenticação além da autenticação básica por e-mail/senha. Uma dessas alternativas é . Como configurar a autenticação do Firebase com um aplicativo da Web React a autenticação sem senha A autenticação sem senha é uma opção atraente na construção de aplicativos. Ele simplifica a experiência do usuário, pois seus usuários não precisam se lembrar de suas senhas e, portanto, também nunca precisam se preocupar em perdê-las. Também facilita a experiência de desenvolvimento, pois não há necessidade de projetar nenhuma captura de senha ou lógica de gerenciamento. Neste guia, você criará um fluxo de trabalho simples de Login/Confirmação/Perfil/Logout que implementa a autenticação sem senha do Firebase. Antes de você começar O Google define vários do Firebase Authentication. Se você estiver usando o plano gratuito, observe que você estará a 5 e-mails com links de login por dia. Embora o plano Spark possa ser suficiente para fins de teste, você precisará atualizar para o plano pré-pago para ultrapassar esse limite. limites Spark limitado Blaze Pré-requisitos Ao longo deste guia, irei me referir ao como o e o projeto associado como o . guia Como configurar o Firebase Authentication com um aplicativo Web React guia de pré-requisito projeto de pré-requisito Para completar este guia, você precisará ter: Concluiu o guia de pré-requisitos, incluindo todos os seus pré-requisitos. Passo 1 – Habilitando a autenticação sem senha com seu projeto Firebase No guia de pré-requisitos, você criou um novo projeto do Firebase para autenticação básica de e-mail/senha. Agora, você habilitará o mesmo projeto para autenticação sem senha. Faça login em sua e clique em . conta do Firebase Ir para o console Clique no seu projeto de autenticação listado no painel de projetos do Firebase. Este guia usa o nome do projeto . my-auth-test Clique em no menu do painel esquerdo. autenticação Clique na guia na janela principal. Método de login Do seu trabalho no guia de pré-requisitos, a tabela já deve exibir na coluna com um status . Clique no ícone de lápis para abrir o painel de configuração do provedor . Provedores de login Email/Senha Provedores Habilitado de e-mail/senha Clique no botão de alternância para ativar o . link E-mail (login sem senha) Clique em . Salvar Seu projeto do Firebase agora está configurado para oferecer suporte à autenticação sem senha. Passo 2 – Criando um Novo Projeto React e Instalando Pacotes Passo 2a – Criando um Novo Projeto React Crie um novo projeto React usando o nome do aplicativo desejado. Este guia usa . passwordless-auth npx create-react-app passwordless-auth Passo 2b – Instalando Pacotes Este guia requer a instalação de 3 pacotes Node.js: : o SDK do Firebase. Firebase : Para roteamento. React Router DOM : Para estilizar. Bootstrap Instale cada um dos três pacotes acima via : npm npm install firebase npm install react-router-dom npm install bootstrap Etapa 3 – Copie do projeto de pré-requisito firebase.js No projeto de pré-requisito, você criou um arquivo que usa os dados de configuração do projeto do Firebase para criar uma instância do serviço Firebase Authentication. Seu arquivo deve ter a seguinte estrutura com valores de configuração do projeto Firebase: firebase.js firebase.js os import { initializeApp } from "firebase/app"; import { getAuth } from "firebase/auth"; const firebaseConfig = { apiKey: "AIzaSyDiUlY68W9Li_0EIkmdGdzD7nvqCT9kHnY", authDomain: "my-auth-test-fbd48.firebaseapp.com", projectId: "my-auth-test-fbd48", storageBucket: "my-auth-test-fbd48.appspot.com", messagingSenderId: "1078604952662", appId: "1:1078604952662:web:5d0b908439cfb5684ab7f7" } const app = initializeApp(firebaseConfig); const auth = getAuth(app); export { auth } Copie para a nova pasta do projeto React. firebase.js Se você precisar revisar a configuração do seu projeto Firebase, clique no ícone de engrenagem próximo a no menu do painel esquerdo. A guia já deve estar selecionada. Role para baixo até a seção que contém o painel . A opção no painel já deve estar selecionada. Os valores de configuração do seu projeto serão listados no bloco de código exibido. Visão geral do projeto Geral Seus aplicativos Aplicativos da Web npm de aplicativos da Web Passo 4 – Construindo o Aplicativo React Etapa 4a – Visão geral dos componentes do aplicativo React O aplicativo React consistirá em 5 componentes: , , , e . App Layout Login Confirm Profile App O componente define a estrutura geral do aplicativo, incluindo roteamento. App Layout O componente especifica a marcação do aplicativo que permanece consistente em todas as rotas. Layout Login O ponto de entrada do usuário no aplicativo é o formulário de login. Quando um usuário tenta fazer login através de seu endereço de e-mail, um e-mail com um link de login é enviado para seu endereço de e-mail. Confirm O usuário é direcionado para a página quando clica em um link de login. Confirm A página solicita que o usuário confirme o endereço de e-mail usado quando fez login. Profile O usuário é direcionado para a página após confirmar seu endereço de e-mail. Profile O usuário pode clicar em um botão de logout na página para sair de sua conta. Profile O diretório final conterá os seguintes arquivos: src src |__ index.js |__ firebase.js // Copied from prerequisite project in Step 3. |__ App.js |__ Layout.jsx |__ Login.jsx |__ Confirm.jsx |__ Profile.jsx Etapa 4b – Limpando o modelo do projeto React e copiando arquivos do projeto de pré-requisito Você pode excluir os mesmos arquivos do modelo de projeto React conforme descrito na Etapa 5b.1 do guia de pré-requisitos. Exclua os seguintes arquivos do seu projeto React: reportWebVitals.js setupTests.js logo.svg index.css App.css App.test.js Copie do projeto de pré-requisito para a nova pasta do projeto. Este guia usa o mesmo arquivo. Se você precisar reconstruir , consulte a Etapa 5b.2 do guia de pré-requisitos ou copie o bloco de código abaixo. index.js index.js Copie do projeto de pré-requisito para a nova pasta do projeto. Este guia usa o mesmo arquivo. Se você precisar reconstruir , consulte a Etapa 5d do guia de pré-requisitos ou copie o bloco de código abaixo. Opcionalmente, você pode atualizar o texto do projeto na tag de para ou qualquer título de sua preferência. Layout.jsx Layout.jsx <p> Layout.jsx React With Firebase Passwordless Authentication Seus arquivos e devem ser os seguintes: index.js Layout.jsx // index.js import React from 'react'; import ReactDOM from 'react-dom/client'; import App from './App'; import "bootstrap/dist/css/bootstrap.min.css"; const root = ReactDOM.createRoot(document.getElementById('root')); root.render( <React.StrictMode> <App /> </React.StrictMode> ); // Layout.jsx import { Outlet } from "react-router-dom"; const Layout = () => { return( <div className = "container-fluid"> <div className = "row justify-content-center mt-3"> <div className = "col-md-4 text-center"> <p className = "lead">React With Firebase Passwordless Authentication</p> </div> <Outlet /> </div> </div> ) } export default Layout Etapa 4c – Construindo App.js O arquivo é basicamente o mesmo do projeto de pré-requisito, com alterações em apenas duas linhas. Para facilitar a construção do arquivo, copie do projeto de pré-requisito para a nova pasta do projeto. App.js App.js Exclua a seguinte linha do arquivo e substitua-a conforme mostrado abaixo: import // Delete this line: import Signup from "./Signup"; // Replace it with: import Confirm from "./Confirm"; Exclua o seguinte do arquivo e substitua-o conforme mostrado abaixo: <Route> // Delete this line: <Route path = "/signup" element = { <Signup></Signup> } ></Route> // Replace it with: <Route path = "/confirm" element = { <Confirm></Confirm> } ></Route> Salve App.js O arquivo completo agora deve ser o seguinte: import Layout from "./Layout"; import Login from "./Login"; import Confirm from "./Confirm"; import Profile from "./Profile"; import { BrowserRouter, Routes, Route } from "react-router-dom"; const App = () => { return ( <BrowserRouter> <Routes> <Route path = "/" element = { <Layout></Layout> }> <Route index element = { <Login></Login> }></Route> <Route path = "/confirm" element = { <Confirm></Confirm> } ></Route> <Route path = "/profile" element = { <Profile></Profile> } ></Route> </Route> </Routes> </BrowserRouter> ) } export default App Observe que o componente é mais uma vez a rota inicial do aplicativo, assim como acontecia com o projeto de pré-requisito. Login Etapa 4d - Construindo Login.jsx No caso de autenticação sem senha, obviamente você não precisa incluir um campo de senha, nem gerenciar o estado para entrada de senha. Assim, o formulário de login só precisa capturar o endereço de e-mail do usuário. Crie um novo arquivo no diretório . Login.jsx src Adicione o seguinte código: import { useState } from "react"; import { auth } from "./firebase"; import { sendSignInLinkToEmail } from "firebase/auth"; const Login = () => { const [email, setEmail] = useState(""); const [notice, setNotice] = useState(""); const actionCodeSettings = { url: "http://localhost:3000/confirm", handleCodeInApp: true } const callSendSignInLinkToEmail = (e) => { e.preventDefault(); sendSignInLinkToEmail(auth, email, actionCodeSettings) .then(() => { setNotice("An email was sent to your email address. Click the link in the email to login."); }) .catch((error) => { setNotice("An error occurred when sending a login link to your email address: ", error.name); }) } return( <div className = "container"> <div className = "row justify-content-center"> <form className = "col-md-4 mt-3 pt-3 pb-3"> { "" !== notice && <div className = "alert alert-warning" role = "alert"> { notice } </div> } <div className = "form-floating mb-3"> <input type = "email" className = "form-control" id = "exampleInputEmail" placeholder = "name@example.com" value = { email } onChange = { (e) => setEmail(e.target.value) }></input> <label htmlFor = "exampleInputEmail" className = "form-label">Email address</label> </div> <div className = "d-grid"> <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => callSendSignInLinkToEmail(e)}>Submit</button> </div> </form> </div> </div> ) } Salve . Login.jsx Ao capturar o endereço de e-mail do usuário, o formulário envia um e-mail com um link de login para seu endereço por meio do método do Firebase. Se for bem-sucedido, o usuário será notificado de que o e-mail foi enviado. Observe que o objeto é passado como um parâmetro para o método e inclui a URL para a qual o usuário será roteado quando clicar no link de login enviado por e-mail. Nesse caso, o URL é mapeado para a rota especificada em . Login.jsx sendSignInLinkToEmail actionCodeSettings sendSignInLinkToEmail /confirm App.js Etapa 4e - Construindo Confirm.jsx O método do Firebase é usado para fazer login em um usuário que clicou em um link de login. Como você verá a seguir, o método usa um parâmetro , e o valor de deve corresponder ao endereço de email que o usuário usou ao fazer login por meio do formulário de login. apresenta ao usuário um formulário para confirmar seu endereço de e-mail e, posteriormente, tenta fazer login do usuário. signInWithEmailLink email email Confirm.jsx Crie um novo arquivo no diretório . Confirm.jsx src Adicione o seguinte código: import { useState } from "react"; import { auth } from "./firebase"; import { isSignInWithEmailLink, signInWithEmailLink } from "firebase/auth"; import { useNavigate } from "react-router-dom"; const Confirm = () => { const navigate = useNavigate(); const [email, setEmail] = useState(""); const [notice, setNotice] = useState(""); const callSignInWithEmailLink = (e) => { e.preventDefault(); if (isSignInWithEmailLink(auth, window.location.href)) { signInWithEmailLink(auth, email, window.location.href) .then(() => { navigate("/profile"); }) .catch((error) => { setNotice("An occurred during sign in: ", error.name); }) } } return( <div className = "container"> <div className = "row justify-content-center"> <form className = "col-md-4 mt-3 pt-3 pb-3"> { "" !== notice && <div className = "alert alert-warning" role = "alert"> { notice } </div> } <div className = "form-floating mb-3"> <input type = "email" className = "form-control" id = "exampleConfirmEmail" placeholder = "name@example.com" value = { email } onChange = { (e) => setEmail(e.target.value) }></input> <label htmlFor = "exampleConfirmEmail" className = "form-label">Please confirm your email address</label> </div> <div className = "d-grid"> <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => callSignInWithEmailLink(e)}>Confirm</button> </div> </form> </div> </div> ) } export default Confirm Salve . Confirm.jsx O método primeiro verifica se o link de login que o usuário está usando é válido. Se for, o método será chamado para conectar o usuário. Para reiterar, o valor passado para o método deve corresponder ao endereço de email que o usuário usou no formulário de login. Observe que se o usuário for um novo usuário (ou seja, é a primeira vez que faz login), o Firebase criará automaticamente o usuário no armazenamento do Firebase Authentication. Este é outro exemplo da experiência simplificada oferecida pela autenticação sem senha: a criação de contas para novos usuários é feita automaticamente. isSignInWithEmailLink signInWithEmailLink email signInWithEmailLink Etapa 4f - Construindo Profile.jsx O componente final que você construirá é . Os usuários são roteados para esse componente quando fazem login com êxito por meio de . A rota dá as boas-vindas ao usuário com seu endereço de e-mail e fornece um botão para sair. Após o logout, o usuário é roteado de volta para o componente . Profile.jsx Confirm.jsx Login Crie um novo arquivo no diretório . Profile.jsx src Adicione o seguinte código: import { auth } from "./firebase"; import { signOut } from "firebase/auth"; import { useNavigate } from "react-router-dom"; const Profile = () => { const navigate = useNavigate(); const logoutUser = async (e) => { e.preventDefault(); await signOut(auth); navigate("/"); } return( <div className = "container"> <div className = "row justify-content-center"> <div className = "col-md-4 text-center"> <p>Welcome <em className = "text-decoration-underline">{ auth.currentUser.email }</em>. You are logged in!</p> <div className = "d-grid gap-2"> <button type = "submit" className = "btn btn-primary pt-3 pb-3" onClick = {(e) => logoutUser(e)}>Logout</button> </div> </div> </div> </div> ) } export default Profile Salve . Profile.jsx Passo 5 – Testando o Aplicativo Inicie o aplicativo React: npm start Navegue até em seu navegador se ele não iniciar automaticamente. Você deverá ver o formulário . locahost:3000 Login Digite o e-mail que deseja usar para fazer login e clique em . Se o envio for bem-sucedido, será exibida uma notificação informando que um e-mail com um link de login foi enviado para o seu endereço de e-mail. Enviar Faça login em sua conta de e-mail e procure o e-mail com o link de login do Firebase. Deve ter uma linha de assunto semelhante a , onde a sequência numérica de 13 dígitos representa o do seu projeto Firebase (consulte a Etapa 3 deste guia). Na seção abaixo, explicarei como você pode modificar o nome do seu projeto Firebase para exibir um nome "amigável" nos e-mails de link de login. Por enquanto, abra o e-mail do link de login e clique no link de login. Você será direcionado para o formulário . Sign in to project-1078604952662 messagingSenderId Opcional Confirm Digite o endereço de e-mail que você usou ao fazer login no formulário . Clique em . Se a confirmação for bem-sucedida, você será direcionado para a página . Confirm Confirmar Profile Clique no botão na página para sair. Se a saída for bem-sucedida, você será direcionado de volta ao formulário . Sair Profile Login As etapas acima capturam o fluxo de trabalho do aplicativo. Opcional: modificando o nome do seu projeto Você pode alterar o nome do seu projeto para que os e-mails com links de login enviados pelo Firebase exibam um nome "amigável" em vez de, por exemplo, . Faça login em sua e clique em . project-1078604952662 conta do Firebase Ir para o console Clique no seu projeto de autenticação listado no painel de projetos do Firebase. Clique no ícone de engrenagem próximo a no menu do painel esquerdo. A guia já deve estar selecionada. Visão geral do projeto Geral Role para baixo até a opção na seção . Nome público Seu projeto Clique no ícone de lápis e modifique o nome do seu projeto conforme desejado. Clique em . Seus e-mails com link de login agora exibirão o nome do projeto atualizado. Salvar Conclusão e próximos passos A autenticação sem senha parece ser uma escolha cada vez mais popular entre os desenvolvedores de aplicativos, e isso é compreensível. Além da vantagem óbvia de eliminar a necessidade de gerenciamento de senhas, também não há necessidade de verificação de e-mail, pois o processo de envio do link de login é uma verificação por si só. Tal como acontece com o projeto de pré-requisito, a implementação aqui é básica. Você pode considerar melhorias simples, como: Bloquear/colocar domínios de endereços de e-mail específicos na lista negra (ou seja, domínios de e-mail de spam comuns). Armazenar localmente o endereço de e-mail inserido pelo usuário na página e verificar a existência do endereço de e-mail na página . Com essa abordagem, se o usuário clicar em um link de login no mesmo dispositivo onde acessou a página , ele não precisará inserir seu endereço de e-mail novamente na página , pois ele será recuperado do armazenamento local. Isso proporciona uma experiência de usuário ainda mais tranquila. Login Confirm Login Confirm Você pode aprender mais sobre o Firebase Passwordless Authentication na . documentação oficial

Walkthroughs, tutorials, guides, and tips. This story will teach you how to do something new or how to do something better.

Este áudio é produzido no idioma original da história!

Como configurar a autenticação sem senha do Firebase com um aplicativo da Web React

Muito longo; Para ler

@pictureinthenoise

Credibility

HISTÓRIAS RELACIONADAS