Inicio de sesión único (SSO) de OAuth para marcos de JavaScript

La solución de inicio de sesión único (SSO) OAuth de JavaScript de miniOrange permite una autenticación segura y sin inconvenientes para aplicaciones creadas con bibliotecas y marcos de JavaScript populares como React, Vue.js, Next.js y AngularAl utilizar tokens web JSON (JWT), los usuarios pueden acceder fácilmente a múltiples aplicaciones con un único conjunto de credenciales de inicio de sesión, lo que mejora significativamente la seguridad y la experiencia del usuario.

Integra fácilmente los protocolos OAuth 2.0 y OpenID Connect en tus aplicaciones JavaScript existentes, conectándolas sin esfuerzo con proveedores de identidad como Microsoft Entra ID, Okta, AWS Cognito y otros. Además, ofrece a los usuarios prácticas opciones de inicio de sesión social a través de proveedores como Google, Facebook, Twitter y LinkedIn. Simplifica tus procesos de inicio de sesión, mejora la seguridad y ofrece una experiencia fluida y sin complicaciones en todas tus aplicaciones basadas en JavaScript con miniOrange. SSO.

Con miniOrange JavaScript OAuth SSO, obtienes:

Experiencia de inicio de sesión de usuario perfecta.
Personalizaciones infinitas para sus formularios y páginas de inicio de sesión.
Incorporación simplificada de clientes o usuarios.

Conéctese con una fuente externa de usuarios

miniOrange proporciona autenticación de usuario de diversas fuentes externas, que pueden ser Directorio (como ADFS, Microsoft Active Directory, OpenLDAP, AWS, etc.), Proveedores de identidad (como Microsoft Entra ID, Okta, AWS) y muchos más. Puede configurar su directorio/almacén de usuarios existente o Agregar usuarios en miniOrange.

Requisitos previos

Asegúrese de que la marca de su organización ya esté configurada en Personalización >> Inicio de sesión y registro Branding en el menú izquierdo del tablero.

Configurar la aplicación OAuth en miniOrange

Regístrate en miniOrange sitio web e inicie sesión con sus credenciales para ver el panel a continuación.

Consola de administración de miniOrange para inicio de sesión único (SSO) de JavaScript OAuth

Navegue a la pestaña Aplicaciones sección en el menú del lado izquierdo.
Haga clic en el botón Agregar aplicación Botón ubicado en la esquina superior derecha de la página.

JavaScript OAuth Single Sign-On (SSO) Agregar aplicación

Busque "OAuth" y seleccione Conexión OAuth2/OpenID desde el icono miniOrange.

Inicio de sesión único (SSO) de OAuth en JavaScript Busque OAuth y seleccione OAuth2/OpenID Connect

Introduzca un nombre para su aplicación en el campo Nombre del cliente campo y proporcionar la Redireccionar URL (que será “your_domain/sso/callback”) y haga clic en GuardarTambién puedes proporcionar URI de cierre de sesión y especifique dónde deben redirigirse los usuarios después de cerrar la sesión (por ejemplo, https://your_domain/login)

Inicio de sesión único (SSO) de JavaScript OAuth Ingrese los detalles de su aplicación

Aparecerá un mensaje de notificación: «La aplicación se configuró correctamente». Esto confirma la creación exitosa de la aplicación OAuth en miniOrange.

Inicio de sesión único (SSO) de OAuth en JavaScript: recepción de un mensaje al configurar la aplicación

Localice el nombre de su aplicación en la lista de aplicaciones, haga clic en el menú de tres puntos y seleccione Editar.

JavaScript OAuth Single Sign-On (SSO) haga clic en tres puntos y seleccione editar

Ahora copia Identificación del cliente Secreto del cliente y guárdelo en un lugar seguro para su uso posterior.

Copiar el ID del cliente y el secreto del cliente en el inicio de sesión único (SSO) de OAuth en JavaScript

Configurar OAuth en aplicaciones de marco de JavaScript (React, Angular, Vue, Next.js, etc.)

1. Instalar el conector

En el directorio raíz de su proyecto (donde se encuentra el archivo package.json), ejecute el siguiente comando:
```
                    npm i mo-oauth-sdk
                
```

2. Configure OAuth en su aplicación

Para configurar OAuth, cree un configuración.js en la carpeta de componentes e importe la clase OAuthConfig para configurar su configuración de OAuth. Los siguientes detalles se proporcionaron al crear la aplicación OAuth en miniOrange.

ID de cliente	El ID de cliente de su aplicación que copiamos anteriormente aquí
Secreto del cliente	El secreto del cliente de su aplicación que copiamos anteriormente aquí
BASE_URL	Su URI base debería verse así: https://<YOUR_DOMAIN>.xecurify.com/moasEs el nombre de su marca seguido de es.xecurify.com/moas.
URI DE REDIRECCIÓN	Esta es la misma URL de redirección que añadimos al configurar la aplicación OAuth en miniOrange. Debería verse así: https:// /sso/devolución de llamada
URI DE REDIRECCIÓN DE CIERRE DE SESIÓN	Esta es la misma URL de cierre de sesión que añadimos al configurar la aplicación OAuth en miniOrange. Debería verse así: https:// /acceso
URI DEL CORREDOR	Si está utilizando un IDP externo distinto de miniOrange, vaya a Aplicaciones > Puntos finales de OAuth > Punto final de autorización > copiar la URL del segundo agente

Pasos para obtener la URL del broker

Navegue a Aplicaciones .

Inicio de sesión único (SSO) de OAuth de JavaScript Ir a Aplicaciones

Busque la aplicación que creó y haga clic en la opción de menú y seleccione Puntos finales de OAuth.

Inicio de sesión único (SSO) de OAuth en JavaScript Busque la aplicación y seleccione Puntos finales de OAuth

Copie el segundo URI de la sección Punto final de autorización en Puntos finales de OAuth, que es el URI de su agente.

Inicio de sesión único (SSO) de OAuth de JavaScript Copiar el punto final de autorización

Nota: Almacene las credenciales de su aplicación de forma segura en variables de entorno o en un archivo de propiedades y úselas aquí.

configuración.js

            
              import { OAuthConfig } from 'mo-oauth-sdk';
              const conf = new OAuthConfig();
              conf.setClientId(YOUR_CLIENT_ID);
              conf.setClientSecret(YOUR_CLIENT_SECRET);
              conf.setBaseUrl(YOUR_BASE_URL);
              conf.setRedirectUri(YOUR_REDIRECT_URI);
              conf.setLogoutRedirectUri(YOUR_LOGOUT_URI); //optional
              conf.setBrokerUri(YOUR_BROKER_URI); //optional
              export default config;

3. Iniciar el proceso de autorización

Cree un botón de inicio de sesión y utilice el InicioAutorización Método de la biblioteca mo-oauth-sdk para iniciar el proceso de autorización OAuth. Debe pasar el objeto de configuración a la función startAuthorization como se muestra a continuación:

                    
                      import {startAuthorization} from 'mo-oauth-sdk';
                      import conf from './Conf';  //Adjust path accordingly
                      .
                      .
                      .

                      const login = ()=>{
                        startAuthorization(conf)
                      }

Ahora, cuando los usuarios hagan clic en el botón de inicio de sesión, comenzará el flujo OAuth.

4. Manejo de devoluciones de llamadas

Una vez que el usuario se autentica exitosamente, el servidor de autorización lo redirigirá a la ruta /sso/callback de su aplicación con los parámetros de autorización.

Para solucionar esto:

Definir el /sso/devolución de llamada ruta en su aplicación.
Crear un componente de devolución de llamada y renderizarlo cuando se acceda a la ruta anterior.
invocar manejarUriDeRetornoDeLlamada dentro del componente de devolución de llamada para procesar la respuesta de autorización.
Extraer tokens de la respuesta y almacenarlos de forma segura (evitar almacenamiento local Debido a riesgos de seguridad, prefiero cookies solo HTTP o almacenamiento seguro).
Obtener atributos de usuario mediante el token de acceso, crea una sesión y redirige al usuario al panel de control.

5. Pasos para configurar la ruta de devolución de llamada en aplicaciones frontend basadas en JS

Debe definir la ruta /sso/callback en su aplicación y crear un componente para manejarla.

React
Angular
Vista

Instale React Router si aún no está instalado:

                            npm install react-router-dom

Crear componente de devolución de llamada:

                            
                            import React, { useEffect} from "react";
                            import { handleCallbackUri, TokenHandler} from 'mo-oauth-sdk';
                            import conf from './Conf'; //adjust the path accordingly


                            function Callback() {


                                useEffect(() => {
                                    const handleCallback = async () => {
                                    const { accessToken, refreshToken, error } = await handleCallbackUri(conf, window.location.href);


                                    if (error) {
                                    // Handle errors if any
                                    return;
                                    }
                                    //Store tokens securely in your preferred storage.
                                    if (accessToken) {
                                    // Process access token and retrieve user details
                                    const { user, error } = await TokenHandler.handleAccessToken(accessToken, conf);
                                    if (user) {
                                    // Store user details securely and navigate to dashboard
                                    } else {
                                    // Handle errors if any
                                    return;
                                    }
                                    }
                                };
                                handleCallback();
                                }, []);


                                return (
                                <div>
                                  <img src="https://i.gifer.com/ZKZx.gif" alt="Loading.." />
                                  </div>
                                );
                                }


                                export default Callback;

Define la ruta en tu App.js o App.tsx

                            
                            import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
                            import Callback from "./Callback"; //adjust path accordingly
                            import Home from "./Home"; 
                                function App() {
                                return (
                                <Router>
                                <Routes>
                                    {/* Existing routes..*/}
                                    <Route path="/" element={<Home />} />
                                    
                                    {/* Add new SSO callback handler here*/}
                                    <Route path="/sso/callback" element={<Callback />} />
                                    </Routes>
                                    </Router>
                                );
                                }


                                export default App;

Definir la ruta en aplicación.rutas.ts:

                            
                            import { Routes } from '@angular/router';
                            import { CallbackComponent } from './callback/callback.component';


                            export const routes: Routes = [
                            { path: 'sso/callback', component: CallbackComponent }
                            ];

Crear devolución de llamada.componente.ts:

                            
                            import { Component, OnInit } from '@angular/core';
                            import { handleCallbackUri, TokenHandler } from 'mo-oauth-sdk';
                            import conf from './Conf';  //adjust the path accordingly


                            @Component({
                            …
                            })


                            export class CallbackComponent  implements OnInit {


                            async ngOnInit(): Promise {
                            const { accessToken, refreshToken, error } = await handleCallbackUri(conf, window.location.href);


                            if (error) {
                            // Handle errors if any
                            return;
                            }


                            if (accessToken) {
                            // Store and Process access token to retrieve user details
                            const { user, error } = await TokenHandler.handleAccessToken(accessToken, this.myconfig);


                            if (user) {
                                // Store user details securely and navigate to dashboard
                            } else {
                                // Handle errors if any
                                return;
                            }
                            }
                            }

Instalación de Vue Router

                            npm install vue-router@4

Crear devolución de llamada.vue componente:

                            
                            import { onMounted } from 'vue';
                            import { handleCallbackUri, TokenHandler } from 'mo-oauth-sdk';
                            import conf from './Conf'; //adjust the path accordingly


                            onMounted(async () => {
                            const { accessToken, refreshToken, error } = await handleCallbackUri(conf, window.location.href);


                            if (error) {
                            // Handle errors if any
                            return;
                            }


                            //Store tokens securely in your preferred storage.
                                if (accessToken) {
                                // Process access token and retrieve user details
                                const { user, error } = await TokenHandler.handleAccessToken(accessToken, conf);
                                if (user) {
                                // Store user details securely and navigate to dashboard
                                } else {
                                // Handle errors if any
                                return;
                                }
                                }
                            }
                            });

Cree un archivo router.js o router.ts si aún no lo tiene y registre la ruta de devolución de llamada en él.

                            
                                import { createRouter, createWebHistory } from 'vue-router';
                                import Home from './components/Home.vue';
                                import Dashboard from './components/Dashboard.vue';


                                const routes = [
                                {
                                // Your existing routes
                                },
                                {
                                //add callback route
                                path: '/callback',
                                name: 'Callback',
                                component: Callback
                                }
                                ];
                                const router = createRouter({
                                history: createWebHistory(),
                                routes
                                });


                                export default router;

6. Cerrar sesión (Borrar sesión) Opcional

Para cerrar la sesión del usuario y borrar la sesión de miniOrange del navegador, llame al Salir función proporcionada por la biblioteca.

Consulte el fragmento de código a continuación:

                    
                    import { logout} from "mo-oauth-sdk";
                    import conf from './Conf'; //adjust the path accordingly
                    const logoutUser= async()=>{
                        logout(conf);
                    }

7. Comprobar sesión (opcional)

Comprobar sesión

Puede comprobar la validez del token de acceso mediante el método isSessionActive. Este método verifica si el token sigue siendo válido o ha caducado. Puede realizar esta comprobación cada vez que se carga la página o a intervalos regulares durante la actividad del usuario.

Puede realizar esta comprobación en cada carga de página o en intervalos regulares durante la actividad del usuario.

                            
                                import {isSessionActive} from "mo-oauth-sdk";
                                
                                const validateToken=async() => {
                                    let response = await isSessionActive(conf, accessToken)
                                    if(response)
                                        //session is active do nothing
                                        else{
                                    //logout user and redirect to session expiration page
                                    }
                                }

Si el token ha expirado, puede obtener un nuevo token de acceso usando el token de actualización o cerrar la sesión del usuario y redirigirlo a una página de sesión expirada, solicitándole que inicie sesión nuevamente.

Solicitando nuevo token de acceso:

                            
                            import {  TokenHandler} from "mo-oauth-sdk";



                            const getNewToken= async()=>{
                                const refreshToken =  //fetch your stored refresh token
                                const {error, access_token} = await TokenHandler.getNewAccessToken(refreshToken, conf);
                                
                                    if(!error){
                                        //update new access token
                                        return;
                                    }
                                    //handle errors if any
                                    console.log("Error in getting new access token..", error)
                                }

8. Pruebe la autenticación OAuth

Flujo esperado:

El usuario hace clic en el Iniciar sesión .
El InicioAutorización El método los redirecciona a la página de inicio de sesión del servidor de autorización.
Después de una autenticación exitosa, el servidor de autorización redirige al usuario nuevamente a la aplicación. Ruta /sso/callback.
El controlador de devolución de llamada procesa la respuesta, recupera tokens y registra al usuario.

Esto completa el proceso de inicio de sesión de OAuth, lo que permite al usuario acceder a la aplicación de forma segura.

Contenido