Auth0 simplifica o processo de estabelecimento da identidade do usuário em seu aplicativo da web. Ele fornece recursos de autenticação e autorização seguros e personalizáveis por meio de sua API. Use-o e você não precisará se preocupar em produzir seu próprio sistema de autenticação do zero.
A integração com o Auth0 facilita a inclusão de autenticação confiável em seu aplicativo React e garante aproximação seguro ao seu aplicativo.
As etapas a seguir explicam o que é necessário para integrar Auth0 em um aplicativo React.
O que é Auth0?
Auth0 é um serviço da web que fornece uma API segura para mourejar com a autenticação e autorização do usuário em seus aplicativos.
Ele fornece um sistema de autenticação personalizável que você pode integrar facilmente ao seu aplicativo React. Depois de conectar Auth0 ao seu aplicativo, ele lida com o restante da fardo de trabalho de autenticação.
Porquê o Auth0 funciona?
Auth0 fornece um recurso de login universal que implementa o fluxo de autenticação. Cada vez que um usuário deseja fazer login, a API o redireciona para uma página de login Auth0, ele é autenticado e os dados de fardo útil de autenticação bem-sucedida são enviados para seu aplicativo.
Você pode personalizar o fluxo de trabalho de autenticação para seu aplicativo definindo diferentes métodos de login. O Login Universal fornece um nome de usuário e senha uma vez que autenticação principal, mas você também pode juntar outras opções, uma vez que login social, por meio de um provedor uma vez que o Google, e autenticação multifator.
A vantagem de usar esse tipo de autenticação é que você não precisa estar familiarizado com protocolos de identidade uma vez que OAuth 2.0 ou OpenID Connect, que são comumente usados para produzir sistemas de autenticação seguros.
Produzir um novo projeto no console do desenvolvedor Auth0
Para estrear, você precisará primeiro se inscrever em uma conta Auth0. Depois de se inscrever, navegue até o seu quadro e clique em Produzir aplicativo para definir as configurações do projeto de autenticação.
Auth0 fornece diferentes configurações de autenticação, dependendo do tipo de aplicativo que você está construindo. Para leste tutorial, preencha o nome do seu aplicativo, selecione Aplicativos da Web de página únicaem seguida, clique em Salve .
Em seguida, selecione Reagir na lista de tecnologias suportadas pelo Auth0.
Configurar os URIs do aplicativo
Depois de produzir seu aplicativo e definir as configurações necessárias, no quadro do aplicativo, clique no botão Configurações guia para configurar as propriedades de URI necessárias.
Defina as seguintes propriedades:
- URLs de retorno de chamada permitidos. A URL que o servidor Auth0 chamará depois a autenticação de um usuário.
- URLs de logout permitidos. A URL para a qual Auth0 redirecionará o usuário quando ele fizer logout.
- Origens da web permitidas. A URL permitida de onde pode vir uma solicitação de autorização.
Para desenvolvimento sítio, você pode usar http://localhost:3000 URL. No entanto, depois de enviar seu código para produção, você precisará fornecer as URLs de seu domínio.
Logo que terminar de preencher os URLs, vá em frente e clique Salvar alterações na secção subordinado da página de configurações.
Defina seus provedores de login social preferidos
No quadro de menu esquerdo do quadro do aplicativo Auth0, clique em Autenticaçãoem seguida, selecione redes sociais. A seguir, clique no Produzir conexão botão na página de configurações de conexões sociais.
Por término, selecione e adicione seu provedor de login social preposto.
Configurar Auth0 em seu aplicativo React
Integre o serviço de autenticação Auth0 em seu aplicativo React criando os componentes de login e sucesso.
1. Crie um aplicativo React e configure um registo ENV
Crie um aplicativo React e abra a pasta do projeto em seu editor de código. Em seguida, no diretório raiz da pasta do seu projeto, crie um registo ENV para moderar suas variáveis de envolvente: seu nome de domínio e ID do cliente. Faça login na sua conta Auth0, no quadro do aplicativo, copie o nome de domínio e o ID do cliente e salve-os em seu registo ENV da seguinte maneira:
REACT_APP_AUTH0_DOMAIN= your domain name
REACT_APP_AUTH0_CLIENT_ID= your client ID
2. Instale os pacotes necessários
Execute leste comando em seu terminal para instalar as dependências necessárias:
npm install @auth0/auth0-react
3. Envolva seu componente de aplicativo com o provedor Auth0
O provedor Auth0 usa React Context. Isso permite que você acesse todas as suas propriedades de dentro do componente App. O Provedor Auth0 usa três parâmetros: o domínio do cliente, o ID do cliente e o URI de redirecionamento.
Abra o registo índice.js, exclua o código React do padrão e adicione o código inferior:
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import{Auth0Provider} from '@auth0/auth0-react';const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<Auth0Provider
domain = {process.env.REACT_APP_AUTH0_DOMAIN}
clientId = {process.env.REACT_APP_AUTH0_CLIENT_ID}
redirectUri = {window.location.origin}
>
<App />
</Auth0Provider>, document.getElementById('root')
);
4. Crie um componente de página de login
Crie uma novidade pasta no diretório /src do seu aplicativo React e nomeie-a uma vez que pages. Dentro desta pasta, crie dois arquivos: Login.js e Success.js.
Abra o registo login.js e adicione o código inferior. O componente da página de login renderizará um botão de login.
import React from 'react'
import { useAuth0 } from '@auth0/auth0-react';const Login = () => {
const { loginWithRedirect, isAuthenticated } = useAuth0();
return (isAuthenticated || (
<button onClick={() => loginWithRedirect()}> Log In</button>
))
}
export default Login
Por padrão, Auth0 fornece um e-mail e senha uma vez que método de autenticação. Ou por outra, dependendo dos provedores de login social selecionados, o Auth0 também exibirá a opção de login do provedor.
5. Crie um componente de página de sucesso
Leste componente renderizará dois recursos principais: um perfil de usuário autenticado e um botão de logout.
No registo Success.js, adicione o código inferior:
import React from 'react'
import { useAuth0 } from '@auth0/auth0-react'const Success = () => {
const { user, logout, isAuthenticated } = useAuth0();
return ( isAuthenticated && (
<div>
<h1>User Profile</h1>
<img src={user.picture} alt={user.name} />
<h2>{user.name}</h2>
<p>{user.email}</p>
<button onClick={() => logout()}> Log Out</button>
</div>
))
}
export default Success
Depois de fazer login e ser autenticado pelo Auth0, o Auth0 redireciona você de volta ao seu aplicativo e envia dados de fardo útil para o seu aplicativo contendo os detalhes do usuário. Você pode usar esses dados em seu aplicativo para produzir perfis de usuário personalizados e gerenciar sessões de usuário. A propriedade User do gancho UseAuth permite que você acesse dados específicos do usuário.
O gancho UseAuth0 também fornece uma propriedade chamada isAuthenticated, que permite renderizar os componentes condicionalmente. Se um usuário for autenticado, o código renderizará os detalhes do perfil e exibirá um componente de botão de logout.
Por outro lado, se não estiverem, você renderizará o componente do botão de login. Isso significa que você não precisa especificar as rotas com base no status de autenticação de um usuário, pois essa propriedade gerencia esse processo involuntariamente. Auth0 define a lógica de login e logoff, facilitando a implementação da funcionalidade de autenticação.
Vale a pena tentar o serviço de autenticação Auth0?
Auth0 fornece soluções prontas para uso que lidam com os requisitos de autenticação do seu aplicativo. Ou por outra, o serviço Auth0 oferece suporte para plataformas de desenvolvimento web, traste e nativo, permitindo que você integre facilmente o sistema de autenticação com uma rima de tecnologia de sua preferência.
