Implementación de la autenticación Okta en React

1. Autenticación en aplicaciones React
2. ¿Cómo funciona Okta?
3. ¿Qué es Okta?
4. ¿Por qué utilizar Okta?
5. Cree una aplicación con Okta
6. Configurar Okta
7. Creando una aplicación de reacción
8. Configurar Okta para la aplicación React
9. Configurar Okta en la aplicación React
10. Creación de componentes de aplicaciones
11. Creación de un componente de tarjeta de habitación
12. Crear una tabla de datos
13. Crear un enlace de autenticación de usuario
14. Creando la página de inicio
15. Página de perfiles de construcción
16. Completando nuestra solicitud

Okta es un administrador de identidad, con funciones como inicio de sesión único y autenticación multifactor. Okta se puede utilizar para proteger las identidades de los clientes y el personal. En este tutorial, aprenderemos cómo usar Okta para la autenticación en una aplicación React. Comprenderemos los conceptos centrales de Okta, los casos de uso y por qué debería usarlo en su próxima aplicación React.

Cuando creamos una aplicación, un factor esencial es la autenticación. Para muchos desarrolladores, crear una arquitectura de autenticación es sencillo. Aún así, los equipos deben considerar la seguridad y la facilidad de integración con plataformas de terceros como Google y Facebook. Muy pronto, construir su propio sistema de autenticación se vuelve complejo.

Este tutorial será útil para los lectores interesados ​​en aprender cómo autenticar usuarios con Okta o una alternativa en sus aplicaciones React. Este artículo requiere una comprensión básica de React y JavaScript.

Autenticación en aplicaciones React

La mayoría de las aplicaciones React son una combinación de páginas que están disponibles para todos y páginas que requieren algún tipo de autenticación. Los desarrolladores de React deben validar los detalles específicos del usuario para determinar si un usuario está autenticado y luego asignarle un rol. Las funciones van desde un simple acceso de cliente hasta un acceso de administrador más sofisticado. Los usuarios generalmente deben hacer lo siguiente:

1. Registrarse
   Esto se puede hacer con una dirección de correo electrónico, un número de teléfono y una contraseña, y guardará la información del usuario para la próxima vez que quiera acceder a esas páginas privadas.
2. Iniciar sesión
   Los usuarios autenticados deben poder iniciar sesión en sus propias páginas privadas.

La autenticación en una aplicación React se puede realizar de diversas formas, incluidos métodos de autenticación nativos (por ejemplo, herramientas de autenticación basadas en tokens como JSON Web Tokens (JWT)), bibliotecas como Stormpath y administradores de autenticación como Auth0, Okta, y OneLogin.

¿Cómo funciona Okta?

Como muchos administradores de autenticación, Okta permite a los desarrolladores controlar el acceso a una aplicación React utilizando la especificación OAuth 2.0 . Okta se puede utilizar como servidor de autorización para almacenar toda la información del usuario y emitir tokens de usuario para autenticación y autorización.

Con Okta, Okta almacena de forma segura todos los datos del usuario y la información de autenticación en la nube y se pueden administrar desde el panel de administración de Okta.

Para recuperar datos de usuario de Okta, deberá acceder a ellos utilizando el getUsermétodo de Okta en OktaAuthService. Más información está disponible en la documentación .

¿Qué es Okta?

Okta es una plataforma en la nube de identidad como servicio de nivel empresarial que se utiliza para la autorización de personas y organizaciones. A diferencia de otras plataformas de identidad, Okta funciona perfectamente con aplicaciones locales y aplicaciones en la nube.

Con Okta, los gerentes de proyectos y de TI pueden administrar el acceso de los empleados a todos los recursos y aplicaciones de la organización. Okta se ejecuta eficazmente en la nube en una plataforma segura y se integra con directorios, aplicaciones y sistemas de gestión de identidades locales.

El núcleo de Okta incluye los siguientes métodos y características:

• Okta Identity Engine
  Esta es la característica principal de Okta. Permite a los administradores personalizar sus componentes en la nube de Okta para resolver una amplia gama de casos de uso de autorización. Los administradores pueden utilizar más funciones de autorización predeterminadas definidas por Okta y pueden crear soluciones personalizadas para sus necesidades de identidad.
• Inicio de sesión único (SSO)
  Con Okta, los administradores tienen una función de accesibilidad de inicio de sesión único incorporada para aplicaciones móviles y en la nube. Una vez que haya iniciado sesión con su cuenta Okta, podrá acceder a su aplicación en cualquier otro dispositivo sin necesidad de volver a ingresar sus credenciales. También puede integrar Okta con sus aplicaciones locales y basadas en la nube.
• Okta Provisioning
  Para automatizar los procesos de administración y cuentas de los usuarios, Okta proporciona enlaces avanzados del ciclo de vida. Los gerentes pueden usar la red de integración integrada de Okta o una conexión API personalizada para brindar soporte a los usuarios entre Okta y la nube. Okta también proporciona una API web para administrar cuentas de usuario.
• Okta Mobility Management
  Esta función mejora la gestión y las identidades de los usuarios. Desde la administración móvil de Okta, los gerentes de proyectos y productos pueden administrar las políticas de acceso desde una consola central basada en la nube. Esto proporciona una alta protección a datos, personas y aplicaciones desde directorios hasta cualquier dispositivo móvil. Para evitar que usuarios no autorizados accedan a algunos puntos finales, Okta permite a los administradores crear un acceso de usuario contextual.

¿Por qué utilizar Okta?

El principal objetivo de Okta es mejorar la gestión de identidades y autorizaciones a nivel empresarial para equipos y organizaciones de TI y facilitar la gestión de permisos para los usuarios.

Okta también proporciona widgets de inicio de sesión y enlaces avanzados de gestión del ciclo de vida para autenticar a los usuarios. Las personalizaciones permitirán a una organización ampliar sus necesidades de gestión de identidades. Hay varios administradores de identidad disponibles para aplicaciones React y React Native, incluidos Azure AD, OneLogin y Auth0. La siguiente tabla muestra por qué Okta a menudo se considera una opción más inteligente para equipos y organizaciones.

Cree una aplicación con Okta

Ahora que conocemos las características principales de Okta, creemos un sistema de gestión de alquileres. Esta aplicación permitirá al propietario ver información sobre cada inquilino, el número de la casa y una imagen de la habitación. Con Okta, un propietario y un inquilino podrán iniciar sesión y ver esta información.

Sin más, ¡comencemos!

Configurar Okta

El primer requisito es crear una cuenta en Okta . Esto nos permitirá crear una aplicación e incorporar usuarios a nuestro panel de administración de Okta . Aquí, asignaremos un método de inicio de sesión utilizando "Inicio de sesión de Okta" y también agregaremos un tipo de aplicación en nuestro panel de Okta. Puedes ver esto en la imagen de abajo.

Después de hacer clic en la pestaña "Aplicaciones", navegue hasta el botón "Crear integración de aplicaciones".

Aquí, seleccionamos el método de inicio de sesión "OpenID Connect". Esto nos proporciona un widget de inicio de sesión de Okta (esto es opcional; también puede crear un inicio de sesión personalizado). A continuación, seleccionamos nuestro tipo de aplicación, que es una aplicación de una sola página. Haga clic en el botón "Siguiente" después de seleccionar estas credenciales.

A continuación, especificaremos un URI de inicio de sesión y un URI de cierre de sesión. Configuraremos nuestros URI de redireccionamiento localhost:3000para este tutorial, como se ve a continuación:

Como se muestra en la imagen de arriba, agregamos un URI de redireccionamiento de inicio de sesión para redirigir a los usuarios una vez que hayan iniciado sesión en nuestra aplicación y un URI de cierre de sesión para redirigir a los usuarios una vez que hayan cerrado sesión.

En nuestro panel de Okta, podemos configurar el tipo de autenticación que queremos para los usuarios y agregar rutas de inicio y cierre de sesión. ¡Ahora estamos listos para crear nuestra aplicación React con Okta!

Creando una aplicación de reacción

Comencemos con la creación de una aplicación React usando Create React App . Ejecute el siguiente comando para crear un nuevo proyecto:

npx create-react-app {project name}

Alternativamente, puedes usar Yarn:

yarn create-react-app {project name}

Luego, cdingrese al directorio del proyecto e inicie su servidor de desarrollo usando el siguiente comando:

cd {project name} yarn run dev

Configurar Okta para la aplicación React

Ahora, instalaremos las dependencias @okta/okta-react, @okta/okta-signin-widgety @okta/okta-auth-jsen nuestra aplicación.

Utilice esto para npm:

npm install @okta/okta-react @okta/okta-signin-widget @okta/okta-auth-js

Y usa esto para Yarn:

yarn add @okta/okta-react @okta/okta-signin-widget @okta/okta-auth-js

A continuación, instalemos el paquete dotenv, que usaremos para almacenar nuestras variables de entorno Okta. También agregamos componentes con estilo, que usaremos para diseñar nuestra aplicación.

Usando npm:

npm install dotenv styled-components

Usando hilo:

yarn add dotenv styled-components

Cree un nuevo archivo, .enven el directorio raíz de nuestro proyecto, y agregue las siguientes credenciales, proporcionadas por Okta:

REACT_APP_OKTA_BASE_URL="Your Okta base URL goes here"REACT_APP_OKTA_CLIENT_ID="Your unique ID goes here"

Incluye BASE_URLsu correo electrónico de inicio de sesión alojado por Okta. Es un identificador público para flujos OAuth proporcionado por Okta. Puede CLIENT_IDencontrarlo en su panel de Okta debajo de las credenciales del cliente. A continuación, completemos nuestra autenticación Okta configurando un usuario para nuestra aplicación.

Configurar Okta en la aplicación React

Para usar Okta para nuestra aplicación React, primero necesitaremos inicializar un usuario principal en nuestra aplicación. Cree un nuevo archivo, config.jsen el directorio raíz de nuestra aplicación de proyecto, y en él agregue el siguiente bloque de código:

export const oktaAuthConfig = { issuer: `https://${process.env.REACT_APP_BASE_URL}/oauth2/default`, clientId: process.env.REACT_APP_CLIENT_ID, redirectUri: `${window.location.origin}/login/callback`, scopes: ["openid", "profile", "email"], pkce: true,};

En este bloque de código, hemos creado un objeto llamado oktaAuthConfig. En eso, creamos un issuer, nuestro BASE_URLy a clientIDde Okta. Es redirectUrila devolución de llamada que configuramos en nuestro panel de Okta. Puede leer más sobre la configuración de Okta React en la documentación. zsh themes - all about z shell and oh-my-zsh themes

Creación de componentes de aplicaciones

Cree un Navbar.jsarchivo en el src/components/Navbardirectorio. Crearemos un Navbarcomponente funcional con dos enlaces asistidos por Okta para iniciar sesión y cerrar sesión. Hagámoslo a continuación:

import { Link } from "react-router-dom";import styled from "styled-components";import { useOktaAuth } from "@okta/okta-react"; const Nav = () = { const { oktaAuth, authState } = useOktaAuth(); const loggingIn = async () = oktaAuth.signInWithRedirect({ originalUri: "/" }); const loggingOut = async () = oktaAuth.signOut();

En el código anterior, importamos useOktaAuthde Okta. Usando el useOktaAuthgancho, obtenemos acceso a nuestro estado y oktaAuthobjeto Okta. Para iniciar sesión, creamos una función, loginque llamará oktaAuthpara iniciar sesión a un usuario, y otra función, logoutpara cerrar sesión.

A continuación, creamos un botón. En él, brindamos la funcionalidad de inicio de sesión al usuario si aún no está autenticado, y brindamos la funcionalidad de cierre de sesión si el usuario está autenticado.

Para completar nuestro componente, agregaremos estilos y un menú de barra de navegación que contiene el nombre del patrimonio del propietario y un enlace a una página de perfil para los usuarios. Hagámoslo a continuación:

 return ( Section Link to="/" h2Regents Housing/h2 /Link ul li Link to="/profile"Profile/Link /li li { authState?.isAuthenticated ? ( button onClick={logout}Logout/button ) : ( button onClick={login}Login/button ) } /li /ul /Section};

Agreguemos estilos a nuestra aplicación, exportemos el componente y veamos el resultado a continuación:

 const Section = styled.nav` width: 90%; margin: 1rem auto; display: flex; align-items: center; justify-content: space-between; h2 { font-style: oblique; } a { text-decoration: none; } ul { display: flex; justify-content: space-between; align-items: center; li { list-style-type: none; :hover { text-decoration: underline; } :nth-last-child(1) { margin-left: 1rem; } a { color: #333; font-weight: 500; font-size: 1rem; text-decoration: none; } button { font-size: 1rem; color: #333; font-weight: 500; cursor: pointer; outline: none; border: none; background: transparent; } } } `;export default Navbar;

Nuestro Navcomponente debería verse como la imagen a continuación:

Creación de un componente de tarjeta de habitación

En esta sección, construiremos un Cardcomponente para renderizar cada habitación de la finca. Crearemos un componente simple para representar el nombre del ocupante, el número de habitación y la fecha de vencimiento del alquiler.

Hagamos esto creando primero una carpeta con el nombre RoomCarden la componentscarpeta. En él, agregue un nuevo archivo llamado RoomCard.jsy en él agregue el siguiente bloque de código:

import styled from "styled-components";const Card = ({ roomNo, occupantName, rentDueDate, coverImg }) = { return ( Wrapper coverImg={coverImg} div className="bg" / div className="body" h4Room No: {roomNo}/h4 footer pOccupant: {occupantName}/p pRent Due Date: {rentDueDate}/p /footer /div /Wrapper );}; const Wrapper = styled.div` border-radius: 7px; box-shadow: -2px 7px 8px 3px rgba(204, 204, 204, 0.63); width: 15rem; .bg { background: url(${(props) = props.coverImg}) no-repeat center center/cover; height: 10rem; } h4 { text-align: center; } .body { flex-direction: column; align-items: center; padding: 0.5rem 0 1rem; display: flex; footer { margin-top: 0.7rem; p { font-size: 0.9rem; } } } `;export default Card;

Aquí, hemos creado un componente, CardWrapperque contiene nuestro props. Este componente será el esqueleto para representar los detalles de nuestros ocupantes. También creamos estilos con componentes con estilo.

A continuación, importamos styled-componentspara darle estilo a este componente. Creamos un componente de formulario que toma roomNo, occupantName, rentDueDatey coverImgcomo props.

Crear una tabla de datos

Ahora, crearemos un objeto que contenga toda la información de los ocupantes en nuestra aplicación patrimonial. En el directorio raíz de nuestra aplicación, creamos un nuevo archivo, data.jsy en él agreguemos algunos ocupantes y sus detalles como un objeto:

export const Data = [ { id: 1, roomNo: 1, coverImg: " https://images.unsplash.com/photo-1653463174260-8e974b584704?ixlib=rb-1.2.1ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8auto=formatfit=cropw=1587q=80", occupantName: "Fortune", rentDueDate: "01-09-2021", }, { id: 2, roomNo: 2, coverImg: "https://images.unsplash.com/photo-1653191252464-c3f61798ce9a?ixlib=rb-1.2.1ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDEwfFJfRnluLUd3dGx3fHxlbnwwfHx8fA%3D%3Dauto=formatfit=cropw=500q=60", occupantName: "Yemi", rentDueDate: "04-01-2022", }, { id: 3, roomNo: 3, coverImg: "https://images.unsplash.com/photo-1538430989507-797d5e4ba836?ixlib=rb-1.2.1ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDEzfFJfRnluLUd3dGx3fHxlbnwwfHx8fA%3D%3Dauto=formatfit=cropw=500q=60", occupantName: "Precious", rentDueDate: "31-10-2021", }, { id: 4, roomNo: 4, coverImg: "https://images.unsplash.com/photo-1600947871775-082dd97e2d96?ixlib=rb-1.2.1ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDExfFJfRnluLUd3dGx3fHxlbnwwfHx8fA%3D%3Dauto=formatfit=cropw=500q=60", occupantName: "Isaac", rentDueDate: "11-09-2021", }, { id: 5, roomNo: 5, coverImg: "https://images.unsplash.com/photo-1651342490124-c2042b78d41c?ixlib=rb-1.2.1ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDIzfFJfRnluLUd3dGx3fHxlbnwwfHx8fA%3D%3Dauto=formatfit=cropw=500q=60", occupantName: "Victor", rentDueDate: "11-09-2021", }, { id: 6, roomNo: 6, coverImg: "https://images.unsplash.com/photo-1653162100655-88a23594835f?ixlib=rb-1.2.1ixid=MnwxMjA3fDB8MHx0b3BpYy1mZWVkfDI2fFJfRnluLUd3dGx3fHxlbnwwfHx8fA%3D%3Dauto=formatfit=cropw=500q=60", occupantName: "Melvin", rentDueDate: "01-08-2021", },];

Aquí, hemos agregado una lista de ocupantes y sus detalles.

Crear un enlace de autenticación de usuario

Creemos un enlace para obtener los detalles del usuario y autenticarlos. Para ello, en el directorio raíz de nuestra aplicación, creamos una nueva carpeta, hooks, y en ella creamos un nuevo archivo, getUser.js. Agregue el código a continuación:

import { useEffect, useState } from "react";import { useOktaAuth } from "@okta/okta-react";const useAuthUser = () = { const { oktaAuth, authState } = useOktaAuth(); const [userInfo, setUserInfo] = useState(null); useEffect(() = { const getUser = async () = { try { const res = await oktaAuth.getUser(); setUserInfo(res); } catch (error) { console.log(error); } }; authState?.isAuthenticated getUser(); }, [authState, oktaAuth]); return userInfo;};export default useAuthUser;

Para completar nuestra aplicación, crearemos nuestras páginas Homey Profileutilizando los componentes que creamos en esta sección. Hagámoslo ahora.

Creando la página de inicio

Creemos la página de inicio usando nuestro RoomCardcomponente. Esta página obtendrá la información del usuario cuando inicie sesión y mostrará un mensaje de bienvenida. También contendrá todas las habitaciones y detalles de los ocupantes.

Cree una nueva carpeta, pagesen el directorio raíz de nuestra aplicación. En él, cree un nuevo directorio, homeque contendrá el archivo index.js. Le agregaremos código en breve.

Para manejar la autenticación, importamos useOktaAuthdesde okta-react. Para diseñar nuestra página, importamos componentes con estilo. Creemos un data.jsarchivo que contenga toda la información que se mostrará en esta página. Crearemos una función para obtener los detalles del usuario Oktay luego la configuraremos en el estado de nuestra aplicación. Luego, crearemos una pantalla de bienvenida y mostraremos una lista de todos los ocupantes de nuestra propiedad. Vamos a hacer eso:

import { useOktaAuth } from "@okta/okta-react";import useAuthUser from "../hook/getUser";import styled from "styled-components";import { Data } from "../data";import Card from "../components/Card/Card";const Home = () = { const { authState } = useOktaAuth(); const userInfo = useAuthUser();return ( Container {authState?.isAuthenticated ? ( h2Welcome back, {userInfo?.name}/h2 article {Data.map( ({ id, coverImg, roomNo, occupantName, rentDueDate }) = ( div key={id} className="card" Card coverImg={coverImg} roomNo={roomNo} occupantName={occupantName} rentDueDate={rentDueDate} / /div ) )} /article / ) : ( p style={{ textAlign: "center", marginTop: "6rem", fontSize: '2rem' }} Please login to see data /p )} /Container );};

En el código anterior, verificamos si el usuario está autenticado. Si es así, mostramos un mensaje de bienvenida con el nombre del usuario y un listado de tarjetas con toda la información de los ocupantes de la finca. Para finalizar nuestra aplicación, agreguemos algunos estilos:

const Container = styled.section` max-width: 90%; margin: 2rem auto; h2 { font-weight: 500; margin-bottom: 2rem; font-size: 1.3rem; } article { width: 90%; margin: auto; display: flex; flex-wrap: wrap; .card { margin: 1rem; } } `;export default Home;

Aquí, hemos agregado estilos a nuestra página de inicio. Si se hace correctamente, nuestra aplicación debería verse así:

En la siguiente sección, crearemos la página de perfiles de nuestro usuario principal.

Página de perfiles de construcción

En esta sección, crearemos una página de perfiles para nuestra aplicación. Esta página mostrará los detalles de los usuarios, incluido el nombre de usuario, la dirección de correo electrónico, el nombre y un correo electrónico verificado de Okta. En el directorio de páginas de nuestra aplicación, cree una nueva carpeta, Profiley en ella cree un nuevo archivo, index.jsagregando el siguiente bloque de código:

import useAuthUser from "../hook/getUser";import styled from "styled-components";const Profile = () = { const userInfo = useAuthUser(); return ( Container h2My Profile Details/h2 section ul liUsername: {userInfo?.preferred_username}/li liEmail: {userInfo?.email}/li liFull Name: {userInfo?.name}/li liEmail Verified: {userInfo?.email_verified ? "Yes" : "No"} /li liZone: {userInfo?.zoneinfo}/li /ul /section /Container );};

De manera similar a nuestra página de inicio, aquí obtenemos los detalles del usuario de Okta una vez que inician sesión en la aplicación. Luego creamos un Wrappercomponente que muestra los detalles del usuario que inició sesión.

Para completar nuestra aplicación, agreguemos estilos a nuestra página.

const Container = styled.section` max-width: 90%; margin: 2rem auto; h2 { font-size: 1.3rem; font-weight: 500; margin-bottom: 1rem; } ul { width: 50%; list-style: none; display: flex; flex-direction: column; background: #f2f3f5; padding: 1rem 2rem; li { margin: 0.7rem 0; font-size: 1rem; } } `;export default Profile;

Agregamos el wrappercomponente en el bloque de código anterior y exportamos nuestra página como una página.

Nuestra aplicación aún no está completa porque no hemos configurado nuestra autenticación Okta para permitir que un usuario inicie sesión. Por lo tanto, configuraremos una tabla de datos de los ocupantes de la propiedad en la siguiente sección.

Completando nuestra solicitud

Para completar nuestra aplicación, agreguemos rutas a nuestra aplicación. Las rutas permiten a Okta saber a qué usuarios otorgar acceso específico. En nuestro caso, proporcionaremos todo el acceso al usuario principal, que tiene la dirección de correo electrónico utilizada para registrar nuestra aplicación Okta.

Creemos un archivo, Routesen el directorio raíz de nuestra aplicación, y agreguemos el siguiente fragmento de código:

import { Route, Switch, useHistory } from "react-router-dom";import { Security, SecureRoute, LoginCallback } from "@okta/okta-react";import { OktaAuth, toRelativeUrl } from "@okta/okta-auth-js";import Home from "./pages/home";import Profile from "./pages/profile";import { oktaAuthConfig } from "./config";import Nav from "./components/Navbar/Nav";const oktaAuth = new OktaAuth(oktaAuthConfig);const Routes = () = { const history = useHistory(); const restoreOriginalUri = async (_oktaAuth, originalUri) = { history.replace(toRelativeUrl(originalUri || "/", window.location.origin)); }; return ( Security oktaAuth={oktaAuth} restoreOriginalUri={restoreOriginalUri} Navbar / Switch Route path="/" exact={true} component={Home} / SecureRoute path="/profile" component={Profile} / Route path="/login/callback" component={LoginCallback} / /Switch /Security );};export default Routes;

En el código anterior, creamos una función, Routesque redirige al usuario a nuestra aplicación una vez que ha iniciado sesión utilizando el widget de inicio de sesión de Okta. Inicializamos una nueva aplicación Okta usando Okta config. La URL de almacenamiento establece nu

Tal vez te puede interesar:

1. ¿Deberían abrirse los enlaces en ventanas nuevas?
2. 24 excelentes tutoriales de AJAX
3. 70 técnicas nuevas y útiles de AJAX y JavaScript
4. Más de 45 excelentes recursos y repositorios de fragmentos de código

Implementación de la autenticación Okta en React

Autenticación en aplicaciones React¿Cómo funciona Okta?¿Qué es Okta?¿Por qué utilizar Okta?Cree una aplicación con OktaConfigurar OktaCreando una aplic

programar

es

https://aprendeprogramando.es/static/images/programar-implementacion-de-la-autenticacion-okta-en-react-1152-0.jpg

2024-11-27