IBM Cloud Docs
Schnelleinstieg: Node.js-Web-Apps

Schnelleinstieg: Node.js-Web-Apps

Mit App ID können Sie Ihre Node.js-Front-End-Webanwendungen auf einfache Weise schützen. Mit diesem Leitfaden können Sie einen einfachen Authentifizierungsablauf in weniger als 20 Minuten einrichten.

Das folgende Diagramm zeigt den Ablauf für den Autorisierungscode mit OAuth 2.0

Node.js ablauf der Anwendungsgenehmigung Ablauf der Anwendung
Node.js

  1. Ein Benutzer versucht, Zugriff auf Ihre geschützte Webanwendung zu erhalten, ist jedoch nicht autorisiert.
  2. Ihre Anwendung leitet den Benutzer an App ID weiter.
  3. App ID zeigt eine Anmeldeanzeige, die der Benutzer für die Authentifizierung verwenden kann.
  4. Benutzer geben dazu ihre Berechtigungsnachweise wie Benutzername und Kennwort ein. App ID überprüft die Berechtigungsnachweise.
  5. App ID leitet den Benutzer mit einem Erteilungscode an Ihre Anwendung weiter.
  6. Durch die Verwendung des Erteilungscodes stellt Ihre Anwendung eine Anfrage bei App ID, um zu gewährleisten, dass der Benutzer überprüft wurde. Weitere Informationen zum Abrufen von Zugriffstoken finden Sie unter Token abrufen.
  7. App ID gibt Zugriffs- und Identitätstoken für die überprüften Benutzer zurück.
  8. Der Benutzer erhält nun Zugriff auf Ihre Anwendung.

Schulungsvideo

Sehen Sie sich das folgende Video an, um zu erfahren, wie Sie App ID verwenden können, um eine einfache Node.js-Webanwendung zu schützen. Alle Informationen, die im Video behandelt werden, finden Sie auch in schriftlicher Form auf dieser Seite.

Sie haben keine App, mit der Sie den Ablauf ausprobieren können? Kein Problem! App ID stellt eine einfache Node.js-Beispielappbereit.

Vorbereitende Schritte

Bevor Sie mit App ID in Ihren Node.js-Webanwendungen beginnen können, müssen die folgenden Voraussetzungen erfüllt sein.

Dieses SDK verwendet das Paket log4js für die Protokollierung. Standardmäßig ist die Protokollierungsstufe auf info gesetzt. Wenn Sie eine eigene Protokollierungskonfiguration erstellen möchten, fügen Sie eine Datei log4js.json hinzu und setzen Sie die Umgebungsvariable process.env.LOG4JS_CONFIG auf Ihre JSON-Datei.

Ihre Weiterleitungs-URI registrieren

Ein Weiterleitungs-URI ist der Callback-Endpunkt Ihrer App. Während des Anmeldeablaufs validiert App ID die URIs, bevor Clients am Autorisierungsworkflow teilnehmen können. Dies hilft, Phishing-Attacken zu verhindern und Codelecks zu gewähren. Durch die Registrierung des URI wird App ID darüber informiert, dass der URI vertrauenswürdig ist und dass Ihre Benutzer ohne Risiko zu diesem URI weitergeleitet werden können.

  1. Klicken Sie auf Authentifizierungen verwalten > Authentifizierungseinstellungen.

  2. Geben Sie im Feld Webweiterleitungs-URI hinzufügen den gewünschten URI ein. Jeder URI muss mit http:// oder https:// beginnen und den vollständigen Pfad einschließlich aller Abfrageparameter enthalten, damit die Umleitung erfolgreich ist.

  3. Klicken Sie auf das Plussymbol (+) im Feld Webweiterleitungs-URI hinzufügen.

  4. Wiederholen Sie die Schritte 1 bis 3, bis alle möglichen URIs zu Ihrer Liste hinzugefügt wurden.

Ihre Berechtigungsnachweise abrufen

Sie können Ihre Berechtigungsnachweise mithilfe einer der folgenden Methoden abrufen.

  • Navigieren Sie zur Registerkarte Anwendungen des App ID-Dashboards. Wenn Sie noch nicht über eine Anwendung verfügen, dann können Sie auf Anwendung hinzufügen klicken, um eine neue Anwendung zu erstellen.

  • Durch eine POST-Anfrage an den Endpunkt /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"
     }
     ```
    

SDK initialisieren

Die einfachste Möglichkeit mit App ID zu arbeiten, besteht in der Nutzung des Node.JS-SDK.

  1. Wechseln Sie mithilfe der Befehlszeile in das Verzeichnis, das Ihre Node.js-Anwendung enthält.

  2. Installieren Sie die folgenden Voraussetzungen.

    npm install --save express express-session passport log4js pug
    
  3. Installieren Sie den App ID-Service.

    npm install --save ibmcloud-appid
    
  4. Fügen Sie die folgenden Anforderungen zu Ihrer Datei server.js hinzu.

    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. Konfigurieren Sie Ihre Anwendung für die Verwendung von Express-Session-Middleware unter Verwendung der Berechtigungsnachweise, die Sie in Schritt 1 erhalten haben. Sie haben zwei Möglichkeiten, Ihren Umleitungs-URI zu formatieren. Manuell, indem Sie eine neue WebAppStrategy({redirectUri: "...."}) verwenden oder den Wert wie im Beispielcode gezeigt als Umgebungsvariable festlegen.

    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>"
    }));
    

    Sie müssen die Middleware mit dem passenden Sitzungsspeicher für die Produktionsumgebungen konfigurieren. Weitere Informationen finden Sie in den Dokumenten von express.js.

Anwendung schützen

Nachdem Sie nun App ID installiert haben, können Sie Ihre Anwendung schützen. Sie können auswählen, ob Sie Ihre gesamte Anwendung oder nur bestimmte Ressourcen schützen möchten, indem Sie eine Web-App-Strategie definieren.

  1. Konfigurieren Sie den Callback-Endpunkt. Der Callback beendet den Berechtigungsprozess, indem er Zugriffs- und Identitätstoken aus App ID abruft und den Benutzer an einen der folgenden Positionen weiterleitet:

    • Die ursprüngliche URL der Anforderung, die die Authentifizierung ausgelöst hat und die in der HTTP-Sitzung als WebAppStrategy.ORIGINAL_URL persistent gespeichert ist.
    • Angabe einer Weiterleitung im Fall einer erfolgreichen Authentifizierung.
    • Das Stammverzeichnis der Anwendung (/), so wie es im nächsten Schritt dargestellt wird.
    app.get(CALLBACK_URL, passport.authenticate(WebAppStrategy.STRATEGY_NAME));
    
  2. Legen Sie einen Anmeldeendpunkt fest, der einen Browser immer an das Anmeldewidget weiterleitet. Stellen Sie sicher, dass Sie eine Option für erfolgreiche Weiterleitung hinzufügen, damit es nicht zu einer endlosen Authentifizierungsschleife kommt.

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

App personalisieren

Sie könne Informationen abrufen, die von Ihren Identitätsprovidern bereitgestellt werden, um Ihre Apperfahrung individuell zu gestalten.

  1. Konfigurieren Sie Ihre Anwendung, um Benutzerinformationen abzurufen. protected ist eine Platzhaltervariable, die Sie an den Endpunkt für Ihre Anwendung anpassen können.

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

    In der Beispielanwendung können Sie beispielsweise sehen, wie der Benutzername abgerufen wird, um Ihre Anwendung zu personalisieren.

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

Konfiguration testen

Um Ihre Berechtigungskonfiguration zu testen, navigieren Sie zu der URL, auf der Ihr Server - wie in Ihrer Anwendung definiert - empfangsbereit ist. Versuchen Sie, sich anzumelden, und versuchen Sie, sich abzumelden. Stellen Sie sicher, dass die Konfiguration wie erwartet funktioniert.

Wenn Sie für den nächsten Schritte bereit sind, können Sie versuchen, die Mehrfaktorauthentifizierung für Cloud Directory zu aktivieren oder angepasste Attribute hinzuzufügen, um Ihre App weiter individuell anzupassen.