Verificar a identidade de seus usuários é fundamental para a maioria dos aplicativos. Ativar seu próprio sistema de autenticação pode ser simples no início, mas quando você considera as pontes de segurança e a facilidade de integração com terceiros, como Google ou Facebook, pode ver como construir e manter seu próprio sistema de autenticação pode rapidamente se tornar tedioso e complexo.
Uma boa abordagem seria usar uma solução dedicada ao tratamento da autenticação, como o Okta. O Okta oferece acesso a uma equipe dedicada de especialistas em segurança para que você não precise se preocupar com o incômodo de cuidar dos seus dados de usuário.
Neste tutorial, mostraremos como implementar a autenticação do Okta em React. Para acompanhar, você deve estar familiarizado com JavaScript e React Hooks .
Configurando um aplicativo React
O primeiro requisito é inscreva-se na edição de desenvolvedor do Okta . Isso nos dá acesso ao painel do administrador , onde criaremos o método de login e nosso tipo de aplicativo-em nosso caso, um aplicativo de página única (SPA).
Rota do aplicativo para iniciar a integração com o Okta.
Na rota do aplicativo, podemos gerar uma integração de aplicativo (nosso método de login).
Botão de integração do aplicativo para selecionar o método de login.
Clicar no botão Criar integração de aplicativo gera uma caixa de diálogo com métodos de login. Como nosso aplicativo é um SPA e não estamos conectados a um back-end, usaremos o método de login OpenID Connect, que fornece um widget de login para nós (também construiremos nosso próprio formulário de login personalizado posteriormente).
Depois de selecionar a integração do aplicativo, queremos selecionar Aplicativo de página única e prosseguir.
A próxima etapa é especificar um URI de redirecionamento de login (um URI de retorno de chamada). Isso é muito importante porque, ao usar o método de login OpenID Connect, somos redirecionados para um widget de login hospedado pelo Okta (um ponto de extremidade diferente do nosso aplicativo) e precisamos de um URL de retorno de chamada onde o Okta retorna ao nosso aplicativo com o usuário detalhes.
Você também pode especificar outras rotas, como o URI de redirecionamento de saída, que é a página para a qual o aplicativo deve ser redirecionado quando efetuamos logout do aplicativo. Para o nosso caso de uso, podemos especificar o URL base/rota de login como nosso endpoint de logout, o que significa que o usuário é redirecionado para a página de aterrissagem ou a página de login, dependendo do endpoint que especificarmos. Se você não especificar um ponto de extremidade, o usuário será redirecionado para o widget de login do Okta
O URI básico é opcional. Isso é útil se você planeja hospedar o widget Okta Sign-in, mas fora do escopo deste tutorial.
Integração com React
Agora que temos nossa integração de aplicativo com Okta pronto, vamos integrá-lo com nosso aplicativo React.
Ao lidar com essa integração, preste muita atenção ao ID do cliente e ao domínio Okta, que podem ser encontrados em Aplicativo .
A primeira etapa é instalar o Okta SDK e o Okta Auth JavaScript SDK:
# yarn yarn add @ okta/okta-auth-js @ okta/okta-react # npm npm install–save @ okta/okta-auth-js @ okta/okta-react
Vamos criar variáveis ambientais (na forma de um arquivo.env) para nossos dados de configuração Okta.
OKTA_DOMAIN=
Agora podemos configurar nosso aplicativo para usar o Okta.
import React de”reagir”; import {BrowserRouter as Router, Route, useHistory} de”react-router-dom”; importar {Segurança, SecureRoute} de”@ okta/okta-react”; importar {OktaAuth, toRelativeUrl} de”@ okta/okta-auth-js”; import {LandingPage} de”./LandingPage”; importar {Dashboard} de”./Dashboard”; importar {Cabeçalho} de”./Header”; const CLIENT_ID=process.env.CLIENT_ID; const CALLBACK_PATH=process.env.CALLBACK_PATH; const ISSUER=process.env.ISSUER; const HOST=process.env.HOST; const REDIRECT_URI=`http://$ {HOST} $ {CALLBACK_PATH}`; const SCOPES=process.env.SCOPES; if (! SCOPES ||! CLIENT_ID ||! CALLBACK_PATH ||! ISSUER ||! HOST) {throw new Error (“Todas as variáveis ambientais devem ser definidas”); } const config={emissor: ISSUER, clientId: CLIENT_ID, redirectUri: REDIRECT_URI, escopos: SCOPES.split (/\ s +/),}; const oktaAuth=novo OktaAuth (configuração); const App=()=> {const history=useHistory (); const restoreOriginalUri=async (_oktaAuth: any, originalUri: any)=> {history.replace (toRelativeUrl (originalUri ||”/”, window.location.origin)); }; return (
Uma nova instância oktaAuth é criada com o objeto config. Isso é passado para o componente de segurança, que envolve todas as rotas de nosso aplicativo e fornece os objetos oktaAuth e authState para todos os seus filhos (os componentes nas rotas).
O objeto oktaAuth pode ser usado para alterar ou ler informações sobre o estado de autenticação.
O objeto authState contém:
isAuthenticated, um booleano que indica se o usuário está autenticado. O valor é verdadeiro se idToken e um accessToken estiverem presentes no tokenManager accessToken, um token de acesso JWT que é atribuído ao usuário autenticado atual idToken, um token de ID JWT atribuído ao erro do usuário autenticado atual, que é retornado se a autenticação o processo falha
Observe também que não precisamos lidar com um SecureRoute nós mesmos; O Okta fornece uma rota pronta para isso, que protege o caminho especificado.
Vamos implementar um botão de login para acionar o widget de login. É comum ter isso no componente de cabeçalho, então vamos lidar com isso lá.
Temos um gancho useOktaAuth, que nos dá acesso aos objetos oktaAuth e authState.
import React de”reagir”; importar {useOktaAuth} de”@ okta/okta-react”; função Header () {const {authState, oktaAuth}=useOktaAuth (); const loginWithRedirect=()=> oktaAuth.signInWithRedirect ({originalUri:”/painel”}); const logOut=()=> oktaAuth.signOut (); const buttonText=authState.isAuthenticated?”Logout”:”Login”; const btnLogic=authState.isAuthenticated? logOut: loginWithRedirect; return (<>
); } exportar {Cabeçalho};
Estamos usando o authState para determinar se queremos entrar ou sair do nosso aplicativo.
A função loginWithRedirect lida com o gatilho de login com um redirecionamento de volta para a rota do painel em caso de login bem-sucedido, conforme mostrado abaixo:
Após o login, o usuário é redirecionado para a rota do painel imediatamente.
Para que a função de logout funcione no localhost, precisamos adicionar localhost à lista de nossas rotas confiáveis. Isso permitirá a origem cruzada em nosso aplicativo.
Agora, se clicarmos no botão de logout no cabeçalho, ele desconectará nosso usuário com sucesso e o redirecionará para a página de destino.
Conseguimos! Implementamos com sucesso a autenticação do Okta em um aplicativo React.
Formulário de login personalizado
A interface de login do Okta é boa e fácil de começar, mas digamos que queremos implementar um formulário de login personalizado com um design exclusivo e também manter nossos usuários na página sem redirecionar para o Okta.
Podemos implementar isso com o oktaAuth fornecido quando chamamos o gancho useOktaAuth.
Vamos implementar um formulário de login personalizado:
import React from”react”; importar {useOktaAuth} de”@ okta/okta-react/bundles/types”; função SignIn () {const {oktaAuth}=useOktaAuth (); const [sessionToken, setSessionToken]=React.useState
); } export {SignIn};
Temos nosso próprio formulário e estamos usando a opção signInWithCredentials em oktaAuth para lidar com o envio de um formulário personalizado. O sessionToken, um token de uso único, é o valor recebido após a autenticação bem-sucedida. Os detalhes ainda estão disponíveis para nós por meio do ID ou tokens de acesso fornecidos no objeto authState quando o gancho useOktaAuth é chamado.
Após o login bem-sucedido, podemos usar a função signInWithRedirect para enviar o usuário ao URI original (principalmente a rota protegida do painel) e também inclui o sessionToken.
Vamos executar nosso aplicativo e conectar o botão de login para redirecionar para este endpoint do formulário de login e também atualizar nossas rotas:
import React from”reagir”; importar {useOktaAuth} de”@ okta/okta-react”; import {Link} de”react-router-dom”; função Header () {const {authState, oktaAuth}=useOktaAuth (); if (! authState) retorna nulo; const logOutRedirect=async ()=> await oktaAuth.signOut (); function btnToRender () {return authState.isAuthenticated? (): (); } return (<>
{btnToRender ()} ); } exportar {Cabeçalho};
As rotas são atualizadas conforme mostrado abaixo:
Agora, quando clicamos em nosso botão de login, somos redirecionados para a página de login.
Parabéns! Você implementou com sucesso uma tela de login personalizada em seu aplicativo React com Okta.
Conclusão
Os dados do usuário são informações muito delicadas que, se comprometidas, podem levar a sérios problemas de privacidade. Neste tutorial, mostramos como implementar uma maneira muito mais segura de lidar com a autenticação em um aplicativo React com Okta.
Para desenvolvedores de front-end que não criam serviços de back-end-e considerando o surgimento de estruturas como JAMStack e sem servidor que permitem construir aplicativos sem um servidor API real-Okta oferece uma ótima maneira de implementar autenticação em seus aplicativos React sem complexidade indevida.
