Bonjour!
Besoin d'aide? Nous sommes ici !
Besoin d'aide? Nous sommes ici !
Résultats de la recherche:
×La solution JavaScript OAuth Single Sign-On (SSO) de miniOrange permet une authentification sécurisée et transparente pour les applications créées à l'aide de frameworks et de bibliothèques JavaScript populaires tels que React, Vue.js, Next.js et AngularEn utilisant les jetons Web JSON (JWT), les utilisateurs peuvent accéder facilement à plusieurs applications avec un seul ensemble d'informations de connexion, améliorant ainsi considérablement la sécurité et l'expérience utilisateur.
Intégrez facilement les protocoles OAuth 2.0 et OpenID Connect à vos applications JavaScript existantes et connectez-les sans effort à des fournisseurs d'identité tels que Microsoft Entra ID, Okta, AWS Cognito et autres. Offrez également à vos utilisateurs des options de connexion via les réseaux sociaux comme Google, Facebook, Twitter et LinkedIn. Simplifiez vos processus de connexion, renforcez la sécurité et offrez une expérience utilisateur fluide et sans friction sur toutes vos applications JavaScript grâce à miniOrange. authentification unique.
Avec miniOrange JavaScript OAuth SSO, vous obtenez :
miniOrange fournit authentification de l'utilisateur provenant de diverses sources externes, qui peuvent être Partages de fichiers (comme ADFS, Microsoft Active Directory, OpenLDAP, AWS, etc.), Fournisseurs d'identité (comme Microsoft Entra ID, Okta, AWS) et beaucoup plus. Vous pouvez configurer votre répertoire/magasin d'utilisateurs existant ou ajouter des utilisateurs dans miniOrange.
Assurez-vous que la marque de votre organisation est déjà définie sous Personnalisation >> Connexion et inscription dans le menu de gauche du tableau de bord.
npm i mo-oauth-sdk
| Identité du client | Votre identifiant client d'application que nous avons copié précédemment à partir de ici |
| Client_Secret | Votre secret client d'application que nous avons copié précédemment à partir de ici |
| BASE_URL | Votre URI de base devrait ressembler à ceci : https://<YOUR_DOMAIN>.xecurify.com/moasIl s'agit de votre nom de marque suivi de xecurify.com/moas. |
| REDIRECT_URI | Il s'agit de la même URI de redirection que celle ajoutée lors de la configuration de l'application OAuth dans miniOrange. Elle devrait ressembler à ceci : https:// /sso/rappel |
| DÉCONNEXION_REDIRECT_URI | Il s'agit de l'URI de déconnexion que nous avons ajoutée lors de la configuration de l'application OAuth dans miniOrange. Elle devrait ressembler à ceci : https:// /se connecter |
| URI_COURTIER | Si vous utilisez un IDP externe autre que miniOrange, accédez à Applications > Points de terminaison OAuth > Point de terminaison d'autorisation > Copier l'URL du deuxième courtier |
À noter: Stockez les informations d’identification de votre application en toute sécurité dans des variables d’environnement ou un fichier de propriétés et utilisez-les ici.
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)
}
Une fois l'utilisateur authentifié avec succès, le serveur d'autorisation le redirigera vers la route /sso/callback de votre application avec les paramètres d'autorisation.
Pour gérer cela :
Vous devez définir la route /sso/callback dans votre application et créer un composant pour la gérer.
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)
}
Débit attendu :
Cela termine le processus de connexion OAuth, permettant à l'utilisateur d'accéder à l'application en toute sécurité.
