Kann ich den Konfigurator nur für bestimmte Nutzer freigeben?

Wenn Ihr Konfigurator nicht öffentlich zugänglich sein soll, können Sie den Zugang sperren. Es gibt verschiedene Motivationen, das zu tun:

Nur bestimmte bekannte Personen sollen konfigurieren dürfen.
Es sollen nur Kunden auf den Konfigurator kommen, die schon in Ihrem Shop oder Ihrem ERP angemeldet sind.

Auth0

Wir nutzen dazu den bekannten Anmelde-Dienst https://auth0.com/.

Sie können sich dort einen kostenfreien Zugang einrichten.

Legen Sie dann eine Application an.
Wählen Sie unter Settings > Application Type "Single Page Application".
Fügen Sie unter Settings > Allowed Callback URLs und Allowed Web Origins "https://k3.objectcode.de/app" hinzu.
Setzen Sie Credentials > Authentication Method auf "None".

Notieren Sie unter Settings "domain" und "clientId" Ihrer Application.

Anmelde-Systeme anbinden

Das ist der eigentliche Clou von Auth0: Auth0 muss die Nutzer nicht selbst verwalten – es kann sich vor Ihr bestehendes Anmelde-System schalten und dort anmelden lassen. Der Konfigurator spricht immer nur mit Auth0; welches System dahinter steht, wählen Sie in Auth0 unter Connections. Das können auch mehrere gleichzeitig sein.

Typische Fälle:

Eigenes Benutzer-Management

Sie pflegen die erlaubten Personen direkt in Auth0. Am einfachsten für einen überschaubaren, bekannten Nutzerkreis.

Aktivieren Sie in Ihrer Application die Connection "Username-Password-Authentication".
Legen Sie Nutzer unter User Management > Users > Create User an (E-Mail + Passwort, Connection "Username-Password-Authentication").

WordPress und andere CMS

Für den relativ häufigen Fall, dass Sie WordPress verwenden wollen, können Sie den kostenfreien Plan von Auth0 nutzen.

Machen Sie zunächst Ihr WordPress zu einem "OAuth2-Server":

Installieren und aktivieren Sie dieses WordPress-Plugin.
Klicken Sie in der Seitenleiste auf "miniOrange OAuth Server"
Wählen Sie einen "Client Name" und speichern Sie.
Lassen Sie diese Seite offen, Sie benötigen Informationen daraus.

Stellen Sie nun in Auth0 die Verbindung her:

Klicken Sie auf Authentication > Social
Klicken Sie auf "Create Connection"
Wählen Sie die letzte Option, "Create Custom"
Geben Sie der Connection einen Namen.
Übertragen Sie aus der WordPress Plugin Seite:
- Authorization URL
- Token URL
- Scope
- Client ID
- Client Secret
Notieren Sie den "Userinfo Endpoint".

Tragen Sie abschliessend diesen Code in das Feld "Fetch User Profile Script" ein, ersetzen Sie dabei den "Userinfo Endpoint":

function(accessToken, ctx, cb) {
    request({
      method: 'GET',
      url: '<Userinfo Endpoint>',
      headers: {
        Authorization: 'Bearer ' + accessToken
      }
    }, function(err, resp, body) {

      if(err) {
        return cb(err)
      }

      if(resp.statusCode !== 200) {
        return cb(new Error('StatusCode:' + resp.statusCode));
      }

      let bodyParsed;
      try {
        bodyParsed = JSON.parse(body);
      } catch (jsonError) {
        return cb(new Error(body));
      }
      const profile = {
        user_id: "anonymous",
        name: "none"
      };
      cb(null, profile);
    }
  );
}

Klicken Sie auf "Save changes"
Klicken Sie auf "Try Connection"

Sie sollten nun auf Ihre Webseite gelenkt werden und diese verwenden können. Wenn das erfolgreich ist, können Sie die neue "Social connection" ihrer "Application" hinzufügen.

ERP, Shop oder SSO

Sollen sich nur Nutzer anmelden können, die bereits in Ihrem ERP, Shop oder Firmen-Login sind, binden Sie dieses per Single-Sign-On an:

Unter Authentication > Enterprise > SAML richten Sie SSO mit Ihrem ERP, Shop oder Ihrer Webseite ein.
Unter Authentication > Social können Sie zusätzlich Anbieter wie Google zulassen.

In K3 aktivieren

Wechseln Sie nun im K3 in die Optionen Ihres Konfigurators.
Dort in den Tab Konfigurator-Zugang.
Schalten Sie die Anmeldung ein.
Tragen Sie "domain" und "clientId" Ihrer Auth0-Application ein.
Speichern Sie und vergessen Sie nicht, zu veröffentlichen.

Damit erfragt die Live Version Ihres Konfigurators eine Anmeldung über Auth0.

Daten an den Konfigurator übergeben

Sie können pro angemeldetem Nutzer Daten in den Konfigurator übernehmen lassen – bevor der Konfigurator lädt. Damit steht z.B. die richtige Preisliste sofort fest. Übergeben werden können:

Daten	Wirkung im Konfigurator
Preisliste	Wählt die Preisliste (über deren Code).
Händler	Startet den Händler-Konfigurator (über den Händler-Code).
Kontaktdaten	Füllt das Kontaktformular vor (Name, E-Mail, Telefon, Adresse …).
Merkmale	Beliebige Vorauswahlen (z.B. Farbe, Breite) über die Variablen-Keys.

So funktioniert die Übergabe – egal welches System

Das Prinzip ist immer dasselbe, unabhängig davon, ob Sie ein eigenes Benutzer-Management, WordPress oder ein ERP angebunden haben:

Der Konfigurator erwartet die Daten in festen "Fächern" (Auth0 nennt sie Claims) mit dem Namespace https://k3-konfigurator.de/. Diese Fächer sind immer gleich: pricelist, dealer, attributes, contact.
Eine kleine Action in Auth0 legt Ihre Nutzerdaten in diese Fächer. Die Action ist der Übersetzer zwischen Ihrem System und dem Konfigurator.
Woher die Daten kommen, hängt von Ihrem System ab – deshalb sieht die Action je nach Fall etwas anders aus. Der Konfigurator merkt davon nichts; für ihn sind die Fächer immer gleich befüllt.

Name und E-Mail kommen dabei automatisch aus dem Login – dafür ist keine Action nötig.

Beim eigenen Benutzer-Management

Hier pflegen Sie die Daten direkt am Auth0-Nutzer. Die Action kopiert sie nur in die Fächer – sie ist universell und muss nie geändert werden.

Schritt 1 – Action anlegen (einmalig):

Öffnen Sie Actions > Library > Create Action > Build from scratch.
Name: z.B. K3 Claims, Trigger: Login / Post Login.
Ersetzen Sie den Code vollständig durch:

exports.onExecutePostLogin = async (event, api) => {
  const ns = "https://k3-konfigurator.de/";
  const k3 = (event.user.app_metadata && event.user.app_metadata.k3) || {};
  for (const key of Object.keys(k3)) {
    api.idToken.setCustomClaim(ns + key, k3[key]);
  }
};

Klicken Sie Deploy.
Öffnen Sie Actions > Triggers > post-login und ziehen Sie die Action K3 Claims per Drag & Drop in den Ablauf. Klicken Sie Apply.

Schritt 2 – Daten pro Nutzer pflegen:

Tragen Sie im jeweiligen Nutzer unter User Management > Users > [Nutzer] > Metadata > app_metadata ein k3-Objekt ein – nur mit den Feldern, die Sie brauchen:

{
  "k3": {
    "pricelist": "wholesale",
    "dealer": "dealer-42",
    "attributes": { "color": "red", "width": "120" },
    "contact": {
      "name": "Erika Mustermann",
      "email": "erika@example.com",
      "phone": "+49 151 12345678",
      "company": "Muster GmbH",
      "taxID": "DE123456789"
    }
  }
}

Minimalbeispiel – nur eine Telefonnummer, Name und E-Mail kommen aus dem Login:

{ "k3": { "contact": { "phone": "+49 151 12345678" } } }

Bei angebundenen Systemen (ERP, Shop, CMS)

Hier liefert Ihr System die Nutzerdaten schon bei der Anmeldung mit – im Nutzerprofil. Die Action liest die passenden Felder aus diesem Profil und legt sie in die Fächer. Welche Felder verfügbar sind, hängt von Ihrem System ab (z.B. die SAML-Attribute Ihres ERP oder die Profilfelder Ihres CMS). Deshalb müssen Sie hier die Quell-Feldnamen anpassen:

exports.onExecutePostLogin = async (event, api) => {
  const ns = "https://k3-konfigurator.de/";
  // Nutzerprofil aus dem angebundenen System.
  // Passen Sie die Feldnamen (rechts) an das an, was Ihr System liefert:
  const src = event.user;

  api.idToken.setCustomClaim(ns + "pricelist", src.pricelist);
  api.idToken.setCustomClaim(ns + "dealer", src.dealer);
  api.idToken.setCustomClaim(ns + "contact", {
    phone: src.phone_number,
    company: src.company,
  });
};

Was liefert mein System?

Was in event.user ankommt, sehen Sie nach einer Test-Anmeldung in Auth0 unter User Management > Users > [Nutzer] (Ansicht "Raw JSON") oder im Log Ihrer Action. Daran orientieren Sie die Feldnamen in der Action.

Welche Kontaktfelder gibt es?

Im Fach contact sind diese Felder erlaubt: name, email, phone, address, city, zip, country, company, taxID, remark. Alle sind optional.

Gut zu wissen

pricelist und dealer sind die Codes der Preisliste bzw. des Händlers (nicht der Anzeigename).
Bei attributes sind die Schlüssel die Variablen-Keys Ihres Konfigurators; color und width sind nur Beispiele.
Nach jeder Änderung an der Action oder an den Nutzerdaten muss sich der Nutzer neu anmelden, damit ein frisches Token mit den neuen Werten geladen wird.

Sicherheit

Die Werte aus Auth0 sind fälschungssicher (signiertes Token) und gewinnen gegenüber Werten in der URL. Legt der Händler eine Preisliste fest und Auth0 eine andere, so gilt die aus Auth0.

Nur ohne Web Component

Die Anmeldung über Auth0 funktioniert, wenn der Konfigurator als eigene Seite (Link/iFrame) läuft – nicht als eingebettete Web Component, da Auth0 eine Weiterleitung benötigt.

Auth0​

Anmelde-Systeme anbinden​

Eigenes Benutzer-Management​

WordPress und andere CMS​

ERP, Shop oder SSO​

In K3 aktivieren​

Daten an den Konfigurator übergeben​

So funktioniert die Übergabe – egal welches System​

Beim eigenen Benutzer-Management​

Bei angebundenen Systemen (ERP, Shop, CMS)​

Welche Kontaktfelder gibt es?​

Gut zu wissen​