Hallo!
Brauchen Sie Hilfe? Wir sind hier!
Brauchen Sie Hilfe? Wir sind hier!
Search Results:
×Die JavaScript OAuth Single Sign-On (SSO)-Lösung von miniOrange ermöglicht eine sichere, nahtlose Authentifizierung für Anwendungen, die mit gängigen JavaScript-Frameworks und -Bibliotheken erstellt wurden, wie React, Vue.js, Next.js und AngularDurch die Verwendung von JSON Web Tokens (JWT) können Benutzer bequem mit nur einem einzigen Satz Anmeldeinformationen auf mehrere Anwendungen zugreifen, was die Sicherheit und das Benutzererlebnis erheblich verbessert.
Integrieren Sie OAuth 2.0 und OpenID Connect mühelos in Ihre bestehenden JavaScript-Anwendungen und verbinden Sie diese nahtlos mit Identitätsanbietern wie Microsoft Entra ID, Okta, AWS Cognito und anderen. Bieten Sie Ihren Nutzern zudem komfortable Anmeldeoptionen über soziale Netzwerke wie Google, Facebook, Twitter und LinkedIn. Vereinfachen Sie Ihre Anmeldeprozesse, erhöhen Sie die Sicherheit und sorgen Sie mit miniOrange für ein reibungsloses Benutzererlebnis in all Ihren JavaScript-basierten Anwendungen. Einmaliges Anmelden.
Mit miniOrange JavaScript OAuth SSO erhalten Sie:
miniOrange bietet Benutzerauthentifizierung aus verschiedenen externen Quellen, die Verzeichnisse (wie ADFS, Microsoft Active Directory, OpenLDAP, AWS usw.), Identitätsanbieter (wie Microsoft Entra ID, Okta, AWS) und viele mehr. Sie können Ihren bestehenden Verzeichnis-/Benutzerspeicher konfigurieren oder Benutzer in miniOrange hinzufügen.
Bitte stellen Sie sicher, dass Ihr Organisations-Branding bereits unter Anpassung >> Login- und Registrierungs-Branding im linken Menü des Dashboards.
npm i mo-oauth-sdk
| Client_ID | Ihre Anwendungs-Client-ID, die wir zuvor kopiert haben von werden auf dieser Seite erläutert |
| Client_Geheimnis | Ihr Anwendungs-Client-Geheimnis, das wir zuvor kopiert haben von werden auf dieser Seite erläutert |
| BASE_URL | Ihre Basis-URI sollte folgendermaßen aussehen: https://<YOUR_DOMAIN>.xecurify.com/moas. Es ist Ihr Markenname, gefolgt von xecurify.com/moas. |
| REDIRECT_URI | Dies ist dieselbe Weiterleitungs-URI, die wir bei der Konfiguration der OAuth-App in miniOrange hinzugefügt haben. Sie sollte folgendermaßen aussehen: https:// /sso/callback |
| LOGOUT_REDIRECT_URI | Dies ist dieselbe Abmelde-URL, die wir bei der Konfiguration der OAuth-App in miniOrange hinzugefügt haben. Sie sollte folgendermaßen aussehen: https:// /Login |
| BROKER_URI | Wenn Sie einen anderen externen IDP als miniOrange verwenden, gehen Sie zu Apps > OAuth-Endpunkte > Autorisierungsendpunkt > 2. Broker-URL kopieren |
Hinweis: Speichern Sie Ihre App-Anmeldeinformationen sicher in Umgebungsvariablen oder einer Eigenschaftendatei und verwenden Sie sie hier.
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)
}
Sobald sich der Benutzer erfolgreich authentifiziert hat, leitet der Autorisierungsserver ihn mit Autorisierungsparametern zur /sso/callback-Route Ihrer Anwendung weiter.
So gehen Sie damit um:
Sie müssen die Route /sso/callback in Ihrer Anwendung definieren und eine Komponente erstellen, die sie verarbeitet.
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)
}
Erwarteter Fluss:
Damit ist der OAuth-Anmeldevorgang abgeschlossen und der Benutzer kann sicher auf die Anwendung zugreifen.
