Accesso Single Sign-On angolare
Accesso singolo (SSO) angolare JWT solution di miniOrange fornisce un accesso Single Sign-On sicuro all'applicazione Angular utilizzando un singolo set di credenziali di accesso. Ciò avviene tramite token JSON Web Token (JWT) e può essere facilmente integrato con Angular costruito in qualsiasi framework o linguaggio. Puoi abilitare l'accesso social per i tuoi utenti per ottenere un accesso sicuro alle applicazioni utilizzando uno qualsiasi dei loro provider social esistenti come Facebook, Twitter, Google o LinkedIn.
Con miniOrange Angular SSO, ottieni:
- Esperienza di accesso utente fluida.
- Infinite personalizzazioni per i tuoi moduli e le tue pagine di accesso.
- Semplificazione dell'inserimento di clienti o utenti.
Per Angular Single Sign-On (SSO), seguire la guida dettagliata riportata di seguito:
1. Configurare Angular in miniOrange:
- Accedi alla console di amministrazione miniOrange.
- Vai su Apps e cliccare su Aggiungi applicazione pulsante.
- In Scegli Applicazione, select J.W.T. dal menu a discesa del tipo di applicazione.
- Nel passaggio successivo, cerca Angular applicazione dall'elenco. Se la tua applicazione non viene trovata, cerca Applicazione JWT e puoi configurare la tua applicazione.
-
Nell'applicazione è possibile configurare i seguenti dettagli:
| Display Nome |
Inserire il Display Nome (ovvero il nome di questa applicazione) |
| URL di reindirizzamento |
Inserire il URL di reindirizzamento (ad esempio, l'endpoint in cui vuoi inviare/pubblicare il tuo token JWT). Puoi aggiungere più URL di reindirizzamento separandoli con un ';'. Ad esempio abc.com;xyz.com
|
| ID cliente |
Migliori ID cliente viene visualizzato nel campo sottostante. Fai clic sull'icona degli appunti per copiarlo. |
| Client Secret |
Client Secret È nascosto per impostazione predefinita. Fai clic sull'icona a forma di occhio per visualizzarlo e usa l'icona degli appunti per copiarlo. Questo viene utilizzato nell'algoritmo di firma HS256 per generare la firma.
|
| Descrizione (facoltativa) |
Aggiungere una descrizione se necessario.
|
- Clicchi Salva.
- Sarai reindirizzato al Politiche .
- Clicca sul Assegna gruppo pulsante. Un nuovo Configurare l'assegnazione del gruppo Si aprirà una finestra modale.
- Assegna gruppo: Seleziona i gruppi che desideri collegare all'applicazione. Puoi selezionare fino a 20 gruppi alla volta.
- Se devi creare un nuovo gruppo, clicca su Aggiungi nuovo gruppo pulsante.
- Inserisci il nome del gruppo e clicca su Crea gruppo.
- Fare clic su Avanti.
- Assegnazione delle policy: Aggiungi i criteri richiesti ai gruppi selezionati. Inserisci i seguenti dettagli:
- Primo fattore: Seleziona il metodo di accesso dal menu a discesa.
- Se si seleziona Password come metodo di accesso, puoi abilitare Autenticazione a due fattori (MFA) and Autenticazione adattiva, se necessario.
- Se si seleziona Senza password come metodo di accesso, puoi abilitare Autenticazione a due fattori (MFA) se necessario.
- Se si seleziona Collegamento magico Come metodo di accesso, vengono visualizzate le seguenti opzioni:
- Consenti l'accesso da altri indirizzi IP: Quando questa opzione è abilitata, gli utenti possono aprire il Magic Link da un indirizzo IP diverso da quello da cui è stata effettuata la richiesta.
- Abilita l'accesso da altri dispositivi: Quando questa opzione è abilitata, gli utenti possono aprire il Magic Link su un dispositivo diverso da quello utilizzato per richiederlo.
- Fare clic su SalvaVerranno create policy per tutti i gruppi selezionati.
- Una volta aggiunta correttamente, la policy verrà visualizzata nell'elenco.
- Fare clic su Filtri scheda.
- Inserisci i seguenti dettagli come richiesto:
| Token di accesso |
Inserisci il token di accesso che verrà inviato al tuo URL di reindirizzamento dopo che un utente ha effettuato l'accesso. Questo token consente alla tua app di sapere che l'utente è autorizzato ad accedere a determinate funzionalità. |
| Scadenza del token ID (in minuti) |
Imposta per quanto tempo (in minuti) sarà valido il token ID. Trascorso questo periodo, l'utente dovrà effettuare nuovamente l'accesso per ottenere un nuovo token. |
| Oggetto |
Scegli quali informazioni, come l'indirizzo email dell'utente, verranno utilizzate per identificarlo nel token. Questo aiuta la tua app a sapere quale utente ha effettuato l'accesso. |
| Algoritmo della firma |
Seleziona l'algoritmo della tua firma dal menu a discesa. |
| URL di disconnessione della tua applicazione |
Inserisci l'indirizzo web a cui gli utenti devono essere indirizzati dopo aver effettuato il logout. |
| Abilita identità condivisa |
Questa funzionalità consente di controllare se un utente condiviso può accedere o meno a un'applicazione specifica. |
- Algoritmi di firma per JWT
Codice RSA-SHA256
- Asimmetrico: utilizza un set di chiavi private e pubbliche per generare e convalidare la firma inclusa nel token JWT.
- La chiave privata viene utilizzata per generare la firma sul lato IDP.
- La chiave pubblica viene utilizzata per verificare la firma sul lato SP.
- Per questo forniamo la chiave pubblica.
HS256
- Simmetrico, utilizza la stessa chiave segreta per generare e convalidare la firma
- In questo caso la chiave segreta è configurabile dalla pagina di configurazione dell'app.
-
Passare alla Opzioni di accesso scheda.
| Fornitore di identità primario |
Seleziona la fonte ID predefinita dal menu a discesa per l'applicazione. Se non è selezionata, gli utenti visualizzeranno la schermata di accesso predefinita e potranno scegliere il proprio ID. [In questo caso, scegli miniOrange.]
|
| Forza autenticazione |
Se si abilita questa opzione, gli utenti dovranno effettuare l'accesso ogni volta, anche se la loro sessione esiste già. |
| Abilita la mappatura degli utenti |
Abilita questa opzione se vuoi che l'app mostri quale utente ha effettuato l'accesso quando risponde. |
| Mostra sulla dashboard dell'utente finale |
Abilita questa opzione se vuoi mostrare questa app nella dashboard dell'utente finale. |
- Accedere a endpoint e copiare i seguenti dettagli:
-
URL di Single Sign-On:
- Questo URL viene utilizzato per avviare l'autenticazione dell'utente per ottenere il token JWT.
- Accettare redirect_uri come uno dei parametri di query.
- Dopo l'autenticazione riuscita sul lato IDP, viene creata una sessione utente attiva nell'IDP e l'utente viene reindirizzato al redirect_uri con il token JWT.
-
-
URL di disconnessione singola:
- Questo URL viene utilizzato per disconnettere l'utente dall'IDP rimuovendo la sessione utente attiva.
- Accettare redirect_uri come uno dei parametri di query.
- Dopo aver rimosso la sessione utente attiva, l'IDP reindirizza l'utente al redirect_uri.
-
URL di risposta per la disconnessione avviata dall'IdP:
- Questo URL viene utilizzato per avviare la disconnessione nel caso in cui l'accesso dell'utente JWT sia stato avviato da IDP [Utente connesso alla dashboard
prima e poi ho avviato l'accesso all'app dalla dashboard.]
- Dopo aver effettuato il logout dall'IDP, l'utente viene reindirizzato alla pagina di accesso della dashboard dell'IDP.
2. Configurare SSO in Angular
- Selezionare un componente che sarà responsabile della verifica del token JWT, preferibilmente il componente di accesso.
- Importa il Costruttore JWT classe dal jwt-connector. Dal percorso in cui è stato spostato nel passaggio 1 dei Prerequisiti.
import { JWTBuilder } from './path/to/jwt-connector';
- Puoi aggiungere un pulsante nella schermata di login per reindirizzare all'URL SSO. Puoi ottenere questo URL SSO dal passaggio 1 di Configura la tua applicazione in miniOrange.
<button> onClick={sso}>Single Sign On</button>
function sso() {
window.location.href = window.location.href = ‘
’; //
example:https://login.xecurify.com/moas/broker/login/jwt/277898?client_id=AbIVW8A
MNTBzg2o7&redirect_uri=http://localhost:3000/login;
}
- Facendo clic su Pulsante SSO l'utente verrà reindirizzato al portale miniOrange per l'autenticazione.
- Quindi il token JWT viene restituito alla tua applicazione all'URL di reindirizzamento che hai impostato durante l'aggiunta della tua applicazione in miniOrange. Nei passaggi successivi, verificheremo questo token e recupereremo i dettagli dell'utente.
- Devi aggiungere il file certificato x509 che puoi ottenere nel passaggio 1 'configura la tua applicazione in miniOrange'.
- Ora, se il token è verificato, il payload costituito dai dettagli dell'utente può essere salvato nella memoria locale o serializzato in una classe utente e l'utente ora verificato può essere reindirizzato alla schermata iniziale dell'applicazione.
3. Testare la configurazione SSO
Prova l'accesso SSO al tuo account Angular con miniOrange IdP:
Riferimenti esterni
