Accesso singolo Java Script SSO
La soluzione di Single Sign-On (SSO) Java Script JWT di miniOrange offre un accesso Single Sign-On sicuro alle applicazioni Java Script utilizzando un unico set di credenziali di accesso. Questo avviene tramite token JSON Web Token (JWT) e la soluzione può essere facilmente integrata con Java Script sviluppato in qualsiasi framework o linguaggio. È possibile abilitare l'accesso tramite social network per consentire agli utenti di accedere in modo sicuro alle applicazioni utilizzando i loro account social, come Facebook, Twitter, Google o LinkedIn.
Con miniOrange Java Script 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 Java Script Single Sign-On (SSO), seguire la guida dettagliata riportata di seguito:
1. Configurare Java Script 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 Java Script 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. Aggiunta di uno script alla fine di Java Script
- Per abilitare SSO sul lato Java Script, tutto ciò che devi fare è aggiungere un URL di accesso singolo and Script personalizzato per recuperare gli attributi richiesti dal token JWT.
- Per favore, clicca qui. per contattarci per lo script da aggiungere.
3. Testare la configurazione SSO
Prova l'accesso SSO al tuo account Java Script con miniOrange IdP:
4. Accedi tramite il provider social (facoltativo)
miniOrange offre l'autenticazione degli utenti da varie fonti esterne, tra cui directory (come ADFS, Microsoft Active Directory, Microsoft Entra ID, OpenLDAP, Google, AWS Cognito ecc.), provider di identità (come Okta, Shibboleth, Ping, OneLogin, KeyCloak), database (come MySQL, MariaDB, PostgreSQL) e molti altri . È possibile configurare la directory/archivio utenti esistente o aggiungere utenti in miniOrange.
4.1. Configurare Google Apps come provider OAuth 2.0 in miniOrange.
- Vai su Console di amministrazione miniOrange.
- Dalla barra di navigazione a sinistra seleziona Provider di identità >> Aggiungi provider di identità.
- Da configurare OAuth/OpenID, selezionare OAuth/OpenID dal menu a discesa.
- Seleziona Google.
- Immettere i seguenti valori:
| Nome IdP |
Fornitore personalizzato |
| Display Nome |
Scegli il nome appropriato |
| URL di callback OAuth |
URL a cui l'IDP reindirizza gli utenti dopo l'autenticazione riuscita. |
| ID cliente |
Dal passo 4.2 |
| Segreto del cliente |
Dal passo 4.2 |
| Obbiettivo |
email |
- Fare clic su Avanti per Filtri scheda.
- Tipo di sovvenzione: Selezionare il tipo di concessione OAuth utilizzato per ottenere il token di accesso.
- Mappatura del dominio: Specificare il dominio collegato a questo Identity Provider per l'accesso.
- Fare clic su Salva.
4.2. Configurazione di miniOrange come fornitore di servizi (SP) in Google Apps
- Vai su https://console.developers.google.com/ e registrati/accedi.
- Fare clic su Seleziona progetto Per creare un nuovo progetto Google Apps, verrà visualizzato un popup con l'elenco di tutti i tuoi progetti.
- È possibile fare clic sul Nuovo progetto pulsante per creare un nuovo progetto.
- Inserisci il nome del tuo progetto sotto Nome del progetto campo e fare clic su Crea
.
- Vai su Menu di navigazione >> API >> Servizi >> Credenziali.
- Fare clic su creare Credenziali pulsante e quindi selezionare ID cliente OAuth dalle opzioni fornite.
- Nel caso in cui ti trovi di fronte a un avviso che dice che per creare un ID client OAuth, devi impostare un nome di prodotto nella schermata di consenso (come mostrato nell'immagine sottostante). Fai clic su Configura la schermata di consenso pulsante.
- Inserisci i dettagli richiesti come Nome app, e-mail supporto utente. e fare clic su Salva e continua pulsante.
- Ora per configurare gli ambiti, fare clic su Aggiungere o rimuovere gli ambiti pulsante.
- Ora, seleziona Scopes per consentire al tuo progetto di accedere a specifici tipi di dati privati degli utenti dal loro account Google e fare clic su Salva e continua pulsante.
- Vai Scheda Credenziali e cliccare su creare Credenziali pulsante. Selezionare Applicazione web dall'elenco a discesa per creare una nuova applicazione.
- Prendere il URL di reindirizzamento:
- Vai su Console di amministrazione miniOrange.
- Dalla barra di navigazione a sinistra seleziona Fornitore di identità.
- copiare il URL di richiamata as URL di reindirizzamento necessario per il passaggio successivo.
- Inserisci il nome che desideri per il tuo ID cliente nel campo nome e inserisci il URI di reindirizzamento/richiamata e clicca su Crea
pulsante.
- Verrà visualizzato un popup con l'ID cliente e la copia segreta del cliente. ID cliente and Client Secret.
- Hai completato con successo le configurazioni lato server di Google App OAuth.
4.1. Configurare LinkedIn come provider OAuth 2.0 in miniOrange.
- Vai su Console di amministrazione miniOrange.
- Dalla barra di navigazione a sinistra seleziona Provider di identità >> Aggiungi provider di identità.
- Da configurare OAuth/OpenID, selezionare OAuth/OpenID dal menu a discesa.
- Seleziona LinkedIn.
- Immettere i seguenti valori:
| Nome IdP |
Fornitore personalizzato |
| Display Nome |
Scegli il nome appropriato |
| URL di callback OAuth |
URL a cui l'IDP reindirizza gli utenti dopo l'autenticazione riuscita. |
| ID cliente |
Dal passo 4.2 |
| Segreto del cliente |
Dal passo 4.2 |
| Obbiettivo |
email |
- Fare clic su Avanti per Filtri scheda.
- Tipo di sovvenzione: Selezionare il tipo di concessione OAuth utilizzato per ottenere il token di accesso.
- Mappatura del dominio: Specificare il dominio collegato a questo Identity Provider per l'accesso.
- Fare clic su Salva.
4.2. Configurare miniOrange come fornitore di servizi (SP) in LinkedIn
- Vai su https://www.linkedin.com/secure/developer?newapp= per creare una nuova applicazione. Clicca su Crea applicazione pulsante per creare una nuova applicazione.
- Inserisci i dati richiesti e clicca su Crea app pulsante per salvare le modifiche.
- Qui devi verificare la pagina fornita. Se la verifica della pagina non viene eseguita, allora SSO non funzionerà.
- Vai alla sezione Prodotti e quindi seleziona Accedi con LinkedIn.
- copiare il Identificativo cliente e Client Secret e salvalo nel tuo Configurazione dell'app miniOrange OAuth per Identificativo cliente e Campi di testo Segreto del client rispettivamente.
- Prendere il URL di reindirizzamento:
- Vai su Console di amministrazione miniOrange.
- Dalla barra di navigazione a sinistra seleziona Fornitore di identità.
- copiare il URL di richiamata as URL di reindirizzamento necessario per il passaggio successivo.
- copiare il URL di reindirizzamento/richiamata da sopra il passo e inseriscilo in OAuth 2.0 -> Autorizzato Reindirizzare gli URL casella di testo. Fare clic su Aggiungi pulsante adiacente alla casella di testo per salvarlo. Infine, fai clic sul Aggiornanento pulsante per salvare le configurazioni. (immagine nella pagina successiva).
4.1. Configurare Facebook come provider OAuth 2.0 in miniOrange.
- Vai su Console di amministrazione miniOrange.
- Dalla barra di navigazione a sinistra seleziona Provider di identità >> Aggiungi provider di identità.
- Da configurare OAuth/OpenID, selezionare OAuth/OpenID dal menu a discesa.
- Seleziona Facebook.
- Immettere i seguenti valori:
| Nome IdP |
Fornitore personalizzato |
| Display Nome |
Scegli il nome appropriato |
| URL di callback OAuth |
URL a cui l'IDP reindirizza gli utenti dopo l'autenticazione riuscita. |
| ID cliente |
Dal passo 4.2 |
| Segreto del cliente |
Dal passo 4.2 |
| Obbiettivo |
email |
- Fare clic su Avanti per Filtri scheda.
- Tipo di sovvenzione: Selezionare il tipo di concessione OAuth utilizzato per ottenere il token di accesso.
- Mappatura del dominio: Specificare il dominio collegato a questo Identity Provider per l'accesso.
- Fare clic su Salva.
4.2. Configurare miniOrange come fornitore di servizi (SP) in Facebook
- Prima di tutto, accedi/registrati nella console dello sviluppatore di Facebook su https://developers.facebook.com/
- Vai su Le mie applicazioni.
- Fare clic su Crea app per creare una nuova app.
- Inserisci i dati richiesti e clicca su creare app.
- Completa il controllo di sicurezza e clicca su Invio pulsante.
- Seleziona Accesso a Facebook cliccando sul pulsante Imposta.
- Seleziona Accesso a Facebook >> Impostazioni sotto l'opzione Prodotti nella barra di navigazione.
- Prendere il URL di reindirizzamento:
- Vai su Console di amministrazione miniOrange.
- Dalla barra di navigazione a sinistra seleziona Fornitore di identità.
- copiare il URL di richiamata as URL di reindirizzamento necessario per il passaggio successivo.
- Sotto Impostazioni OAuth del client, immettere l'URL di callback/reindirizzamento nel URI di reindirizzamento OAuth validi campo. Clicca sul Salva pulsante per salvare le tue configurazioni.
Soprattutto, il tuo URI di callback/reindirizzamento dovrebbe essere https e non httpÈ obbligatorio durante la configurazione di Facebook come server OAuth.
- Vai su Impostazioni -> Base per visualizzare il tuo App Id e il tuo App Secret (vedi l'immagine qui sotto).
- Hai completato con successo le configurazioni lato server OAuth dell'app Facebook.
4.1. Configurare le app Apple come provider OAuth 2.0 in miniOrange.
- Vai su Console di amministrazione miniOrange.
- Dalla barra di navigazione a sinistra seleziona Provider di identità >> Aggiungi provider di identità.
- Da configurare OAuth/OpenID, selezionare OAuth/OpenID dal menu a discesa.
- Seleziona Mela.
- Compila i dettagli mostrati nell'immagine sottostante.
| Nome visualizzato: |
ID apple |
| ID cliente* |
{Il tuo ID di servizio} ad esempio com.john.serviceid |
| Segreto del cliente* |
eyJraWQiOiJCOTJQUDg1VUw4IiwiYWxnIjoiRVMyNTYifQ.eyJpc3MiOiJFW.... |
| Endpoint di autorizzazione OAuth |
https://appleid.apple.com/auth/authorize?response_mode=form_post |
| Endpoint del token di accesso OAuth* |
https://appleid.apple.com/auth/token |
| Obbiettivo |
nome e-mail |
- Fare clic su Avanti per Filtri scheda.
- Tipo di sovvenzione: Selezionare il tipo di concessione OAuth utilizzato per ottenere il token di accesso.
- Mappatura del dominio: Specificare il dominio collegato a questo Identity Provider per l'accesso.
- Fare clic su Salva.
4.2. Configurare miniOrange come fornitore di servizi (SP) nelle app Apple
- Vai su https://developer.apple.com cliccare su Account e accedi con il tuo account sviluppatore Apple.
- Fare clic su Certificati, Identificatori and Profili nell'account Apple.
- Nel menu di sinistra clicca su Identificatori e dopo clicca sul Icona più (colore blu). Fare clic su Continua per le prossime 2 pagine dell'Account Apple.
- entra Descrizione and ID bundle per l' App ID(Il Bundle ID è migliore quando è una stringa in stile reverse-dns.)
- Nel Capabilities sezione scorri verso il basso e seleziona registrati con apple. Fai clic su Modifica e seleziona Abilita come ID app principale e cliccare su Salva. Fare clic su Continua e quindi fare clic su Registrati.
- Nell'angolo destro clicca su Continua dopodiché Registrati pulsante.
- Fai di nuovo clic sul Icona più(colore blu). Selezionare ID di servizio e cliccare su Continua.
- entra Descrizione and Identifier(L'identificativo sarebbe il tuo ID cliente - Copia questo ID e incollalo nel campo soprastante dell'ID cliente). e fai clic su Continua dopodiché Registrati pulsante.
- Clicchi Keys dal menu a sinistra.Clicca sul pulsante Icona più per registrare una nuova chiave.
- Dai il tuo Le un nome e seleziona Accedi con Apple e cliccare su Configurazione pulsante
- Seleziona la tua ID primario e fare clic sul Salva pulsante e dopo nell'angolo destro clicca su Continua e Registrati pulsante.
- Clicca sul Scaricare pulsante una volta scaricata la chiave clicca sul pulsante Fatto pulsante.
- Nel menu a sinistra clicca su Identificatori.
- In alto a destra clicca su ID app.
- Seleziona ID di servizio Dal menu a discesa.
- Seleziona la tua ID del servizio dall'elenco.
- Seleziona Accedi con Apple e fai clic su Configurazione pulsante.
- Seleziona il ID app principale dal menu a discesa e inserisci il Domini and URL di reindirizzamento in Domini e Sottodomini e URL di ritorno rispettivamente e fare clic su Avanti pulsante (Otterrai il nome di dominio e l'URL di reindirizzamento dalla dashboard di miniOrange).
- Verifica i dettagli e clicca su Fatto pulsante. Dopo di che nell'angolo destro clicca sul Continua pulsante.
- copiare il Valore identificativo e fare clic sul Salva pulsante.
- Inserisci il valore dell'identificatore nel campo ID app e copialo chiave scaricata valore nel campo App secret del plugin miniOrange per le istruzioni di accesso Apple.
Generazione della chiave segreta
- Scarica il programma di installazione di Ruby dal seguente link https://rubyinstaller.org/downloads/ e quindi installarlo.
- Cercare il prompt dei comandi Start con ruby, aprire il prompt dei comandi ruby e installare la gemma JWT eseguendo il seguente comando sulla riga di comando: installazione gemma jwt.
- Copia il codice sottostante in un file e salva il file con l'estensione .rb. Mantieni questo file .rb e il file .p8 scaricato nella stessa cartella.
- Inserisci il nome del file scaricato esempio= "key.P8", key_id , client_id, team_id nel codice
require 'jwt'
key_file = 'key.P8'
team_id = ''
client_id = ''
key_id = ''
ecdsa_key = OpenSSL::PKey::EC.new IO.read key_file
headers = {
'kid' => key_id
}
claims = {
'iss' => team_id,
'iat' => Time.now.to_i,
'exp' => Time.now.to_i + 86400*180,
'aud' => 'https://appleid.apple.com',
'sub' => client_id,
}
token = JWT.encode claims, ecdsa_key, 'ES256', headers
puts token
- Aprire il prompt dei comandi Ruby ed eseguire il codice soprastante utilizzando il seguente comando: nomefile ruby.rb.
- Ti verrà fornita la tua chiave segreta del client. Copia e salva la chiave segreta; ti servirà per configurare l'ID Apple nella Dashboard miniOrange.
Riferimenti esterni
