Introduzione rapida: applicazioni web Node.js

Con App ID, puoi facilmente proteggere le applicazioni web front-end di Node.js. Grazie a questa guida, potrete mettere in funzione un semplice flusso di autenticazione in meno di 20 minuti.

Consulta il seguente diagramma per visualizzare il flusso di lavoro del codice di autorizzazione OAuth 2.0.

Node.js flusso di autorizzazione dell'applicazione flusso dell'applicazione
Node.js

  1. Un utente prova a ottenere l'accesso alla tua applicazione web protetta ma non è autorizzato.
  2. La tua applicazione reindirizza l'utente a App ID.
  3. App ID mostra una schermata di accesso che l'utente può utilizzare per autenticarsi.
  4. Immette le sue credenziali, come un nome utente e una password. App ID convalida le credenziali.
  5. App ID reindirizza nuovamente l'utente alla tua applicazione con un codice di concessione.
  6. Utilizzando il codice di concessione, la tua applicazione effettua una richiesta a App ID per garantire che l'utente sia convalidato. Per ulteriori informazioni sull'ottenimento di token di accesso, vedi Ottenimento dei token.
  7. App ID restituisce i token di accesso e identità per l'utente convalidato.
  8. All'utente viene quindi concesso l'accesso alla tua applicazione.

Prima di iniziare

Prima di iniziare a utilizzare App ID nelle applicazioni web di Node.js, è necessario disporre dei seguenti prerequisiti.

  • Un'istanza di il servizio App ID
  • NPM versione 4 +
  • Node versione 6 +
  • Questo SDK utilizza il pacchetto log4js per la registrazione. Per impostazione predefinita, il livello di registrazione è impostato su info. Per creare la propria configurazione di registrazione, aggiungere un file log4js.json e impostare la variabile di ambiente process.env.LOG4JS_CONFIG al proprio file JSON.

Non hai un'applicazione con cui puoi provare il flusso? Nessun problema! App ID fornisce un' applicazione di esempio web Node.js semplice.

Registra il tuo URI redirect

Un URI di reindirizzamento è l'endpoint di callback della tua applicazione. Durante il flusso di accesso, App ID convalida gli URI prima che i clienti siano autorizzati a partecipare al flusso di lavoro di autorizzazione, il che aiuta a prevenire gli attacchi di phishing e la perdita di codice di concessione. Registrando il tuo URI, stai indicando a App ID che l'URI è attendibile ed è valido per il reindirizzamento dei tuoi utenti.

  1. Fai clic su Manage Authentications > Authentication Settings.

  2. Nel campo Add web redirect URI, immetti l'URI. Ogni URI deve iniziare con http:// o https:// e deve includere il percorso completo, compresi eventuali parametri di query, affinché il reindirizzamento abbia successo.

  3. Fai clic sul simbolo + nella casella Add web redirect URIs.

  4. Ripetere i passi da uno a tre fino a che al tuo elenco non vengono aggiunti tutti gli URI possibili.

Ottenere le proprie credenziali

Puoi ottenere le tue credenziali in uno dei due modi di seguito indicati.

  • Passando alla scheda Applications del dashboard App ID. Se non ne hai già una, puoi fare clic su Add application per crearne una nuova.

  • Effettuando una richiesta POST all'endpoint /management/v4/<tenantID>/applications.

     Request format:
    
     ```sh {: codeblock}
     curl -X POST \  https://us-south.appid.cloud.ibm.com/management/v4/39a37f57-a227-4bfe-a044-93b6e6060b61/applications/ \
     -H 'Content-Type: application/json' \
     -H 'Authorization: Bearer <IAMToken>' \
     -d '{"name": "ApplicationName"}'
     ```
     Example response:
    
     ```json {: screen}
     {
       "clientId": "xxxxx-34a4-4c5e-b34d-d12cc811c86d",
       "tenantId": "xxxxx-9b1f-433e-9d46-0a5521f2b1c4",
       "secret": "ZDk5YWZkYmYt*******",
       "name": "app1",
       "oAuthServerUrl": "https://us-south.appid.cloud.ibm.com/oauth/v4/xxxxx-9b1f-433e-9d46-0a5521f2b1c4",
       "profilesUrl": "https://us-south.appid.cloud.ibm.com",
       "discoveryEndpoint": "https://us-south.appid.cloud.ibm.com/oauth/v4/xxxxxx-9b1f-433e-9d46-0a5521f2b1c4/.well-known/openid-configuration"
     }
     ```
    

Inizializzare l'SDK

Il modo più facile per lavorare con App ID è avvalersi dell'SDK Node.JS.

  1. Utilizzando la riga di comando, passa alla directory che contiene la tua applicazione Node.js.

  2. Installa i seguenti requisiti NPM.

    npm install --save express express-session passport log4js pug
    
  3. Installa il servizio App ID.

    npm install --save ibmcloud-appid
    
  4. Aggiungi i seguenti requisiti al tuo file server.js.

    const express = require('express'); 								// https://www.npmjs.com/package/express
    const log4js = require('log4js');                                   // https://www.npmjs.com/package/log4js
    const session = require('express-session');							// https://www.npmjs.com/package/express-session
    const passport = require('passport');								// https://www.npmjs.com/package/passport
    const WebAppStrategy = require('ibmcloud-appid').WebAppStrategy;	// https://www.npmjs.com/package/ibmcloud-appid
    
  5. Impostare la propria applicazione per utilizzare il middleware di sessione espresso utilizzando le credenziali ottenute al passo 1. Puoi scegliere di formattare il tuo URI redirect in uno di due modi. Manualmente, utilizzando un nuovo WebAppStrategy({redirectUri: "...."}) o impostando il valore come variabile di ambiente come mostrato nel codice di esempio.

    const app = express();
    const logger = log4js.getLogger("testApp");
    app.use(session({
       secret: '123456',
       resave: true,
       saveUninitialized: true
    }));
    app.use(passport.initialize());
    app.use(passport.session());
    passport.serializeUser((user, cb) => cb(null, user));
    passport.deserializeUser((user, cb) => cb(null, user));
    passport.use(new WebAppStrategy({
       tenantId: "<tenantID>",
       clientId: "<clientID>",
       secret: "<secret>",
       oauthServerUrl: "<oauthServerURL>",
       redirectUri: "<redirectURI>"
    }));
    

    Devi configurare il middleware con l'archivio della sessione appropriato per gli ambienti di produzione. Per ulteriori informazioni, consultare i documenti di express.js.

Proteggi la tua applicazione

Ora che hai App ID installato, sei pronto a proteggere la tua applicazione. Puoi scegliere di proteggere la tua intera applicazione o solo delle specifiche risorse definendo una strategia di applicazione web.

  1. Configura l'endpoint di callback. Il callback termina il processo di autorizzazione richiamando i token di accesso e identità dall'ID applicazione e reindirizzando l'utente a una delle seguenti ubicazioni:

    • L'URL originale della richiesta che ha attivato l'autenticazione, come reso persistente nella sessione HTTP come WebAppStrategy.ORIGINAL_URL.
    • Specificando un reindirizzamento in caso di un'autenticazione riuscita.
    • La root dell'applicazione (/) come mostrato nel passo successivo.
    app.get(CALLBACK_URL, passport.authenticate(WebAppStrategy.STRATEGY_NAME));
    
  2. Impostare un endpoint di accesso che reindirizzi sempre il browser al widget di accesso. Assicurati di aggiungere un'opzione di reindirizzamento riuscito in modo da non finire in un loop di autenticazione infinito.

    app.get('/appid/login', passport.authenticate(WebAppStrategy.STRATEGY_NAME, {
       successRedirect: '/',
       forceLogin: true
    }));
    

Personalizzare la tua app

Puoi estrarre le informazioni fornite dai tuoi provider di identità per personalizzare la tua esperienza dell'applicazione.

  1. Configurare la propria applicazione per ottenere informazioni sull'utente. protected è una variabile del titolare che è possibile modificare per corrispondere all'endpoint per la propria applicazione.

    app.get("/protected_resource", passport.authenticate(WebAppStrategy.STRATEGY_NAME), function(req, res){
       res.json(req.user);
    });
    

    Ad esempio, nell'applicazione di esempio puoi vedere come ottenere il nome dell'utente per personalizzare la tua applicazione.

    app.get('/api/user', (req, res) => {
       // console.log(req.session[WebAppStrategy.AUTH_CONTEXT]);
       res.json({
          user: {
                name: req.user.name
          }
       });
    });
    

Test della configurazione

Per verificare la tua configurazione dell'autorizzazione, vai all'URL su cui il tuo server è in ascolto, come definito nella tua applicazione. Prova ad accedere e prova a disconnetterti. Assicurati che la configurazione stia funzionando come previsto.

Quando sei pronto a procedere al passo successivo, puoi provare ad abilitare l'autenticazione multifattore (MFA, multi-factor authentication) per Cloud Directory o ad aggiungere degli attributi personalizzati per personalizzare ulteriormente la tua applicazione.