Ciao!
Ho bisogno di aiuto? Siamo proprio qui!
Ho bisogno di aiuto? Siamo proprio qui!
Risultati di Ricerca:
×La soluzione JavaScript OAuth Single Sign-On (SSO) di miniOrange consente un'autenticazione sicura e senza interruzioni per le applicazioni create utilizzando framework e librerie JavaScript popolari come React, Vue.js, Next.js e AngularUtilizzando i JSON Web Token (JWT), gli utenti possono accedere comodamente a più applicazioni con un unico set di credenziali di accesso, migliorando significativamente la sicurezza e l'esperienza utente.
Integra facilmente i protocolli OAuth 2.0 e OpenID Connect nelle tue applicazioni JavaScript esistenti, connettendole senza problemi a provider di identità come Microsoft Entra ID, Okta, AWS Cognito e altri. Inoltre, offri agli utenti comode opzioni di accesso social tramite provider come Google, Facebook, Twitter e LinkedIn. Semplifica i tuoi processi di accesso, aumenta la sicurezza e offri un'esperienza fluida e senza intoppi su tutte le tue app basate su JavaScript con miniOrange. SSO.
Con miniOrange JavaScript OAuth SSO, ottieni:
miniOrange fornisce l'autenticazione degli utenti da varie fonti esterne, che possono essere Directory (come ADFS, Microsoft Active Directory, OpenLDAP, AWS ecc.), Provider di identità (come Microsoft Entra ID, Okta, AWS) e molti di più. Puoi configurare la tua directory/archivio utente esistente o aggiungere utenti in miniOrange.
Assicurati che il marchio della tua organizzazione sia già impostato sotto Personalizzazione >> Accesso e registrazione Branding nel menu a sinistra della dashboard.
npm i mo-oauth-sdk
| ID_cliente | L'ID client dell'applicazione che abbiamo copiato in precedenza da Qui. |
| Segreto_cliente | Il segreto del client dell'applicazione che abbiamo copiato in precedenza da Qui. |
| BASE_URL | L'URI di base dovrebbe apparire così: https://<YOUR_DOMAIN>.xecurify.com/moasÈ il nome del tuo marchio seguito da xecurify.com/moas. |
| REDIRECT_URI | Questo è lo stesso URI di reindirizzamento che abbiamo aggiunto durante la configurazione dell'app OAuth in miniOrange. Dovrebbe apparire così: https:// /sso/richiamata |
| URI DI REDIRECT_LOGOUT | Questo è lo stesso URI di disconnessione che abbiamo aggiunto durante la configurazione dell'app OAuth in miniOrange. Dovrebbe apparire così: https:// /login |
| BROKER_URI | Se stai utilizzando un IDP esterno diverso da miniOrange, vai a App > Endpoint OAuth > Endpoint di autorizzazione > copia URL del 2° broker |
Nota: Memorizza le credenziali della tua app in modo sicuro nelle variabili di ambiente o in un file di proprietà e usale qui.
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;
import {startAuthorization} from 'mo-oauth-sdk';
import conf from './Conf'; //Adjust path accordingly
.
.
.
const login = ()=>{
startAuthorization(conf)
}
Una volta che l'utente si è autenticato correttamente, il server di autorizzazione lo reindirizzerà al percorso /sso/callback dell'applicazione con i parametri di autorizzazione.
Per gestire questa situazione:
È necessario definire il percorso /sso/callback nella propria applicazione e creare un componente per gestirlo.
npm install react-router-dom
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;
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;
import { Routes } from '@angular/router';
import { CallbackComponent } from './callback/callback.component';
export const routes: Routes = [
{ path: 'sso/callback', component: CallbackComponent }
];
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;
}
}
}
npm install vue-router@4
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;
}
}
}
});
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;
import { logout} from "mo-oauth-sdk";
import conf from './Conf'; //adjust the path accordingly
const logoutUser= async()=>{
logout(conf);
}
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
}
}
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)
}
Flusso previsto:
Questo completa il processo di accesso OAuth, consentendo all'utente di accedere all'applicazione in modo sicuro.
