Configurar autenticação de e-mail/senha no MongoDB Atlas App Services
Avalie esse Tutorial
Uma das coisas de que mais gosto é criar aplicativos de pilha completa usando o Node.js, React e MongoDB. Sempre que tenho uma ideia de um bilhão de dólares, começo imediatamente a criá-la usando essa pilha de tecnologia. Independentemente do aplicativo em que estou trabalhando, há alguns recursos que são comuns:
- Autenticação e autorização: login, inscrição e controles de acesso.
- Operações básicas de CRUD (criar, ler, atualizar e excluir).
- Análise de dados.
- Implantação de aplicativos web.
E, sem dúvidas, todos eles executam um papel essencial em qualquer aplicativo full-stack. Mesmo assim, eles consomem muito tempo e energia para serem construídos e são, em sua maioria, repetitivos por natureza. Portanto, temos significativamente menos tempo para criar as funcionalidades que nossos clientes estão esperando. Em um cenário ideal, seu tempo como desenvolvedor deve ser gasto na implementação de recursos e não na reinvenção da roda. Com oMongoDB Atlas App Services, você não precisa se preocupar com isso. Tudo que você precisa fazer é conectar seu aplicativo cliente ao serviço que você precisa e você estará pronto para o sucesso! Ao longo desta série, você aprenderá a criar um aplicativo web de pilha completa com MongoDB Atlas App Services, GraphQL e React. Estaremos construindo um aplicativo gerenciador de despesas chamado Expengo.
A implementação da autenticação no seu aplicativo geralmente exige que você crie e implemente um servidor, certificando-se de que os e-mails sejam exclusivos, as senhas sejam criptografadas e as sessões/tokens sejam gerenciados com segurança. Neste blog, configuraremos a autenticação de e-mail/senha no Atlas App Services. Na parte subsequente desta série, integraremos isso ao nosso aplicativo React.
O MongoDB Atlas é uma plataforma de dados para desenvolvedores que integra um serviço de banco de dados multinuvem com um conjunto de serviços de dados. O Atlas App Services fornece serviços seguros de backend sem servidor e APIs para economizar horas de codificação. Para autenticação, você pode escolher entre muitos fornecedores diferentes, como e-mail/senha, chave de API, Google, Apple e Facebook. Para este tutorial, usaremos o provedor de autenticação por e-mail/senha.
Se ainda não o fez, implante um MongoDB Atlas cluster de nível gratuito . Isso nos permitirá armazenar e recuperar dados de nossa implantação de banco de dados. Você será solicitado a adicionar seu IP à lista de acesso de IP e criar um nome de usuário/senha para acessar seu banco de dados. Depois que um cluster for criado, você poderá criar um Serviço de Aplicativo e vincular-se a ele.
Agora, clique na aba "App Services " conforme destacado na imagem abaixo:
Há uma variedade de modelos que você pode escolher. Para este tutorial, continuaremos com o modelo “Build your own App” e clicaremos em “Next.”
Adicione as informações do aplicativo no próximo pop-up e clique em "Create App Service. "
Clique em “Close Guides” na próxima tela pop-up.
Agora clique em “Authentication” na barra lateral. Em seguida, clique no botão “Edit” no lado direito do e-mail/senha na lista de provedores de autenticação.
Certifique-se de que a opção Provedor ativado esteja definida como Ativada.
Nesta página, também podemos definir as configurações de confirmação do usuário e as configurações de redefinição de senha para nosso aplicativo. Por uma questão de simplicidade deste tutorial, escolheremos:
- Método de confirmação do usuário: “Automatically confirm users.”
- Método de redefinição de senha: “Send a password reset email.”
- Não vamos implementar uma funcionalidade de redefinição de senha em nosso aplicativo cliente. Dito isso, a URL que você insere aqui realmente não importa. Se você quiser saber como redefinir senhas com o App Services, consulte a documentação dedicada.
- Clique em “Save Draft.”
Depois que seu rascunho for salvo, você verá um pop-up azul na parte superior, com o botão “Review Draft & Deploy”. Clique nele e aguarde alguns instantes.
Você verá um pop-up exibindo todas as alterações feitas neste rascunho. Clique em “Deploy” para implantar estas alterações:
Você verá uma mensagem “Deployment was successful” em verde na parte superior se tudo correr bem. Yay!
Observe que todas as capturas de tela foram atualizadas pela última vez em 2022 de agosto. Alguns detalhes da UX podem ter mudado em versões mais recentes. No próximo artigo da série, aprenderemos como podemos utilizar este fornecedor de autenticação de e-mail/senha em nosso aplicativo React.