> ## Documentation Index
> Fetch the complete documentation index at: https://dokumentation.websale.de/llms.txt
> Use this file to discover all available pages before exploring further.

# Anmeldung und Registrierung

> Alle Funktionen rund um Anmeldung und Registrierung in WEBSALE V8s, von der Gastbestellung über Double-OptIn und sichere Passwörter bis zu AutoLogin, SuperUser und externem Login.

Ob ein Käufer in Ihrem Shop ein Konto anlegen kann, ob er es muss und wie er sich anmeldet, entscheiden Sie. WEBSALE V8s reicht von der reinen Gastbestellung bis zum vollständig geschlossenen B2B-Shop, in dem ohne Anmeldung nichts sichtbar ist.

Diese Seite führt durch alle Bausteine: zuerst die grundlegende Entscheidung, welche Anmeldearten Sie anbieten, dann die Verfahren, mit denen Sie Konten absichern, und schließlich die Funktionen rund um bestehende Konten wie Passwortänderung, Abmeldung und Kontolöschung.

## Der zentrale Schalter: LoginMode

Alles beginnt mit einem Parameter im Abschnitt `<Login>` der `shop.config`. Er bestimmt, ob und wo der Shop überhaupt eine Anmeldung anbietet.

| Wert | Wirkung |
| - | - |
| `no` | keine Anmeldung, reine Gastbestellung. Dies ist der Standard. |
| `start` | beim Aufruf des Shops erscheint zuerst ein Anmelde-Template. Für geschlossene Shops. |
| `order` | die Anmeldung wird im Bestellablauf angeboten. |

Die Wahl ist keine reine Technikfrage. Sie entscheidet darüber, wie viel Hürde Sie zwischen Käufer und Bestellung stellen. Jede Pflichtanmeldung kostet Abschlüsse, jedes Konto bringt Wiedererkennung. Welcher Weg der richtige ist, hängt davon ab, ob Sie Laufkundschaft oder Stammkundschaft bedienen.

Referenz: [Abschnitt Login](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/kunde-anmeldung-und-kundenkonto.md#login)

## Gastbestellung

Ohne weitere Einstellungen bestellt der Käufer als Gast. Es entsteht kein Kundenkonto, und die eingegebenen Adressdaten werden nicht in der Shop-Datenbank gespeichert.

Im Bestellablauf führen die Schaltflächen den Käufer dann unmittelbar zur Eingabe der Rechnungsadresse, ohne Zwischenschritt.

Je Zahlungsart lässt sich festlegen, ob sie Gastbestellern zur Verfügung steht. So können Sie beispielsweise Kauf auf Rechnung angemeldeten Kunden vorbehalten, bei denen Sie eine Zahlungshistorie haben.

Referenz: [Abschnitt PaymentXXX-Txt](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/zahlungsarten.md)

## Registrierung und Anmeldung über die Loginseite

Einen Anmeldelink können Sie auf jeder Seite des Shops platzieren. Er führt auf die Loginseite `ws_login.htm`. Dort legen Neukunden ein Konto an, und Bestandskunden melden sich mit E-Mail-Adresse und Passwort an.

![Anmeldung Neukunde](https://mintcdn.com/websaleag-44ee7ea6/4hfNw_ScDeYUACnK/images/anmeldung_neukunde.png?fit=max\&auto=format\&n=4hfNw_ScDeYUACnK\&q=85\&s=18b587c68b6413b25783b03ecd299f83)

Anmeldung Neukunde

![Kundenkonto Anmeldung](https://mintcdn.com/websaleag-44ee7ea6/4hfNw_ScDeYUACnK/images/kundenkonto_anmeldung.png?fit=max\&auto=format\&n=4hfNw_ScDeYUACnK\&q=85\&s=9b5a5b6dd6e3a36ce36fb86ddf2e18c3)

Anmeldung Bestandskunde

Dieselbe Loginseite wird auch aus dem Bestellablauf heraus aufgerufen. Über eine Bereichsklammerung unterscheiden Sie im Template, ob der Käufer gerade bestellt oder sich außerhalb einer Bestellung anmeldet. Das ist wichtig, weil die Seite in beiden Fällen unterschiedlich formulieren sollte.

## Geschlossene B2B-Shops

In einem geschlossenen Shop sollen nicht angemeldete Besucher andere Inhalte sehen als angemeldete, oft gar keine. Deshalb läuft die Anmeldung hier über ein eigenes Template, das beim Aufruf des Shops geladen wird.

![20180424 Login Dialog Uid](https://mintcdn.com/websaleag-44ee7ea6/4hfNw_ScDeYUACnK/images/20180424_login-dialog-uid.png?fit=max\&auto=format\&n=4hfNw_ScDeYUACnK\&q=85\&s=42d61bbfae62dac0b31cdf4c8f59ef06)

### Schritt 1: Anmelde-Template anlegen

Legen Sie das Template nach Ihren Wünschen an und speichern Sie es in Ihrem Templateverzeichnis, beispielsweise unter `benutzer/templates/translation`.

### Schritt 2: Template zuweisen

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Templates>
   LoginStart = ws_login_start.htm
</Templates>
```

### Schritt 3: Aufruf aktivieren

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Login>
   LoginMode = start
</Login>
```

Damit lädt der Shop beim Aufruf das hinterlegte Anmelde-Template statt der Startseite.

Referenz: [Abschnitt Templates](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/grundlagen-und-technik.md#templates)

### Anmeldung mit Benutzername statt E-Mail-Adresse

In Geschäftskunden-Shops legitimiert sich der Käufer oft mit Kundennummer oder Benutzername, nicht mit einer E-Mail-Adresse. Für Passwort-vergessen-Mails brauchen Sie aber eine Adresse. Deshalb fordert der Shop sie nach der ersten Anmeldung nach.

Die Anmeldung per Benutzer-ID muss von WEBSALE für Ihren Shop eingerichtet werden. Im Auslieferungszustand ist sie nicht aktiv. Wenden Sie sich dafür an Ihren WEBSALE-Ansprechpartner.

Auf dem Start-Anmelde-Template kommt ein Eingabefeld für Kundennummer oder Benutzername dazu:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{!Type-SetPWRequested}
   {!Type-ForceSetEmailaddress}
      <form action="~FORM-LoginStart~" method="post">
         <label for="~WS-UserID_input~">Kundennummer oder Benutzername</label>
         <input name="~WS-UserID_input~" id="~WS-UserID_input~" type="text" value="~WS-UserID~">
      </form>
   {/!Type-ForceSetEmailaddress}
{/!Type-SetPWRequested}
```

Auf `ws_login.htm` kommt der Bereich für die Nacherfassung der E-Mail-Adresse dazu. Diese Seite sieht der Käufer direkt nach der Anmeldung:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{Type-ForceSetEmailaddress}
   <h1>E-Mail-Adresse für Ihr Kundenkonto</h1>
   <p>Bitte geben Sie Ihre E-Mail-Adresse an, mit der Sie sich zukünftig anmelden können.
      An diese Adresse gehen auch Ihre Bestelleingangsbestätigungen.</p>

   <form action="~FORM-ForceSetEMail~" method="post" autocomplete="off">
      <label for="~WS-NewEmail_input~">Neue E-Mail-Adresse *</label>
      <input type="email" name="~WS-NewEmail_input~" id="~WS-NewEmail_input~" value="~WS-NewEmail~" maxlength="80"
         {WS-NewEmail_error}class="error"{/WS-NewEmail_error}>

      <label for="~WS-EmailAgain_input~">E-Mail-Adresse wiederholen *</label>
      <input type="email" name="~WS-EmailAgain_input~" id="~WS-EmailAgain_input~" value="~WS-EmailAgain~" maxlength="80"
         {WS-EmailAgain_error}class="error"{/WS-EmailAgain_error}>

      <button type="submit">E-Mail-Adresse übernehmen</button>
   </form>
{/Type-ForceSetEmailaddress}
```

### Warenkorb nur für angemeldete Käufer

In halbgeschlossenen Shops dürfen Besucher das Sortiment sehen, aber nur angemeldete Käufer dürfen Produkte in den Warenkorb legen.

Wegweiser: [Produkte in den Warenkorb legen nur für angemeldete Käufer](https://dokumentation.websale.de/v8s/warenkorb/produkt-in-warenkorb-legen.md)

## Mehrfachkonten

Normalerweise gehört zu einer E-Mail-Adresse genau ein Konto. Mehrfachkonten heben das auf: Mehrere Konten teilen sich eine Adresse.

Das lohnt sich für eine Einkaufsabteilung mit zentraler Sammeladresse, oder für einen Einkäufer, der im Namen mehrerer Kunden bestellt und die Vorgänge getrennt halten will, ohne mehrere Postfächer zu pflegen.

Gemeinsam ist den Konten nur die E-Mail-Adresse. Rechnungsadresse, Lieferadressen, Einstellungen, Zuweisungen und Passwort werden je Konto getrennt verwaltet.

Das Passwort muss je Konto verschieden sein. Genau das macht die Konten unterscheidbar und ermöglicht eine persönliche Identifikation des jeweiligen Einkäufers.

> [!WARNING]
>
> Ändert ein angemeldeter Käufer die E-Mail-Adresse eines Mehrfachkontos, ändert sich die Adresse **aller** Konten des Verbunds mit. Das erspart die Einzelpflege, überrascht aber, wenn man es nicht weiß.

### Voraussetzungen

Aus Datenschutz- und Sicherheitsgründen sind Mehrfachkonten an drei Bedingungen geknüpft:

* Sie setzen das Double-OptIn-Verfahren für die Neukundenanmeldung ein.
* Sie haben die zwingende Bestätigung der E-Mail-Adresse integriert. Das heißt nicht, dass Sie sie für Neukunden auch anwenden müssen. Für die Anlage eines neuen Mehrfachkontos ist sie aber immer Pflicht.
* Die Funktion wurde für Ihren Shop freigeschaltet. Das gilt auch für eine Migration bestehender Adressdaten.

> [!WARNING]
>
> Auch wenn Sie Mehrfachkonten nicht anbieten, können welche vorhanden sein. Importierte Kundendaten aus Warenwirtschaft, CRM oder einem Vorgängershop bringen sie mit. Die Funktion „Passwort vergessen" muss deshalb **immer** so integriert sein, dass sie mehrere Konten zu einer Adresse behandeln kann.

Setzen Sie ein Warenwirtschaftssystem ein, klären Sie vorab mit dessen Hersteller, ob es Mehrfachkonten unterstützt.

### Schritt 1: Hinweismeldungen konfigurieren

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<LoginError-Txt>
   SubAccountCreate           = Für diese E-Mail-Adresse existiert bereits ein Konto. Möchten Sie ein weiteres anlegen?
   MaxMultipleAccountsReached = Sie haben die maximale Anzahl an Konten für diese E-Mail-Adresse erreicht.
</LoginError-Txt>
```

### Schritt 2: Im Login-Template einbinden

Meldung und Schaltfläche gehören innerhalb von `Type-LoginUser` in das Formular `FORM-LoginNewUser`:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{Type-LoginUser}
   <h1>Ich möchte ein persönliches Konto anlegen</h1>
   <form action="~FORM-LoginNewUser~" method="post" autocomplete="off">
      {MSG-SubAccountCreate}
         ~MSG-SubAccountCreate~<br>
         <input type="submit" name="~BT-SubAccountCreate~" value="anlegen">
      {/MSG-SubAccountCreate}
   </form>
{/Type-LoginUser}
```

### Schritt 3: Aktivieren

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<UserData>
   SubAccounts-Allow = yes
</UserData>
```

Zum Testen im laufenden Shop rufen Sie den Shop mit dem Parameter `?ws_subaccounts=yes` auf. Die oben genannten Bedingungen müssen dafür erfüllt sein.

Wegweiser: [Mehrfachkontenübersicht anbieten](https://dokumentation.websale.de/v8s/kundenkonto/mehrfachkontenuebersicht-anbieten.md)

## Schnellanmeldung

Die Schnellanmeldung ist ein kleines Anmeldeformular, das auf jedem Template stehen kann, typischerweise im Kopfbereich. Sie richtet sich an Bestandskunden, die bereits registriert sind.

Zwei Varianten stehen zur Wahl. In der Standardvariante landet der Käufer nach der Anmeldung im Kundenkonto. In der AJAX-Variante bleibt er, wo er ist.

![Kundenkonto Quicklogin](https://mintcdn.com/websaleag-44ee7ea6/4hfNw_ScDeYUACnK/images/kundenkonto_quicklogin.png?fit=max\&auto=format\&n=4hfNw_ScDeYUACnK\&q=85\&s=5ec7d32bc816b0dfc01afb419ea33939)

### Standardvariante

Die Standardvariante braucht eine Einstellung und ein Formular.

#### Fehlerziel festlegen

Vertippt sich der Käufer, landet er standardmäßig auf der Hinweisseite `ws_notify.htm`. Dort steht die Fehlermeldung, aber kein Eingabefeld. Der Käufer muss also erst zurücknavigieren.

Besser ist die Loginseite, denn dort kann er die Anmeldung unmittelbar wiederholen:

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Login>
   QuickLoginErrorDestinationPage = login
</Login>
```

#### Formular einbauen

Die negierte Klammerung `{![ST-LoggedIn](/v8s/referenz/tags/st/seitenzustand-und-navigation)}` blendet die Eingabefelder aus, sobald der Käufer angemeldet ist.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{!ST-LoggedIn}
   <form action="~FORM-QuickLogin~" method="post">
      E-Mail: <input type="text" name="~WS-Email_input~" value="~WS-Email~">
      Passwort: <input type="password" name="~WS-PW_input~" value="~WS-PW~">
      <input type="submit" value="Anmelden">

      <a href="~WS-LoginLink~">Neu registrieren</a>
      <a href="~WS-LoginLink~&type=RequestPW">Passwort vergessen</a>
   </form>
{/!ST-LoggedIn}
```

#### Angemeldeten Zustand anzeigen

An dieselbe Stelle gehört der umgekehrte Fall:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-LoggedIn}
   Herzlich willkommen, ~A-FirstName~ ~A-LastName~
   Sie waren zuletzt am ~WS-LastLoginDate~ um ~WS-LastLoginTime~ Uhr angemeldet.

   <a href="~WS-UserAccountLink~">Zum Kundenkonto</a>
   <a href="~WS-LogoutLink~">Abmelden</a>
{/ST-LoggedIn}
```

### AJAX-Variante

Hier bleibt der Käufer auf seiner Seite, egal ob die Anmeldung gelingt oder scheitert. Das ist die angenehmere Lösung, kostet aber deutlich mehr Integrationsaufwand.

![Kundenkonto Quicklogin Ajax (2)](https://mintcdn.com/websaleag-44ee7ea6/4hfNw_ScDeYUACnK/images/kundenkonto_quicklogin_ajax-\(2\).png?fit=max\&auto=format\&n=4hfNw_ScDeYUACnK\&q=85\&s=416b2aadf17d26b938a2411326f28c1c)

Wegweiser: Funktionsweise von WEBSALE AJAX-Integrationen

#### Voraussetzung

Der Shop muss im SSL-Only-Modus laufen. Bei Shops, die seit März 2016 ausgeliefert wurden, ist das bereits der Fall.

Wegweiser: Verschlüsselung aller Shop-Seiten (SSL-Only-Modus)

#### Fehlerziel festlegen

Wie in der Standardvariante:

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Login>
   QuickLoginErrorDestinationPage = login
</Login>
```

Die Weiterleitung findet zunächst weiterhin statt. Erst die Anpassung der Loginseite weiter unten sorgt dafür, dass statt der Weiterleitung nur die Fehlermeldung nachgeladen wird.

#### Bibliothek einbinden

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<head>
   <script src="/$WS/ws_sysdata/js/ws-system-1.8.3.js"></script>
   <script src="../<Ihr Verzeichnis>/ws-design-1.8.3.js"></script>
</head>
```

Mindestens Version 1.8.2 ist erforderlich.

Wegweiser: [WEBSALE JavaScript-Bibliothek](https://dokumentation.websale.de/v8s/materialien/websale-javascript-bibliothek.md)

#### Rückruffunktionen ergänzen

Diese vier Funktionen übernehmen Sie in Ihre Designkomponente. Sie bleiben zunächst leer und werden gefüllt, wo Sie Ladeanzeigen oder Effekte brauchen.

```javascript theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
// vor dem Absetzen der AJAX-Anfrage, beispielsweise für eine Ladeanzeige
function ws_AJAXSendLoginStart() {
}

// die AJAX-Kommunikation selbst ist fehlgeschlagen, beispielsweise bei unterbrochener Verbindung
function ws_AJAXSendLoginError() {
}

// Formular abgesendet, Meldungen konnten geladen werden
function ws_AJAXSendLoginResponseSuccess() {
}

// Formular nicht abgesendet oder Meldungen konnten nicht geladen werden
function ws_AJAXSendLoginResponseError() {
}
```

#### Formular mit IDs versehen

Sowohl das Formular als auch ein umschließendes Element brauchen eine ID.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{!ST-LoggedIn}
   <div id="quicklogin_form">
      <form action="~FORM-QuickLogin~" method="post" id="quicklogin">
         E-Mail: <input type="text" name="~WS-Email_input~" value="~WS-Email~">
         Passwort: <input type="password" name="~WS-PW_input~" value="~WS-PW~">
         <input type="submit" value="Anmelden"
            onclick="return ws_AJAXsendFormTemplate('quicklogin', '~WS-CharSet~', ws_AJAXSendLoginStart, ws_AJAXSendLoginError, 'ws_AJAXSendLoginResponseSuccess()', 'ws_AJAXSendLoginResponseError()');">
      </form>

      <a href="~WS-LoginLink~&type=LoginUser">Neu registrieren</a>
      <a href="~WS-LoginLink~&type=RequestPW">Passwort vergessen</a>
   </div>
{/!ST-LoggedIn}
```

Wegweiser: Syntaxerklärung der onClick-Funktion

#### Anzeigebereiche anlegen

Legen Sie die Stellen fest, an denen Erfolgs- und Fehlermeldung erscheinen sollen. Diese Elemente brauchen eine ID und bleiben leer, denn ihr Inhalt wird nachgeladen. Platzieren Sie sie unmittelbar beim Formular.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div id="quicklogin_error">
   {WS-TplComment}
      <!-- Fehlermeldung, Inhalt kommt aus ws_login.htm -->
   {/WS-TplComment}
</div>

<div id="quicklogin_success">
   {WS-TplComment}
      <!-- Erfolgsmeldung, Inhalt kommt aus ws_user_account.htm -->
   {/WS-TplComment}
</div>
```

Weitere Bereiche lassen sich nach demselben Muster nachladen, beispielsweise ein Symbol, das den Anmeldezustand anzeigt:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<div id="quicklogin_icon">
   <img src="quicklogin_icon_orange.png" alt=""> Anmelden
</div>
```

#### Loginseite anpassen

Auf `ws_login.htm` legen Sie innerhalb von `{ST-Ajax}` je Anzeigebereich einen AJAX-Bereich an. Verwenden Sie die eben vergebenen IDs. Der Bereich für die Erfolgsmeldung bleibt hier leer.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-Ajax}
   {MSG-Login_Notify}
      <WS-Ajax-quicklogin_error>
         ~MSG-Login_Notify~
      </WS-Ajax-quicklogin_error>

      <WS-Ajax-quicklogin_success>
      </WS-Ajax-quicklogin_success>

      <WS-Ajax-quicklogin_icon>
         <img src="quicklogin_icon_orange.png" alt=""> Anmelden
      </WS-Ajax-quicklogin_icon>
   {/MSG-Login_Notify}
{/ST-Ajax}
```

#### Kundenkontoseite anpassen

Auf `ws_user_account.htm` ist es umgekehrt: Der Fehlerbereich bleibt leer, der Erfolgsbereich trägt die Begrüßung. Zusätzlich leert ein AJAX-Bereich mit der ID des Formulars dessen Eingabefelder.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-Ajax}
   <WS-Ajax-quicklogin_error>
      <!-- entfernt die Fehlermeldung im Erfolgsfall -->
   </WS-Ajax-quicklogin_error>

   <WS-Ajax-quicklogin_success>
      {ST-LoggedIn}
         Herzlich willkommen, ~A-FirstName~ ~A-LastName~
         Sie waren zuletzt am ~WS-LastLoginDate~ um ~WS-LastLoginTime~ Uhr angemeldet.

         <a href="~WS-UserAccountLink~">Zum Kundenkonto</a>
         <a href="~WS-LogoutLink~">Abmelden</a>
      {/ST-LoggedIn}
   </WS-Ajax-quicklogin_success>

   <WS-Ajax-quicklogin>
      <!-- entfernt die Eingabefelder im Erfolgsfall -->
   </WS-Ajax-quicklogin>

   <WS-Ajax-quicklogin_icon>
      <img src="quicklogin_icon_green.png" alt="">
   </WS-Ajax-quicklogin_icon>
{/ST-Ajax}
```

## Erstanmeldung nach Bestellung

Nach einer Gastbestellung liegen alle Daten bereits vor. Der Käufer muss nur noch ein Passwort wählen, um daraus ein Konto zu machen. Das verlegt die Registrierungsfrage ans Ende des Kaufs, wo sie den Abschluss nicht mehr gefährdet.

Der Shop bietet die Felder nur an, wenn zur hinterlegten E-Mail-Adresse noch kein Konto existiert, weder ein Kundenkonto noch ein Mehrfachkonto noch ein Newsletterkonto. Versucht der Käufer es dennoch, beispielsweise über einen zweiten Browser-Tab, erscheint eine Fehlermeldung.

Beim Anlegen übernimmt der Shop die Rechnungsadresse und speichert die getätigte Bestellung als erste Bestellung des neuen Kontos.

Eine Freischaltung ist nicht erforderlich.

### Auf der Bestelleingangsbestätigungsseite

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-CreateAccountAfterGuestOrder}
   <form action="~FORM-CreateAccountAfterGuestOrder~" method="post" autocomplete="off">
      Mit diesen Daten registrieren<br>

      Ihr Passwort:
      <input type="password" maxlength="64" name="~WS-CreateAccountAfterGuestOrder_pw_input~" value=""
         class="inputfield_ws_login~WS-CreateAccountAfterGuestOrder_pw_error~">

      Passwort wiederholen:
      <input type="password" maxlength="64" name="~WS-CreateAccountAfterGuestOrder_pwagain_input~" value=""
         class="inputfield_ws_login~WS-CreateAccountAfterGuestOrder_pwagain_error~">

      <input name="~BT-CreateAccountAfterGuestOrder~" type="submit" value="registrieren" class="button">
   </form>
{/ST-CreateAccountAfterGuestOrder}
```

### Auf der Loginseite

Hier landet der Käufer nach dem Absenden. Der Bereich deckt die drei möglichen Ausgänge ab.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{Type-CreateAccountAfterGuestOrder}
   {ST-CreateAccountAfterGuestOrder_method(websale)}
      <form action="~FORM-CreateAccountAfterGuestOrder~" method="post" autocomplete="off">

         {ST-CreateAccountAfterGuestOrder_cancel}
            Der Vorgang wurde abgebrochen, es wurde kein Kundenkonto angelegt.
         {/ST-CreateAccountAfterGuestOrder_cancel}

         {ST-CreateAccountAfterGuestOrder_success}
            Ihr Kundenkonto wurde angelegt. Sie können sich nun mit Ihren Zugangsdaten anmelden.
         {/ST-CreateAccountAfterGuestOrder_success}

         {ST-CreateAccountAfterGuestOrder_error}
            Beim Anlegen des Kundenkontos ist ein Fehler aufgetreten. Bitte prüfen Sie Ihre Eingaben.
         {/ST-CreateAccountAfterGuestOrder_error}

         {!ST-CreateAccountAfterGuestOrder_success}
            Ihr Passwort:
            <input type="password" maxlength="64" name="~WS-CreateAccountAfterGuestOrder_pw_input~" value=""
               class="inputfield_ws_login~WS-CreateAccountAfterGuestOrder_pw_error~">

            Passwort wiederholen:
            <input type="password" maxlength="64" name="~WS-CreateAccountAfterGuestOrder_pwagain_input~" value=""
               class="inputfield_ws_login~WS-CreateAccountAfterGuestOrder_pwagain_error~">

            <a href="~WS-CreateAccountAfterGuestOrder_cancellink~" class="button">abbrechen</a>
            <input name="~BT-CreateAccountAfterGuestOrder~" type="submit" value="registrieren" class="button">
         {/!ST-CreateAccountAfterGuestOrder_success}

      </form>
   {/ST-CreateAccountAfterGuestOrder_method(websale)}
{/Type-CreateAccountAfterGuestOrder}
```

## Sicheres Anmeldeverfahren

Angriffe auf Kundenkonten laufen nach zwei Mustern: Entweder werden Passwörter zu einer bekannten Adresse durchprobiert, oder ein geleaktes Passwort wird an vielen Shops getestet. Gegen beides hilft dasselbe, nämlich gute Passwörter und eine Bremse bei Fehlversuchen.

Aktiviert und eingestellt wird das gesicherte Anmeldeverfahren im Abschnitt `<SecureLogin>` der `shop.config`.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<SecureLogin>
   Allow = yes
</SecureLogin>
```

### Was sich einstellen lässt

Für die Neukundenanmeldung:

* Mindestlänge des Passworts
* Mindestanzahl an Buchstaben, Ziffern und Sonderzeichen
* das Passwort darf nicht mit der E-Mail-Adresse übereinstimmen oder wesentlicher Bestandteil davon sein
* das Passwort darf nicht aus einer bestimmten Anzahl gleicher Zeichen in Folge bestehen
* zu einfache oder systematische Passwörter können abgelehnt werden

Für die Bestandskundenanmeldung:

* Sperrung des Kontos oder der IP-Adresse für eine bestimmte Zeit nach einer bestimmten Anzahl von Fehlversuchen

Ohne Angabe einer Mindestlänge arbeitet der Shop mit sechs Zeichen. Nach oben ist bei 64 Zeichen Schluss, ein höherer Wert wird auf 64 gekappt. Unsere Empfehlung liegt über acht Zeichen.

Zwei weitere Einstellungen akzeptieren nur Werte in einem bestimmten Bereich und schalten sich sonst selbst ab: `PWRepeatedSignsFault-Value` wirkt nur zwischen 2 und 16, `EMail-PWSimilaritySignsFault-Value` nur zwischen 3 und 16. Ein Wert außerhalb dieser Grenzen schaltet die jeweilige Prüfung stillschweigend aus.

### Wo die übrigen Einstellungen stehen

| Thema | Abschnitt der `shop.config` |
| - | - |
| Templates für die Anmeldeseiten | `<Templates>` |
| Speicherung kritischer Kundendaten | `<[UserData](/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/kunde-anmeldung-und-kundenkonto#userdata)>` |
| Texte für Fehlermeldungen | `<LoginError-Txt>` |
| Texte für Erfolgsmeldungen | `<LoginSuccess-Txt>` |

Alle Kundendaten werden verschlüsselt gespeichert.

Neben der eingebauten Authentifizierung ist auch eine externe Authentifizierung beim Shopstart möglich. Informationen dazu erhalten Sie von Ihrem WEBSALE-Ansprechpartner.

Referenz: [Abschnitt SecureLogin](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/kunde-anmeldung-und-kundenkonto.md#securelogin)

### Passwortampel

Die Passwortampel zeigt dem Käufer schon beim Tippen, wie gut sein Passwort ist. Sie arbeitet mit zwei Schwellen.

![20180530 Passwortampel](https://mintcdn.com/websaleag-44ee7ea6/4hfNw_ScDeYUACnK/images/20180530_passwortampel.png?fit=max\&auto=format\&n=4hfNw_ScDeYUACnK\&q=85\&s=c004b70ba8078f0a03e7a8bc2852ea52)

| Farbe | Bedeutung |
| - | - |
| rot | mindestens eine Prüfung schlägt fehl, das Passwort würde abgelehnt |
| gelb | das Passwort wird akzeptiert, erfüllt aber nicht die zusätzlichen Gelb-Grenzen |
| grün | das Passwort wird akzeptiert und erfüllt auch die Gelb-Grenzen |

Die Rot-Grenze ergibt sich aus den ohnehin vorhandenen Einstellungen im Abschnitt `<SecureLogin>`. Die Gelb-Grenze legen Sie zusätzlich fest, über Parameter mit `Yellow` im Namen.

Ohne Gelb-Grenzen zeigt die Ampel nie Gelb. Sie springt dann direkt von Rot auf Grün, sobald das Passwort akzeptiert wird.

Ein Beispiel: Steht die Mindestlänge auf 6 und die Gelb-Grenze auf 8, dann wird ein Passwort mit sieben Zeichen akzeptiert, die Ampel kennzeichnet es aber als nur mäßig sicher.

#### Einstellungen

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<SecureLogin>
   Allow                               = yes
   PWMinLength-Value                   = 6    # Mindestlänge, empfohlen mindestens 8
   PWMinLength-Yellow-Value            = 8    # ab hier zeigt die Ampel grün
   PWRepeatedSignsFault-Value          = 4    # Fehler bei 4 gleichen Zeichen in Folge
   PWMinCharacters-Value               = 2
   PWMinCharacters-Yellow-Value        = 4
   PWMinNumerics-Value                 = 0
   PWMinNumerics-Yellow-Value          = 1
   PWMinSpecialCharacters-Value        = 0
   PWMinSpecialCharacters-Yellow-Value = 2
   PWMaxSuccessiveNumerics-Value       = 4    # höchstens 4 aufeinanderfolgende Ziffern
   PWBlackListedStrings-List           = qwertz,asdfgh,password
   EMail-PWSimilaritySignsFault-Value  = 4
</SecureLogin>
```

Der Parameter für die Mindestlänge existiert in zwei Schreibweisen. Der Shop liest zuerst `PWMinLenght-Value` mit vertauschten Buchstaben und greift nur dann auf `PWMinLength-Value` zurück. Beide funktionieren also, auch bei der Gelb-Variante. Verwenden Sie in neuen Konfigurationen die korrekte Schreibweise.

Die Prüfung gegen `PWBlackListedStrings-List` ignoriert Groß- und Kleinschreibung. Leerzeichen in der Liste entfernt der Shop selbst, Sie können also nach Belieben ausrichten.

Gelb-Grenzen sind nicht für jedes Kriterium sinnvoll und deshalb auch nicht für jedes vorhanden.

![20181030 Passwortampel](https://mintcdn.com/websaleag-44ee7ea6/4hfNw_ScDeYUACnK/images/20181030_passwortampel.png?fit=max\&auto=format\&n=4hfNw_ScDeYUACnK\&q=85\&s=06cebe8674f62e96d8fcdd211664d785)

#### Hinweistexte

Zu einer gelben Ampel gehört immer ein Text, sonst weiß der Käufer nicht, was ihm fehlt. Die Texte stehen ebenfalls im Abschnitt `<SecureLogin>`.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<SecureLogin>
   NewPWLength-Yellow-Txt = Ihr Passwort sollte mindestens ~PWMinLenght-Yellow~ Zeichen lang sein.
   Error9-Yellow-Txt      = Das Passwort sollte nicht mehr als ~PWMaxSuccessiveNumerics-Yellow~ aufeinanderfolgende Ziffern enthalten.
   Error8-Txt             = Das Passwort darf keine Zeichenfolgen enthalten, die zu leicht zu erraten sind.
</SecureLogin>
```

> [!WARNING]
>
> Die Platzhalter in diesen Texten tragen **kein** `-Value` am Ende, obwohl die zugehörigen Parameter es tragen. Es heißt `~PWMinLenght-Yellow~`, nicht `~PWMinLenght-Yellow-Value~`. Ein falsch geschriebener Platzhalter wird nicht ersetzt und erscheint im Klartext auf der Seite.

#### Loginseite anpassen

Unterhalb des Passwortfelds und innerhalb des Formulars kommen zwei Elemente dazu:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-LoginNewUser~">
   <div class="password_valid_p">
      <div class="password_valid_c"></div>
   </div>
   <div class="password_valid_txt"></div>
</form>
```

Am Ende des Bodys steht das Tag, das die Einstellungen aus `<SecureLogin>` an das JavaScript übergibt:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<body>
   ~WS-SecureLoginConfigurationJS~
</body>
```

Das Modul „Passwort-Ampel" machen Sie über die WEBSALE JavaScript-Bibliothek für die Loginseite verfügbar. Nutzen Sie dafür das PageSpeed-Tool und ordnen Sie das Modul der passenden Gruppierung zu, beispielsweise `ws_login`.

Wegweiser: [JavaScript, jQuery](https://dokumentation.websale.de/v8s/templates/javascript-und-jquery.md)

Gestartet wird die Ampel am Ende des Bodys:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<script>
$(document).ready(function(){
   $("[name='input_login_new_pw']").ws_checkPassword({
      passwordObj: ws_secureLoginConfiguration
   })
})
</script>
```

#### CSS

```css theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
.red_password    { width: 20%;  background: red; }
.green_password  { width: 100%; background: green; }
.yellow_password { background: yellow; }  /* Breite wird automatisch gesetzt */

.password_valid_c { height: 4px; }
```

Verwenden Sie diese Klassennamen, ist nichts weiter zu tun. Bei abweichenden Namen übergeben Sie sie beim Start:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<script>
$("[name='input_login_new_pw']").ws_checkPassword({
   passwordObj: ws_secureLoginConfiguration,
   redClass: 'red_password',
   yellowClass: 'yellow_password',
   greenClass: 'green_password',
   errorTxtEl: '.password_valid_txt',
   strengthContainer: '.password_valid_c',
   inputPasswordSelector: "[name='input_login_new_pw']",
   inputEmailSelector: "[name='input_login_new_email']"
})
</script>
```

Wegweiser: [CSS](https://dokumentation.websale.de/v8s/templates/css.md)

### Zwangsänderung des Passworts bei Neukunden

Legt eine Warenwirtschaft Kundenkonten automatisch an, vergibt sie oft ein leicht erratbares Passwort, beispielsweise die Postleitzahl des Unternehmens. Solche Kunden lassen sich zwingen, nach der ersten Anmeldung ein eigenes Passwort zu setzen.

> [!WARNING]
>
> Die Funktion betrifft ausschließlich Konten, die über ein Warenwirtschaftssystem angelegt wurden. Kunden, die sich im Shop selbst registriert haben, sind nicht betroffen.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<UserData>
   NewUserPWChangeRequired = yes
</UserData>
```

Der Käufer landet nach seiner ersten Anmeldung auf der Loginseite im Modus „Passwort ändern" und kommt dort erst wieder weg, wenn er ein neues Passwort gesetzt hat. Sagen Sie ihm das, sonst wirkt die Seite wie ein Fehler:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{A-UserMustChangePW}
   Bitte vergeben Sie ein eigenes Passwort, um fortzufahren.
{/A-UserMustChangePW}
```

## Double-OptIn

Das Double-OptIn-Verfahren prüft, ob der Käufer die angegebene E-Mail-Adresse korrekt eingegeben hat und tatsächlich Zugriff darauf hat. Drei Stufen stehen zur Wahl.

| Stufe | Ablauf |
| - | - |
| zwingende Bestätigung | Der Käufer erhält einen Aktivierungslink und kann sich erst danach anmelden. |
| freiwillige Bestätigung | Der Käufer erhält einen Bestätigungslink, kann das Konto aber sofort nutzen. |
| keine Bestätigung | Es wird nichts versendet und nichts geprüft. |

Der Unterschied ist ein Abwägen. Die zwingende Bestätigung liefert saubere Adressen, unterbricht aber den Kauf. Die freiwillige Bestätigung lässt den Kauf laufen und sammelt die Bestätigungen nach und nach ein.

Die Gültigkeit unterscheidet sich: Der **Aktivierungslink** der zwingenden Bestätigung gilt eine Stunde und lässt sich genau einmal verwenden. Diese Stunde ist nicht konfigurierbar. Der **Bestätigungslink** der freiwilligen Bestätigung gilt unbegrenzt.

Klickt ein Käufer den freiwilligen Bestätigungslink nicht und meldet sich später erneut an, versendet der Shop die Mail noch einmal.

Für die Anlage eines Mehrfachkontos ist die zwingende Bestätigung immer Pflicht, unabhängig davon, was Sie für gewöhnliche Neukunden eingestellt haben.

Ob eine Adresse bestätigt wurde, geht sowohl in die Bestelldaten als auch in den Kundendatenabgleich mit einem Warenwirtschaftssystem ein.

Auch die Änderung einer E-Mail-Adresse läuft über das Verfahren: Die neue Adresse wird erst übernommen, wenn der Käufer den Link angeklickt hat. Auch dieser Link gilt eine Stunde und nur einmal.

### Zwingende Bestätigung einrichten

**E-Mail-Template** mit dem Aktivierungslink:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<a href="~WS-DoubleOptInLink~">Bitte klicken Sie diesen Link, um Ihr neues Kundenkonto zu aktivieren</a>
```

**Versandeinstellungen:**

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<NewCustomerDoubleOptInMail>
   Subject-Txt   = Bitte bestätigen Sie Ihr Kundenkonto
   SenderAddress = absender@ihre-domain.de
   SenderName    = Ihre Firma
   Template      = mail_doubleoptin.htm
</NewCustomerDoubleOptInMail>
```

**Meldungen:**

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<LoginError-Txt>
   NoDoubleOptIn                  = Ihr Konto ist noch nicht aktiviert.
   InvalidDoubleOptInLink         = Der Authentifizierungslink ist nicht mehr gültig.
   DoubleOptInNewCustomerLoggedIn = Sie können das Benutzerkonto nicht aktivieren, da Sie bereits angemeldet sind.
</LoginError-Txt>

<LoginSuccess-Txt>
   NewCustomerDoubleOptInSent    = Eine E-Mail mit einem Aktivierungslink wurde versendet.
   NewCustomerDoubleOptInSuccess = Ihr Konto wurde aktiviert. Sie können sich jetzt anmelden.
</LoginSuccess-Txt>
```

**Meldungen einbinden**, auf dem Login- oder LoginStart-Template:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{MSG-DoubleOptInNewCustomerSent}
   ~MSG-DoubleOptInNewCustomerSent~
{/MSG-DoubleOptInNewCustomerSent}

{MSG-DoubleOptInNewCustomerSuccess}
   ~MSG-DoubleOptInNewCustomerSuccess~
{/MSG-DoubleOptInNewCustomerSuccess}
```

### Freiwillige Bestätigung einrichten

**E-Mail-Template** mit dem Bestätigungslink:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<a href="~WS-VoluntaryDoubleOptInVerificationLink~">Bitte klicken Sie auf diesen Link, um Ihre E-Mail-Adresse zu bestätigen</a>
```

**Versandeinstellungen:**

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<CustomerVoluntaryDoubleOptInMail>
   Subject-Txt   = Bitte bestätigen Sie Ihre E-Mail-Adresse
   SenderAddress = absender@ihre-domain.de
   SenderName    = Ihre Firma
   Template      = mail_verify.htm
</CustomerVoluntaryDoubleOptInMail>
```

**Meldung** und ihre Einbindung auf dem Start-Template:

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<LoginSuccess-Txt>
   DoubleOptInVoluntaryEmailVerificationSuccess = Vielen Dank, Sie haben Ihre E-Mail-Adresse bestätigt.
</LoginSuccess-Txt>
```

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{MSG-DoubleOptInVoluntaryEmailVerificationSuccess}
   ~MSG-DoubleOptInVoluntaryEmailVerificationSuccess~
{/MSG-DoubleOptInVoluntaryEmailVerificationSuccess}
```

### Bestätigung beim Ändern der E-Mail-Adresse

**E-Mail-Template:**

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<a href="~WS-DoubleOptInLink~">Bitte klicken Sie diesen Link, um Ihre neue E-Mail-Adresse zu bestätigen</a>
```

**Versandeinstellungen:**

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ChangeEmailDoubleOptInMail>
   Subject-Txt   = Bitte bestätigen Sie Ihre neue E-Mail-Adresse
   SenderAddress = absender@ihre-domain.de
   SenderName    = Ihre Firma
   Template      = mail_changeemail.htm
</ChangeEmailDoubleOptInMail>
```

**Meldungen:**

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<LoginError-Txt>
   InvalidDoubleOptInLink             = Der Authentifizierungslink ist nicht mehr gültig.
   DoubleOptInChangeEmailWrongAccount = Der Authentifizierungslink ist für dieses Login nicht gültig.
</LoginError-Txt>

<LoginSuccess-Txt>
   ChangeEmailDoubleOptInSent    = Eine E-Mail mit Aktivierungslink wurde versendet.
   ChangeEmailDoubleOptInSuccess = Ihre E-Mail-Adresse wurde geändert.
</LoginSuccess-Txt>
```

Die Versandmeldung binden Sie auf dem Kundenkonto-Template ein, die Erfolgsmeldung zusätzlich auf dem Login- oder LoginStart-Template, weil der Käufer den Link auch in einem anderen Browser öffnen kann:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{MSG-DoubleOptInChangeEmailSent}
   ~MSG-DoubleOptInChangeEmailSent~
{/MSG-DoubleOptInChangeEmailSent}

{MSG-DoubleOptInChangeEmailSuccess}
   ~MSG-DoubleOptInChangeEmailSuccess~
{/MSG-DoubleOptInChangeEmailSuccess}
```

### Konfiguration und Aktivierung

Die Stufe für die Neukundenanmeldung:

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Login>
   NewCustomerDoubleOptInMode = voluntary   # required | voluntary | off, Standard: required
</Login>
```

Das Verfahren selbst schalten Sie über `LoginWithDoubleOptIn-Allow` im Abschnitt `<Login>` ein.

> [!WARNING]
>
> Die Aktivierung gilt für Neukundenanmeldung **und** für das Ändern der E-Mail-Adresse. Sie lässt sich nicht auf eine der beiden Funktionen beschränken.

Zum Testen im laufenden Shop rufen Sie ihn mit `?ws_login_doubleopt_in=yes` auf.

### Welche Integration Sie brauchen

Welche der drei Integrationen nötig sind, hängt von zwei Einstellungen ab.

| Mehrfachkonten | `NewCustomerDoubleOptInMode` | zwingend | freiwillig | E-Mail ändern |
| - | - | - | - | - |
| nein | `required` | ja | nein | ja |
| nein | `voluntary` | nein | ja | ja |
| nein | `off` | nein | nein | ja |
| ja | `required` | ja | nein | ja |
| ja | `voluntary` | ja | ja | ja |
| ja | `off` | ja | nein | ja |

Zwei Dinge fallen auf: Die Integration für „E-Mail-Adresse ändern" brauchen Sie immer. Und sobald Sie Mehrfachkonten anbieten, brauchen Sie die zwingende Bestätigung ebenfalls immer, auch bei `off`.

### Was in welcher Einstellung passiert

Für alle drei Beispiele gilt, dass zur Adresse `kunde@shop.de` noch kein Login existiert.

**`required`, zwingende Bestätigung:**

1. Der Käufer legt ein Konto an, eine E-Mail mit Aktivierungslink geht heraus.
2. Er klickt den Link, das Konto ist aktiviert und die Adresse als bestätigt gespeichert.
3. Ab jetzt kann er sich anmelden.
4. Versucht er ein zweites Konto mit derselben Adresse: ohne Mehrfachkonten nicht möglich, mit Mehrfachkonten wird es angelegt und wieder ein Aktivierungslink versendet.

**`voluntary`, freiwillige Bestätigung:**

1. Der Käufer legt ein Konto an. Die Adresse gilt als nicht bestätigt, eine E-Mail mit Bestätigungslink geht heraus, und der Käufer setzt seinen Kauf sofort fort.
2. Ein zweites Konto verhält sich wie oben, benötigt aber immer die zwingende Aktivierung.
3. Den Bestätigungslink kann der Käufer zu einem beliebigen späteren Zeitpunkt klicken.

**`off`, keine Bestätigung:**

1. Der Käufer legt ein Konto an. Die Adresse gilt als nicht bestätigt, es wird nichts versendet.
2. Ein zweites Konto verhält sich wie oben, benötigt aber immer die zwingende Aktivierung.

## Freiwillige Bestätigung der E-Mail-Adresse anbieten

Angemeldeten Käufern mit unbestätigter Adresse können Sie jederzeit anbieten, sie nachträglich zu bestätigen. Ein Klick auf den Link schickt die Bestätigungsmail an die gespeicherte Adresse.

Der Nutzen liegt in der Datenqualität. Als Anreiz können Sie bestimmte Funktionen oder Bereiche Käufern mit bestätigter Adresse vorbehalten.

Führen Sie zuerst die Integrationsschritte der freiwilligen Bestätigung weiter oben durch. Danach platzieren Sie den Link, doppelt geklammert, damit er nur erscheint, wenn der Käufer angemeldet und seine Adresse unbestätigt ist:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-LoggedIn}
   {!WS-EmailVerified}
      Ihre E-Mail-Adresse ist bisher nicht bestätigt.
      Klicken Sie auf den Link, dann senden wir Ihnen eine E-Mail mit einem Bestätigungslink.

      <a href="~WS-RequestVoluntaryDoubleOptInEmailLink~">Bestätigungs-E-Mail anfordern</a>
   {/!WS-EmailVerified}
{/ST-LoggedIn}
```

Die Meldung über den erfolgten Versand gehört auf das Kundenkonto-Template:

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<LoginSuccess-Txt>
   DoubleOptInVoluntaryEmailVerificationSent = Eine E-Mail mit Bestätigungslink wurde versendet.
</LoginSuccess-Txt>
```

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{MSG-DoubleOptInVoluntaryEmailVerificationSent}
   ~MSG-DoubleOptInVoluntaryEmailVerificationSent~
{/MSG-DoubleOptInVoluntaryEmailVerificationSent}
```

## Prüfung der E-Mail-Adresse

Jede eingegebene E-Mail-Adresse wird geprüft. Wie streng, legen Sie fest:

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<SecureLogin>
   EmailCheckMode = domain
</SecureLogin>
```

| Modus | Umfang |
| - | - |
| `basic` | nicht leer, kein Leerzeichen, genau ein `@`, mindestens ein Punkt, Punkt nach dem `@`, mindestens zwei Zeichen nach dem letzten Punkt |
| `syntax` | `basic`, dazu Prüfung von Localpart und Domainpart auf zulässige Zeichen, doppelte Punkte, Punkte am Anfang und Ende sowie eine Top-Level-Domain von 2 bis 10 Zeichen |
| `domain` | `basic` und die Localpart-Prüfung aus `syntax`, dazu die Prüfung, ob für die Domain ein MX- oder A-Record existiert. Dies ist der Standard. |

> [!WARNING]
>
> Nur `domain` prüft, ob es zu der Adresse überhaupt einen erreichbaren Mailserver gibt. Ohne diese Prüfung riskieren Sie, dass Aktivierungsmails, Passwort-Links und vor allem Bestellbestätigungen nicht zugestellt werden können.

Existiert für die Rechnungs- oder Lieferadresse ein InputCheck vom Typ `Email`, wird diese Einstellung nicht berücksichtigt. Es greift dann ausschließlich die dort definierte Prüfung.

Wegweiser: [Prüfungen von Adressdaten festlegen](https://dokumentation.websale.de/v8s/adressdaten/pruefungen-von-adressdaten-festlegen.md)

## Anmeldung im Bestellablauf

Startet der Käufer aus dem Warenkorb heraus die Bestellung, können Sie ihm dort die Anmeldung anbieten. Er gibt zuerst seine E-Mail-Adresse ein und entscheidet dann zwischen drei Wegen: als Bestandskunde anmelden, neues Konto anlegen oder ohne Konto weiter.

Der Vorteil dieser Reihenfolge: Der Käufer tippt seine Adresse nur einmal, egal welchen Weg er wählt.

### Schritt 1: Anmeldeart festlegen

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Login>
   LoginMode = order
</Login>
```

### Schritt 2: Formular und E-Mail-Feld

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{MSG-Login_Notify}~MSG-Login_Notify~{/MSG-Login_Notify}

{Type-LoginUser}
   <form action="~FORM-CombinedLogin~" method="post" autocomplete="off">
      <label for="~WS-CombinedLogin_eMail_input~">E-Mail-Adresse</label>
      <input type="text" name="~WS-CombinedLogin_eMail_input~" id="~WS-CombinedLogin_eMail_input~"
         value="~WS-CombinedLogin_eMail~" maxlength="80" class="input~WS-CombinedLogin_eMail_error~">
   </form>
{/Type-LoginUser}
```

### Schritt 3: Auswahl für Bestandskunden

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<input type="radio" id="ws_combinedlogin_knownuser_check" name="~WS-CombinedLogin_radioname~"
   value="~WS-CombinedLogin_radiovalue_knownUser~" ~WS-CombinedLogin_radioselected_knownUser~>
<label for="ws_combinedlogin_knownuser_check">Ich bin bereits Kunde</label>

<label for="~WS-CombinedLogin_PWknownUser_input~">Passwort</label>
<input type="password" maxlength="64" name="~WS-CombinedLogin_PWknownUser_input~"
   value="~WS-CombinedLogin_PWknownUser~" class="input~WS-CombinedLogin_PWknownUser_error~">

<input type="submit" name="submit" value="anmelden und weiter">

Passwort vergessen? <a href="~WS-LoginLink~&type=RequestPW">Hier klicken</a>
```

### Schritt 4: Auswahl für Neukunden

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<input type="radio" id="ws_combinedlogin_newuser_check" name="~WS-CombinedLogin_radioname~"
   value="~WS-CombinedLogin_radiovalue_newUser~" ~WS-CombinedLogin_radioselected_newUser~>
<label for="ws_combinedlogin_newuser_check">Ich möchte ein neues Konto anlegen</label>

<label for="~WS-CombinedLogin_PWnewUser_input~">Passwort</label>
<input type="password" maxlength="64" name="~WS-CombinedLogin_PWnewUser_input~"
   value="~WS-CombinedLogin_PWnewUser~" class="input~WS-CombinedLogin_PWnewUser_error~">

<label for="~WS-CombinedLogin_PWAgainnewUser_input~">Passwort wiederholen</label>
<input type="password" maxlength="64" name="~WS-CombinedLogin_PWAgainnewUser_input~"
   value="~WS-CombinedLogin_PWAgainnewUser~" class="input~WS-CombinedLogin_PWAgainnewUser_error~">

<input type="submit" name="submit2" value="anmelden und weiter">
```

### Schritt 5: Auswahl für Bestellung ohne Anmeldung

Diese Option gehört in eine Klammerung `ST-Addr_Order`, damit sie nur im Bestellablauf erscheint und nicht bei einer Anmeldung außerhalb davon.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-Addr_Order}
   <input type="radio" id="ws_combinedlogin_nologin_check" name="~WS-CombinedLogin_radioname~"
      value="~WS-CombinedLogin_radiovalue_noLogin~" ~WS-CombinedLogin_radioselected_noLogin~>
   <label for="ws_combinedlogin_nologin_check">Ich möchte ohne Kundenkonto fortfahren</label>

   <input type="submit" name="submit3" value="weiter ohne Anmeldung" class="button">
{/ST-Addr_Order}
```

Alle drei Auswahlbereiche gehören in dasselbe Formular [`FORM-CombinedLogin`](https://dokumentation.websale.de/v8s/referenz/tags/form-formulare#anmeldung-und-passwort) und teilen sich das eine E-Mail-Feld aus Schritt 2.

### Schritt 6: Hinweismeldungen

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<LoginError-Txt>
   Login                     = E-Mail-Adresse und Passwort passen nicht zusammen. Bitte beachten Sie die Groß- und Kleinschreibung.
   EMail                     = Es wurde eine ungültige E-Mail-Adresse eingegeben.
   NewEmail                  = Für diese E-Mail-Adresse existiert bereits ein Konto.
   NewEmailLength            = Die gewählte E-Mail-Adresse ist zu kurz.
   NewEmailMismatch          = Die Wiederholung der E-Mail-Adresse stimmt nicht überein.
   PW                        = Ungültiges Passwort.
   NewPWLength               = Das Passwort muss mindestens 6 Zeichen lang sein.
   NewPWMismatch             = Die Wiederholung des Passworts stimmt nicht überein.
   Input                     = Bei der Eingabe sind Fehler aufgetreten. Bitte prüfen Sie Ihre Angaben.
   NoInputRequestSetPassword = Bitte geben Sie Ihre E-Mail-Adresse ein.
   NoInputLoginKnownUser     = Bitte geben Sie E-Mail-Adresse und Passwort ein.
   NoInputLoginNewUser       = Bitte geben Sie Ihre E-Mail-Adresse ein und wählen Sie ein Passwort.
   NoInputChangePassword     = Bitte geben Sie Ihr altes und Ihr neues Passwort ein.
   NoInputChangeEmail        = Bitte geben Sie E-Mail-Adresse und Passwort ein.
</LoginError-Txt>
```

### Duplikatprüfung der E-Mail-Adresse

Ohne diese Prüfung kann ein Bestandskunde als Gast bestellen und dabei andere Adressdaten angeben als die, die in seinem Konto stehen. Shopintern ist das folgenlos, weil Gastadressen nicht gespeichert werden. Problematisch wird es an der Schnittstelle: Die Warenwirtschaft erkennt die Adresse wieder und überschreibt womöglich die dort gepflegten Daten.

Die Duplikatprüfung verhindert das. Gibt ein Gast eine bereits registrierte Adresse ein, wird er zur Anmeldung aufgefordert und bekommt zusätzlich einen Link zur Passwort-vergessen-Funktion.

Die Funktion setzt voraus, dass die Loginseite mit `FORM-CombinedLogin` aufgebaut ist, also mit einem einzigen E-Mail-Feld für alle Auswahlbereiche.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Login>
   CustomerWithLoginCanOrderWithoutLogin-Allow = no   # yes | no, Standard: yes
</Login>

<LoginError-Txt>
   OrderWithoutLogin = Bitte melden Sie sich an, um Ihre Bestellung aufgeben zu können.<br>Klicken Sie <a href="~WS-LoginLink~&type=RequestPW">hier</a>, falls Sie Ihr Passwort vergessen haben.
</LoginError-Txt>
```

## Anmeldebestätigungen

Zwei verschiedene Willkommensmails stehen zur Verfügung. Sie unterscheiden sich darin, wodurch sie ausgelöst werden.

| Mail | Auslöser |
| - | - |
| Begrüßungs-E-Mail | Der Käufer hat sich im Shop registriert und erstmals seine Rechnungsadresse gespeichert. |
| Neukunden-E-Mail | Ein Kunde wurde über den Kundendatenimport neu angelegt. |

### Begrüßungs-E-Mail

Sie geht genau einmal als HTML-Mail heraus. Auf bereits bestehende Konten hat die Aktivierung keine Auswirkung.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<RegistrationMail>
   Allow         = yes
   Subject-Txt   = Vielen Dank für Ihre Registrierung
   SenderAddress = absender@ihre-domain.de
   SenderName    = Ihre Firma
   Template      = mail_registration.htm
</RegistrationMail>
```

### Neukunden-E-Mail

Als Neukunde gilt beim Import, wer eine der beiden Bedingungen erfüllt:

* Der Kunde stand vor dem Import nicht in der Datenbank.
* Der Kunde hatte vorher keine Kundennummer und bekommt beim Import eine nicht leere zugewiesen.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<NewCustomerMail>
   Allow         = yes
   Subject-Txt   = Willkommen in unserem Shop
   SenderAddress = absender@ihre-domain.de
   SenderName    = Ihre Firma
   Template      = mail_newcustomer.htm
</NewCustomerMail>
```

### Verfügbare Tags in beiden Mails

Beide Templates speichern Sie unter dem im jeweiligen Abschnitt angegebenen Namen in Ihrem Templateverzeichnis. In beiden stehen dieselben Tags zur Verfügung:

| Tag | Inhalt |
| - | - |
| [`~A-CompleteSalutation~`](https://dokumentation.websale.de/v8s/referenz/tags/a-rechnungsadresse#weitere-tags) | komplette Anrede, so wie importiert |
| `~A-Salutation~` | Anrede, so wie importiert |
| `~A-FirstName~` | Vorname |
| `~A-LastName~` | Nachname |
| `~A-E-Mail~` | E-Mail-Adresse |
| `~A-Number~` | Kundennummer |

## Subshop-Zutrittsberechtigungen

Dieses Kapitel wird derzeit überarbeitet. Bei Fragen zu diesem Thema wenden Sie sich bitte an Ihren WEBSALE-Ansprechpartner.

Betreiben Sie mehrere Subshops unter einem Hauptshop, legen Sie fest, in welchen davon sich ein Kunde anmelden darf. Drei Abstufungen sind möglich.

### In allen Subshops

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Login>
   LoginAllSubShops-Allow = yes
</Login>
```

Diesen Wert tragen Sie in der `shop.config` aller Subshops ein.

### Nur in bestimmten Subshops

Interessant ist das vor allem für Desktop- und Mobile-Subshops: Ein im Desktop-Shop neu angemeldeter Kunde soll sich sofort auch im Mobile-Shop anmelden können.

Die Einstellung wirkt unmittelbar. Eine Replikation einer angeschlossenen Warenwirtschaft ist dafür nicht nötig.

In der `shop.config` **jedes beteiligten Subshops** sperren Sie zuerst die generelle Möglichkeit und geben dann gezielt frei. Im Beispiel heißen die Subshops `Deutsch_Desktop` und `Deutsch_Mobile`.

![Hmfile Hash F976a7be](https://mintcdn.com/websaleag-44ee7ea6/4hfNw_ScDeYUACnK/images/hmfile_hash_f976a7be.png?fit=max\&auto=format\&n=4hfNw_ScDeYUACnK\&q=85\&s=258e96448ada3ed9de334ad50fb8eec1)

Im Desktop-Shop:

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Login>
   LoginAllSubShops-Allow = no
   SubshopLogin-Allow     = Deutsch_Mobile
</Login>
```

Im Mobile-Shop:

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Login>
   LoginAllSubShops-Allow = no
   SubshopLogin-Allow     = Deutsch_Desktop
</Login>
```

`SubshopLogin-Allow` nimmt eine kommaseparierte Liste von SubShopIDs auf.

> [!WARNING]
>
> Übergibt Ihr Warenwirtschaftssystem Subshop-Zuweisungen in den Kundendaten, müssen diese mit der `shop.config` übereinstimmen. Weichen sie voneinander ab, ist nach einer Replikation kein Login mehr möglich. Das gilt auch, wenn das Feld für die Subshop-Zuweisung leer übergeben wird.

### Ausschließlich im eigenen Subshop

In der `shop.config` aller Subshops sperren Sie die generelle Möglichkeit und lassen die Liste leer:

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Login>
   LoginAllSubShops-Allow = no
   SubshopLogin-Allow     =
</Login>
```

### Template für Fehlermeldungen

In allen drei Fällen brauchen Sie ein Template, das erscheint, wenn ein Kunde im falschen Subshop landet.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Templates>
   SubShopAccessDenied = ws_subshop_access_denied.htm
</Templates>
```

Auf dem Template unterscheiden Sie zwei Fälle: Der Kunde lässt sich keinem Subshop zuordnen, oder er gehört in einen anderen.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{!WS-MainSubShop}
   Leider ist es nicht möglich, Sie einem unserer Shopbereiche zuzuordnen.<br>
   Gern helfen wir Ihnen weiter unter 00 00 00 / 00 00 00
{/!WS-MainSubShop}

{WS-MainSubShop}
   Sie sind im falschen Shopbereich gelandet. Bitte versuchen Sie es über den folgenden Link:

   {WS-MainSubShop(AAA)}
      Hier sind Sie richtig: https://www.ihr-shop.de
   {/WS-MainSubShop(AAA)}

   {WS-MainSubShop(BBB)}
      This is the right one: https://www.your-shop.com
   {/WS-MainSubShop(BBB)}
{/WS-MainSubShop}
```

Nutzen Sie die AJAX-Variante der Schnellanmeldung, braucht das Template zusätzlich einen AJAX-Bereich:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-Ajax}
   <WS-Ajax-quicklogin_access_denied>
      <div class="alert alert-danger">
         Sie sind im falschen Shopbereich gelandet. Bitte melden Sie sich in Ihrem Bereich an.
      </div>
   </WS-Ajax-quicklogin_access_denied>
{/ST-Ajax}
```

Auch dort lassen sich die [`WS-MainSubShop`](https://dokumentation.websale.de/v8s/referenz/tags/ws/shop-seite-und-technik#die-tags-im-uberblick)-Klammerungen verwenden.

## Anmeldedaten ändern

Alle drei folgenden Formulare gehören auf das Anmelde-Template `ws_login.htm` und lassen sich nur dort einbauen.

### Passwort ändern

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-ChangePW~" method="post">
   Altes Passwort: <input type="password" name="~WS-PW_input~" value="">
   Neues Passwort: <input type="password" name="~WS-NewPW_input~" value="">
   Wiederholung: <input type="password" name="~WS-PWAgain_input~" value="">
   <input type="submit" value="OK" name="submit">
</form>
```

### E-Mail-Adresse ändern

Zur Sicherheit verlangt der Shop hier zusätzlich das Passwort.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-ChangeEmail~" method="post">
   Passwort: <input type="password" name="~WS-PW_input~" value="">
   Neue E-Mail-Adresse: <input type="email" name="~WS-NewEMail_input~" value="~WS-NewEmail~">
   Wiederholung: <input type="email" name="~WS-EmailAgain_input~" value="~WS-EmailAgain~">
   <input type="submit" value="OK" name="submit">
</form>
```

Bei einem Mehrfachkonto ändert sich die Adresse aller Konten des Verbunds mit.

### Passwort vergessen

Der Käufer fordert eine E-Mail mit einem oder mehreren Authentifizierungslinks an. Jeder Link gilt nur einmal und nur für begrenzte Zeit. Wird die Mail mehrfach angefordert, ist nur der Link aus der zuletzt versendeten gültig.

> [!WARNING]
>
> Diese Funktion muss **immer** so integriert sein, dass sie mehrere Konten zu einer E-Mail-Adresse behandeln kann, auch wenn Sie Mehrfachkonten nicht anbieten. Importierte Kundendaten können welche mitbringen.

#### Schritt 1: Link anfordern

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{Type-RequestPW}
   <form action="~FORM-RequestPW~" method="post">
      Ihre Benutzerkennung: <input type="text" name="~WS-Email_input~" value="~WS-Email~">
      <input type="submit" value="OK" name="submit">
   </form>
{/Type-RequestPW}
```

#### Schritt 2: E-Mail-Template

Im Mail-Template unterscheiden Sie mit [`SP-SingleData`](https://dokumentation.websale.de/v8s/referenz/tags/sp-passwort-neu-setzen#die-tags-im-uberblick), ob es ein Konto oder mehrere sind. Zu jedem Konto zeigen Sie so viele Basisinformationen, dass der Käufer sie auseinanderhalten kann.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<h1>Sie haben Ihr Passwort vergessen?</h1>

{SP-SingleData}
   {@SP-Data}
      <a href="~SP-SetPasswordLink~">Hier können Sie Ihr Passwort neu setzen</a>
      {SP-FirstName}Vorname: ~SP-FirstName~<br>{/SP-FirstName}
      {SP-LastName}Nachname: ~SP-LastName~<br>{/SP-LastName}
      {SP-Company}Firma: ~SP-Company~<br>{/SP-Company}
      {SP-CustomerID}Kundennummer: ~SP-CustomerID~<br>{/SP-CustomerID}
   {/@SP-Data}
{/SP-SingleData}

{!SP-SingleData}
   <p>Es existieren ~SP-Data~ Konten mit dieser E-Mail-Adresse. Bitte wählen Sie aus,
      für welches Konto Sie Ihr Passwort neu setzen möchten:</p>

   {@SP-Data}
      <p>
         {SP-FirstName}Vorname: ~SP-FirstName~<br>{/SP-FirstName}
         {SP-LastName}Nachname: ~SP-LastName~<br>{/SP-LastName}
         {SP-Company}Firma: ~SP-Company~<br>{/SP-Company}
         {SP-CustomerID}Kundennummer: ~SP-CustomerID~<br>{/SP-CustomerID}
         {SP-LastLogin}Zuletzt verwendet: ~SP-LastLogin~<br>{/SP-LastLogin}
         <a href="~SP-SetPasswordLink~">Hier können Sie Ihr Passwort neu setzen</a>
      </p>
   {/@SP-Data}
{/!SP-SingleData}
```

[`~SP-Data~`](https://dokumentation.websale.de/v8s/referenz/tags/sp-passwort-neu-setzen#die-tags-im-uberblick) gibt als Einzeltag die Anzahl der Konten aus und dient als Schleife über die Mehrfachkonten. Mit `{[SP-SubShopPermission](/v8s/referenz/tags/sp-passwort-neu-setzen#die-tags-im-uberblick)()}` lässt sich zusätzlich abfragen, ob sich der Kunde mit diesem Konto im angegebenen Subshop anmelden darf.

#### Schritt 3: Mail konfigurieren

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<SetPasswordMail>
   SenderAddress = absender@ihre-domain.de
   SenderName    = Ihre Firma
   Subject-Txt   = Ihr Passwort neu setzen
   Template      = mail_setpassword.htm
</SetPasswordMail>
```

#### Schritt 4: Formular „Passwort neu setzen"

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{Type-SetPWRequested}

   {!ST-SetPassword}
      Der Authentifizierungslink ist leider nicht mehr gültig.
   {/!ST-SetPassword}

   {ST-SetPassword}
      <form action="~FORM-SetPassword~" method="post">
         Ihre Benutzerkennung: <input type="text" name="~WS-Email_input~" value="~WS-Email~"><br>
         Neues Passwort: <input type="password" name="~WS-NewPW_input~" value=""><br>
         Wiederholung: <input type="password" name="~WS-PWAgain_input~" value="">
         <input type="submit" value="OK" name="~BT-SetPassword~">
      </form>
   {/ST-SetPassword}

{/Type-SetPWRequested}
```

#### Schritt 5: Hinweistexte

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<LoginSuccess-Txt>
   PasswordSet      = Das Passwort wurde erfolgreich gesetzt.
   PasswordSetLogin = Das Passwort wurde gesetzt und Sie wurden angemeldet.
</LoginSuccess-Txt>

<LoginError-Txt>
   SetPasswordUID        = Die Benutzerkennung ist nicht korrekt.
   SetPasswordPermitted1 = Der Link zum Setzen des Passworts ist nicht mehr gültig.
   SetPasswordPermitted2 = Ein Neusetzen des Passworts ist nicht möglich, da Sie bereits angemeldet sind.
</LoginError-Txt>
```

## Abmeldung

### Logout

Beim Abmelden löscht WEBSALE V8s alle Daten der Sitzung, darunter Warenkorb, Rechnungs- und Lieferadresse, Kreditkartendaten und Bankverbindung.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Templates>
   Logout = ws_logout.htm
</Templates>
```

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<a href="~WS-LogoutLink~">Abmelden</a>
```

### Timeout für automatisches Logout

Jede Sitzung wird nach einer festen Zeit automatisch geschlossen. Systemweit sind das zwei Stunden.

In sicherheitskritischen Shops, in der Regel B2B-Shops, kann der Käufer diese Zeit selbst verkürzen. Der gewählte Wert wird in der Kundendatenbank gespeichert und bei der nächsten Anmeldung wieder berücksichtigt.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<ShopTimeouts>
   10m = 10 Minuten
   20m = 20 Minuten
   30m = 30 Minuten
   40m = 40 Minuten
   50m = 50 Minuten
    1h = 1 Stunde
    2h = 2 Stunden
</ShopTimeouts>
```

Auf der Kundenkontoseite `ws_user_account.htm` bieten Sie die Auswahlliste an:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-UserAccount~" method="post">
   ~WS-ShopTimeoutList~
   <input type="submit" name="OK" value="Übernehmen">
</form>
```

Die Liste erhält die Klasse `select_shoptimeout` und lässt sich darüber gestalten.

Manche Online-Bezahlverfahren dauern länger als der eingestellte Timeout. Wird eine solche Transaktion gestartet, verlängert der Shop den Timeout mindestens auf deren maximale Dauer, damit sie abgeschlossen werden kann.

### Nach Bestellung eingeloggt bleiben

Nach einer Bestellung beendet der Shop die Sitzung automatisch. So sieht niemand die eingegebenen Adress-, Bank- und Kreditkartendaten, falls der Käufer den Arbeitsplatz verlässt, ohne den Browser zu schließen.

Der Nachteil trifft Vielbesteller: Sie müssen sich nach jeder Bestellung neu anmelden.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Basic>
   KeepSessionAfterOrder-Allow = yes
</Basic>
```

> [!WARNING]
>
> Schalten Sie das automatische Schließen nur ab, wenn Sie eine gut sichtbare Abmeldefunktion eingebaut haben und tatsächlich viele Mehrfachbesteller haben. In der Regel trifft das nur auf B2B-Shops zu.

### Kundenkonto löschen

Käufer können ihr Konto selbst löschen. Technisch wird es nicht entfernt, sondern deaktiviert. Der Käufer kann sich jederzeit ein neues Konto mit derselben Adresse anlegen, und Sie sehen gelöschte Konten weiterhin im Online-Servicebereich.

Die Löschung läuft über ein Double-OptIn-Verfahren: Der Käufer fordert im Kundenkonto eine E-Mail an, und erst der Klick auf den enthaltenen Link löscht das Konto. Dieser Link ist zeitlich unbegrenzt gültig.

Wohin der Käufer nach dem Klick kommt, hängt von seinem Zustand ab:

| Situation | Anzeige |
| - | - |
| angemeldet, eigenes aktuelles Konto gelöscht | Der Käufer wird abgemeldet, es erscheint die Logout-Seite. |
| angemeldet, ein anderes Mehrfachkonto gelöscht | Es erscheint die Mehrfachkontenübersicht. |
| nicht angemeldet | Es erscheint die Loginseite. |

> [!WARNING]
>
> Setzen Sie ein Warenwirtschaftssystem ein, klären Sie vorab mit dessen Hersteller, ob es diese Funktion unterstützt.
>
> In geschlossenen Shops ist die Funktion nicht sinnvoll, weil der Käufer sich dort kein neues Konto anlegen kann.

#### E-Mail-Template

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<h1>Kundenkonto löschen</h1>

Möchten Sie folgendes Konto wirklich löschen?<br>
~DA-FirstName~ ~DA-LastName~<br>
{DA-Company}~DA-Company~<br>{/DA-Company}
{DA-LastLogin}zuletzt verwendet: ~DA-LastLogin~<br>{/DA-LastLogin}

<a href="~DA-DeleteLink~">Ja, ich möchte dieses Konto löschen</a>
```

Zusätzlich steht `~DA-CustomerID~` für die Kundennummer zur Verfügung.

#### Versandeinstellungen

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<DeleteAccountDoubleOptInMail>
   Subject-Txt   = Möchten Sie Ihr Kundenkonto löschen?
   SenderAddress = absender@ihre-domain.de
   SenderName    = Ihre Firma
   Template      = mail_deleteaccount.htm
</DeleteAccountDoubleOptInMail>
```

#### Meldungen und Link

Die Versandmeldung gehört auf das Kundenkonto-Template:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{MSG-DoubleOptInDeleteAccountEmailSent}
   Ihnen wurde eine E-Mail zur Bestätigung zugeschickt. Bitte folgen Sie den Hinweisen darin.
{/MSG-DoubleOptInDeleteAccountEmailSent}
```

Die Erfolgsmeldung gehört auf Login- und Logout-Template, weil der Käufer je nach Zustand auf einer der beiden landet:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{MSG-DoubleOptInDeleteAccountSuccess}
   Ihr Kundenkonto wurde gelöscht.
{/MSG-DoubleOptInDeleteAccountSuccess}
```

Der Link zum Anfordern gehört ins Kundenkonto:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<a href="~WS-RequestDeleteAccountDoubleOptInEmailLink~">Kundenkonto löschen</a>
```

Wegweiser: [Mehrfachkontenübersicht anbieten](https://dokumentation.websale.de/v8s/kundenkonto/mehrfachkontenuebersicht-anbieten.md)

### Dauerhafter Login (AutoLogin)

Mit [AutoLogin](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/kunde-anmeldung-und-kundenkonto.md#autologin) bleibt der Käufer je Browser dauerhaft angemeldet. Bei kritischen Aktionen, beispielsweise Änderungen im Kundenkonto, verlangt der Shop je nach Konfiguration trotzdem noch einmal das Passwort.

Meldet sich der Käufer manuell ab, wird der AutoLogin dieses Browsers gelöscht. Ändert er Passwort oder E-Mail-Adresse, werden **alle** AutoLogins gelöscht, also auch die in anderen Browsern.

Eine Freischaltung ist nicht erforderlich.

#### Schritt 1: Einstellungen

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<AutoLogin>
   Allow                        = yes
   CriticalActions              = UserAccount,DelivAddressManage,OrderHistory,CombinedAddress,PayDeliv,PlaceOrder
   ExpiryTime                   = 10
   ReauthAfterLastUse           = 0
   ReauthAfterLastPasswordInput = 0
   ReauthAlwaysBeforeCritAction = no
   UserAgentDiffers-Allow       = yes
   CountryDiffers-Allow         = yes
   IPDiffers-Allow              = yes
</AutoLogin>
```

#### Schritt 2: Checkbox beim Login

Der Käufer stimmt über eine Checkbox zu. Zwei Tags stehen zur Wahl und entscheiden über den Umfang:

| Tag | Wirkung |
| - | - |
| [`~WS-StaySignedIn_input~`](https://dokumentation.websale.de/v8s/referenz/tags/ws/kunde-anmeldung-und-konto#die-tags-im-uberblick) | angemeldet bleiben, vor kritischen Aktionen erneute Passworteingabe |
| [`~WS-StayFullySignedIn_input~`](https://dokumentation.websale.de/v8s/referenz/tags/ws/kunde-anmeldung-und-konto#die-tags-im-uberblick) | angemeldet bleiben, keine erneute Passworteingabe |

Ergänzen Sie die gewünschten Login-Formulare, also beispielsweise `FORM-LoginNewUser`, `FORM-LoginStart`, [`FORM-QuickLogin`](https://dokumentation.websale.de/v8s/referenz/tags/form-formulare#anmeldung-und-passwort) oder `FORM-CombinedLogin`:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<form action="~FORM-QuickLogin~" method="post" id="quicklogin_input">
   <input type="checkbox" id="staysignedin" name="~WS-StaySignedIn_input~">
   <label for="staysignedin">Angemeldet bleiben</label>
</form>
```

#### Schritt 3: Meldungen (optional)

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<LoginSuccess-Txt>
   AutoLogin = Sie wurden automatisch angemeldet.
</LoginSuccess-Txt>

<LoginError-Txt>
   AutoLogin = Die automatische Anmeldung ist fehlgeschlagen. Bitte melden Sie sich erneut an.
</LoginError-Txt>
```

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{MSG-AutoLogin_success}
   ~MSG-AutoLogin_success~
{/MSG-AutoLogin_success}

{MSG-AutoLogin_error}
   ~MSG-AutoLogin_error~
{/MSG-AutoLogin_error}
```

#### Schritt 4: Loginseite anpassen

Stehen `ReauthAfterLastUse` und `ReauthAfterLastPasswordInput` auf `0` und `ReauthAlwaysBeforeCritAction` auf `no`, können Sie diesen Schritt überspringen. Dann verlangt der Shop nie eine erneute Passworteingabe.

Muss sich der Käufer erneut authentifizieren, leitet der Shop ihn auf die Loginseite und danach automatisch zur gewählten Aktion zurück. Ein Beispiel: Bei `CriticalActions = PlaceOrder` und `ReauthAlwaysBeforeCritAction = yes` landet der automatisch angemeldete Käufer nach dem Klick auf „Bestellen" zunächst auf der Loginseite und nach der Passworteingabe direkt auf der Bestellseite.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{WS-UserRequiresReAuthForCritAction}
   <form action="~FORM-ReauthUser~" method="post">
      <label for="~WS-PW_input~">Passwort *</label>
      <input type="password" maxlength="64" name="~WS-PW_input~" value="~WS-PW~"
         class="form-control{WS-PW_error} is-invalid{/WS-PW_error}">
      <button type="submit" name="submit">Weiter</button>
   </form>
{/WS-UserRequiresReAuthForCritAction}

{!WS-UserRequiresReAuthForCritAction}
   <!-- normales Anmelden und Registrieren -->
{/!WS-UserRequiresReAuthForCritAction}
```

#### Schritt 5: Gespeicherte Logins verwalten (optional)

Auf einer eigenen Seite im Kundenkonto sieht der Käufer alle gespeicherten Logins, kann einzelne löschen oder sich von allen Geräten abmelden.

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Templates>
   AutoLoginManage = ws_autologin_manage.htm
</Templates>
```

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{AL-Data}
   Anzahl der gespeicherten Logins: ~AL-Data~
   <a href="~AL-InvalidateAllLink~">Alle gespeicherten Logins löschen</a>

   {@AL-Data}
      ~DC-DateTime_setUnixtimestamp($AL-InitialDate$)~
      Erstellt am ~DC-DateTime_day(true)~.~DC-DateTime_month(true)~.~DC-DateTime_year(true)~
      um ~DC-DateTime_hours(true)~:~DC-DateTime_minutes(true)~:~DC-DateTime_seconds(true)~ Uhr

      ~DC-DateTime_setUnixtimestamp($AL-LastUsedDate$)~
      Zuletzt verwendet am ~DC-DateTime_day(true)~.~DC-DateTime_month(true)~.~DC-DateTime_year(true)~
      um ~DC-DateTime_hours(true)~:~DC-DateTime_minutes(true)~:~DC-DateTime_seconds(true)~ Uhr

      ~DC-DateTime_setUnixtimestamp($AL-LastAuthDate$)~
      Letzte Passworteingabe am ~DC-DateTime_day(true)~.~DC-DateTime_month(true)~.~DC-DateTime_year(true)~
      um ~DC-DateTime_hours(true)~:~DC-DateTime_minutes(true)~:~DC-DateTime_seconds(true)~ Uhr

      Browser: ~AL-UserAgent~
      Land: ~AL-Country~
      IP: ~AL-IPAddress~
      Typ: ~AL-Type~

      <a href="~AL-InvalidateLink~">Diesen Login löschen</a>
      {AL-IsCurrent}Wird aktuell verwendet{/AL-IsCurrent}
   {/@AL-Data}
{/AL-Data}
```

Im Kundenkonto verlinken Sie die neue Seite:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<a href="~WS-AutoLoginManageLink~">Logins verwalten</a>
```

## SuperUser-Funktion

Ein SuperUser kann sich in jedem Kundenkonto des Shops anmelden. Der typische Fall ist ein Callcenter-Mitarbeiter, der eine telefonische Bestellung für einen Kunden aufnimmt: Er sucht den Kunden über eine eigene Suchmaske, meldet sich als dieser an und bestellt in dessen Namen.

> [!WARNING]
>
> Ein angemeldeter SuperUser sieht sämtliche Kundendaten uneingeschränkt, einschließlich Bank- und Rechnungsdaten, und kann sie ändern. Vergeben Sie die Berechtigung entsprechend zurückhaltend.

Nachvollziehbar bleibt der Vorgang über die SuperUserID. Sie geht in die Bestelldaten ein, sodass jederzeit erkennbar ist, welcher SuperUser eine Bestellung ausgelöst hat.

Ist in den Kundendaten keine E-Mail-Adresse hinterlegt, fordert der Shop den SuperUser auf, eine anzugeben. Das sollte nur nach Rücksprache mit dem Kunden geschehen.

Nach einer abgeschlossenen Bestellung sollte sich der SuperUser abmelden und für die nächste Bestellung neu über seinen SuperUser-Zugang anmelden.

### SuperUser festlegen

Ein Benutzer wird zum SuperUser, indem ihm in der Kundendatenbank eine individuelle SuperUserID zugewiesen wird. Sie darf aus alphanumerischen Zeichen bestehen.

### Schritt 1: Hinweis für den angemeldeten SuperUser

Der Hinweis erscheint auch dann, wenn der SuperUser bereits im Konto eines Kunden angemeldet ist. Genau dafür ist er da.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-LoggedIn}
   {ST-SuperUser}
      Sie sind als SuperUser angemeldet.
      Ihre SuperUserID lautet: ~WS-SuperUserID~
      <a href="~WS-SSLLink~&act=user_search">Zur Kundensuche</a>
   {/ST-SuperUser}
{/ST-LoggedIn}
```

### Schritt 2: Such-Template zuweisen

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Templates>
   UserSearch = ws_superuser_search.htm
</Templates>
```

### Schritt 3: Such-Template erstellen

Das Template braucht drei Bereiche: die Anzeige, als welcher Kunde man gerade angemeldet ist, die Suche selbst und die Ergebnisliste.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<!-- als welcher Kunde bin ich angemeldet -->
Sie sind aktuell angemeldet als:
Kundennummer: ~A-Number~
~A-FirstName~ ~A-LastName~
~A-Street1~
~A-Zip~ ~A-City~
~A-Country~

<!-- Suchformular -->
<form action="~FORM-UserSearch~" name="UserSearch" method="post">
   <!-- über den OTP-Tag lässt sich auf den Zustand "Suche abgesendet" klammern -->
   <input type="hidden" name="otp1" value="formsubmit">

   <input type="text" name="~WS-UserSearch_Input~" value="~WS-UserSearch~">

   <select name="user_search_type">
      <option value="Email">E-Mail-Adresse</option>
      <option value="Number">Kundennummer</option>
      <option value="Lastname">Nachname</option>
      <option value="Company">Firma</option>
      <option value="Zip">Postleitzahl</option>
      <option value="City">Ort</option>
   </select>

   <script>
      for (i = 0; i < document.UserSearch.user_search_type.length; i++) {
         if (document.UserSearch.user_search_type.options[i].value == "~WS-UserSearchType~") {
            document.UserSearch.user_search_type.options[i].selected = true;
         }
      }
   </script>

   <input type="submit" value="Suche starten">
</form>

<!-- Ergebnisliste -->
~DC-FP1_reset~
{CAT-AdvData($UserSearch,999)}
   ~DC-FP1_set(result)~
   Die Suche ergab ~WS-UserSearchResults~ Treffer

   {@UL-Data}
      ~UL-Number~
      ~UL-FirstName~ ~UL-LastName~
      ~UL-Street1~
      ~UL-Zip~ ~UL-City~
      <a href="~UL-LoginLink~">Jetzt als ~UL-FirstName~ ~UL-LastName~ anmelden</a>
   {/@UL-Data}
{/CAT-AdvData($UserSearch,999)}

<!-- Meldung, wenn gesucht wurde, aber nichts gefunden -->
{WS-OTP1(formsubmit)}
   {!DC-FP1(result)}Es wurden keine Ergebnisse gefunden.{/!DC-FP1(result)}
{/WS-OTP1(formsubmit)}
```

Das kleine Skript setzt die zuletzt gewählte Suchart in der Auswahlliste wieder als ausgewählt. Der Kniff mit `DC-FP1` unterscheidet „nichts gefunden" von „noch nicht gesucht", denn die Klammerung `CAT-AdvData` entfällt in beiden Fällen.

### Schritt 4: Hinweis in der Bestelleingangsbestätigung

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{WS-SuperUserID}
   Diese Bestellung wurde von einem Dritten (ID: ~WS-SuperUserID~) in Ihrem Auftrag aufgegeben.
   Sollte das nicht in Ihrem Sinn sein, setzen Sie sich bitte mit uns in Verbindung.
{/WS-SuperUserID}
```

### Schritt 5: Hinweis in der Bestellhistorie

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{OH-S-CustomerAddress}
   {OH-P-SuperUserID}
      Diese Bestellung wurde von einem Dritten (ID: ~OH-P-SuperUserID~) in Ihrem Namen aufgegeben.
   {/OH-P-SuperUserID}
{/OH-S-CustomerAddress}
```

### SuperUser mit eingeschränktem Kundenkreis

Die Berechtigung lässt sich auf bestimmte Kundenkonten begrenzen. Ein so eingeschränkter SuperUser findet nur die Kunden und kann sich nur in die Konten einloggen, bei denen seine SuperUserID hinterlegt ist. Einem Konto lassen sich mehrere SuperUserIDs zuweisen.

Beides, die Einstufung als eingeschränkt berechtigt und die Zuweisung der erlaubten SuperUserIDs, erfolgt in den Kundendaten.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-LoggedIn}
   {ST-SuperUserRestricted}
      SuperUser mit eingeschränkter Berechtigung
   {/ST-SuperUserRestricted}
{/ST-LoggedIn}
```

Weitere Informationen und technische Details zur Definition und Zuweisung eingeschränkt berechtigter SuperUser erhalten Sie von Ihrem WEBSALE-Ansprechpartner.

## Externes Login mit Facebook

Der Käufer meldet sich mit seinem vorhandenen Facebook-Konto an, statt eigene Zugangsdaten für den Shop zu vergeben. Die für eine Bestellung nötigen Adressdaten fragt der Shop wie gewohnt im Bestellablauf ab und speichert sie im Kundenkonto.

Anbieten lässt sich das überall dort, wo sonst eine Anmeldung stattfindet, also vor und während des Bestellablaufs und auch nach Abschluss einer Gastbestellung.

![Externer Login Facebook2](https://mintcdn.com/websaleag-44ee7ea6/4hfNw_ScDeYUACnK/images/externer_login_facebook2.png?fit=max\&auto=format\&n=4hfNw_ScDeYUACnK\&q=85\&s=c8b9710f51faff98c28a52d537addb9d)

Ein Login über PayPal wird derzeit nicht angeboten.

### Ablauf

1. Der Käufer klickt die Schaltfläche „Einloggen mit Facebook" und wird zu Facebook weitergeleitet.
2. Nach erfolgreicher Anmeldung kehrt er in den Shop zurück.
3. Es erscheint eine Zwischenseite mit vorausgefülltem Feld für die E-Mail-Adresse. Dieser Schritt erfolgt nur beim ersten Mal.
   * Existiert zu dieser Adresse noch kein Konto, legt der Shop eines an.
   * Existiert bereits eines, gibt der Käufer einmalig sein Shop-Passwort ein, um beide Konten zu verknüpfen.
4. Der Käufer landet auf der Kundenkontoübersicht.

![Externer Login Facebook Ablauf](https://mintcdn.com/websaleag-44ee7ea6/4hfNw_ScDeYUACnK/images/externer_login_facebook_ablauf.png?fit=max\&auto=format\&n=4hfNw_ScDeYUACnK\&q=85\&s=7da4c4e4cc76abf7ba4e713e1bed0095)

> [!WARNING]
>
> Weisen Sie in Ihrer Datenschutzerklärung auf die Anmeldemöglichkeit über Facebook hin und stellen Sie transparent dar, welche Daten übermittelt werden. Beim Facebook-Login ist das ausschließlich die E-Mail-Adresse. Sprechen Sie die Formulierung mit Ihrem Datenschutzbeauftragten ab.

### Schritt 1: Einrichtung bei Facebook

Die Einrichtung erfolgt mit Ihrem eigenen Facebook-Konto. Sie erweitern es zu einem Developer Account und legen dort eine neue App an. Folgen Sie dafür der Facebook-Entwicklerdokumentation.

Wählen Sie anschließend „Facebook Login" und nehmen Sie folgende Einstellungen vor:

| Einstellung | Wert |
| - | - |
| Client-OAuth-Anmeldung | ja |
| Web-OAuth-Anmeldung | ja |
| Erneute Authentifizierung im Web durch OAuth erzwingen | ja |
| Eingebettete Browser-OAuth-Anmeldung | nein |
| Anmeldung an Geräten | nein |

Als gültige OAuth-Redirect-URIs tragen Sie ein:

```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
https://<shopdomain>/?websale8=<shopid>&act=oauth&ws_oauthtype=facebook
https://<shopdomain>
```

Bei einem Subshop stattdessen:

```text theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
https://<shopdomain>/?websale8=<shopid>.<subshopid>&act=oauth&ws_oauthtype=facebook
https://<shopdomain>
```

Vor dem Livegang muss die App im Developer Account unter „AppReview" auf öffentlich gestellt werden.

### Schritt 2: Freischaltung durch WEBSALE

Die Funktion muss von WEBSALE aktiviert werden. Teilen Sie Ihrem Ansprechpartner dafür diese Angaben aus Ihrer Facebook-App mit:

* App-ID
* App-Geheimcode im Klartext
* App Token
* die eingetragenen OAuth-Redirect-URIs

### Schritt 3: Schaltfläche auf der Loginseite

Sie gehört innerhalb von `Type-LoginUser` in das Formular. Fehlt der Bereich `Type-LoginUser`, ergänzen Sie ihn.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{Type-LoginUser}
   <form action="~FORM-CombinedLogin~" method="post" autocomplete="off">
      {BT-ExternLogin_facebook}
         <button type="submit" name="~BT-ExternLogin_facebook~" value="Login mit Facebook">
            <img src="../images/web/facebook.png" alt="Mit Facebook anmelden">
         </button>
      {/BT-ExternLogin_facebook}
   </form>
{/Type-LoginUser}
```

### Schritt 4: Konto anlegen oder verbinden

Dieser Bereich deckt beide Fälle ab, also das Anlegen eines neuen Kontos und das Verbinden mit einem bestehenden. Die Klammerung `WS-ExternLogin_facebook_Connect_pw_needed` entscheidet, welcher gerade vorliegt.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{Type-ExternLoginConnectAccounts}
   {ST-ExternLogin_facebook_connect}
      <h2>Login über Facebook</h2>
      <p>Sie haben bereits ein Konto in unserem Shop? Verbinden Sie es jetzt mit Ihrem Facebook-Konto.
         Sie haben noch keines? Dann erstellen Sie jetzt eines mit einem Klick.</p>

      <form action="~FORM-ExternLogin_facebook_connect~" method="post" autocomplete="off">
         <label for="~WS-ExternLogin_facebook_connect_email_input~">Ihre E-Mail-Adresse</label>
         <input type="email" id="~WS-ExternLogin_facebook_connect_email_input~"
            name="~WS-ExternLogin_facebook_connect_email_input~"
            value="~WS-ExternLogin_facebook_connect_email~"
            class="inputfield_ws_login~WS-ExternLogin_facebook_connect_email_error~" maxlength="80">

         {WS-ExternLogin_facebook_Connect_pw_needed}
            <p>Zu dieser E-Mail-Adresse existiert bereits ein Kundenkonto. Geben Sie bitte Ihr
               Passwort ein, um es mit Facebook zu verbinden.</p>
            <input type="password" name="~WS-ExternLogin_facebook_Connect_pw_input~" value=""
               class="inputfield_ws_login~WS-ExternLogin_facebook_Connect_pw_error~" maxlength="80">
         {/WS-ExternLogin_facebook_Connect_pw_needed}

         <input name="submit" type="submit" class="button"
            {WS-ExternLogin_facebook_Connect_pw_needed}value="Mit bestehendem Kundenkonto verbinden"{/WS-ExternLogin_facebook_Connect_pw_needed}
            {!WS-ExternLogin_facebook_Connect_pw_needed}value="Konto verbinden"{/!WS-ExternLogin_facebook_Connect_pw_needed}>
      </form>
   {/ST-ExternLogin_facebook_connect}
{/Type-ExternLoginConnectAccounts}
```

### Schritt 5: Erfolgs- und Fehlermeldungen

Die Erfolgsmeldungen gehören auf die Seite, auf der der Käufer nach dem Login landet, also in der Regel die Kundenkontoübersicht, oder in die FastInclude-Datei.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-ExternLogin_facebook_success(1)}
   Sie haben sich erfolgreich mit Facebook angemeldet.
{/ST-ExternLogin_facebook_success(1)}

{ST-ExternLogin_facebook_success(2)}
   Ihre Anmeldung mit Facebook war erfolgreich. Sie können ab sofort alle Funktionen Ihres Kundenkontos nutzen.
{/ST-ExternLogin_facebook_success(2)}

{ST-ExternLogin_facebook_success(3)}
   Ihr bestehendes Kundenkonto wurde mit Facebook verbunden.
{/ST-ExternLogin_facebook_success(3)}
```

Die Fehlermeldung gehört auf die Loginseite:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-ExternLogin_facebook_error}
   Bei Ihrem Login mit Facebook ist ein Fehler aufgetreten. Bitte prüfen Sie Ihre Angaben
   und versuchen Sie es erneut.
{/ST-ExternLogin_facebook_error}
```

### Schritt 6: Passwort und E-Mail-Adresse ausblenden

Wer sich über Facebook anmeldet, pflegt seine Zugangsdaten dort. Die Funktionen „Passwort ändern" und „E-Mail-Adresse ändern" müssen deshalb im Kundenkonto verschwinden.

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-ExternAuthenticated}
   Ihre Anmeldung erfolgte über Facebook.<br>
   Um Ihre Zugangsdaten zu ändern, wechseln Sie bitte zu Facebook.
{/ST-ExternAuthenticated}

{!ST-ExternAuthenticated}
   <a href="~WS-LoginLink~&type=ChangeEMail" class="button">E-Mail-Adresse ändern</a>
   <a href="~WS-LoginLink~&type=ChangePW" class="button">Passwort ändern</a>
{/!ST-ExternAuthenticated}
```

### Schritt 7: Übersicht der verbundenen Konten (optional)

Der angemeldete Käufer sieht unter „Ihre Social-Logins" seine verbundenen Konten und kann die Verknüpfung lösen.

Auf der Kundenkontoübersicht:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{CEA-Overview}
   <a href="~CEA-OverviewLink~">Ihre Social-Logins</a>
{/CEA-Overview}
```

Die Klammerung [`CEA-Overview`](https://dokumentation.websale.de/v8s/referenz/tags/cea#die-tags-im-uberblick) funktioniert nur, wenn der Käufer angemeldet ist.

Dazu ein eigenes Template:

```ini theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<Templates>
   ConnectedExternAccountsOverview = ws_connected_externaccounts.htm
</Templates>
```

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
<h1>Ihre Social-Logins</h1>

{CEA-Delete_error}Löschen nicht erfolgreich{/CEA-Delete_error}
{CEA-Delete_success}Verbindung wurde gelöscht{/CEA-Delete_success}

{CEA-Data}
   Es existieren ~CEA-Data~ Social-Logins für Ihr Kundenkonto.
   ~DC-Int1_set(0)~

   {@CEA-Data}
      ~DC-Int1_add(1)~

      {CEA-LoginType(facebook)}
         <h2>Kontoverknüpfung mit Facebook</h2>
         Login: ~CEA-LoginType~
         ID: ~CEA-ID~
         E-Mail: ~CEA-AdditionalInfo~

         <a href="#" onclick="$('#killme_~DC-Int1~').show();return false;">Verknüpfung lösen</a>

         <div id="killme_~DC-Int1~" style="display:none">
            Möchten Sie die Verknüpfung mit Facebook wirklich lösen?
            Wenn Sie außer diesem externen Login keine weiteren Zugangsdaten haben,
            können Sie sich anschließend nicht mehr anmelden.
            <a href="~CEA-DeleteLink~">Ja, Verknüpfung lösen</a>
         </div>
      {/CEA-LoginType(facebook)}
   {/@CEA-Data}
{/CEA-Data}
```

Existiert das Template bereits, prüfen Sie, ob das Tag [`CEA-AdditionalInfo`](https://dokumentation.websale.de/v8s/referenz/tags/cea#die-tags-im-uberblick) darin enthalten ist, und ergänzen Sie es gegebenenfalls.

### Schritt 8: Facebook-Login nach einer Gastbestellung (optional)

Auf der Bestelleingangsbestätigungsseite, innerhalb von [`ST-CreateAccountAfterGuestOrder`](https://dokumentation.websale.de/v8s/referenz/tags/bt/kundenkonto-und-anmeldung#bt-createaccountafterguestorderfacebook) und des Formulars:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-CreateAccountAfterGuestOrder}
   <form action="~FORM-CreateAccountAfterGuestOrder~" method="post" autocomplete="off">
      Möchten Sie ein Kundenkonto anlegen?

      {BT-CreateAccountAfterGuestOrder_facebook}
         <button type="submit" name="~BT-CreateAccountAfterGuestOrder_facebook~" value="Login mit Facebook">
            <img src="../images/web/facebook.png" alt="Mit Facebook anmelden">
         </button>
      {/BT-CreateAccountAfterGuestOrder_facebook}
   </form>
{/ST-CreateAccountAfterGuestOrder}
```

Und auf der Loginseite, innerhalb von `Type-CreateAccountAfterGuestOrder`:

```html theme={"theme":{"light":"github-light","dark":"github-dark"},"languages":{"custom":["/languages/websale.json"]}}
{ST-CreateAccountAfterGuestOrder_method(facebook)}
   {ST-CreateAccountAfterGuestOrder_facebook_success}
      Ihre Anmeldung mit Facebook war erfolgreich.
   {/ST-CreateAccountAfterGuestOrder_facebook_success}

   {ST-CreateAccountAfterGuestOrder_facebook_error}
      Bei Ihrem Login mit Facebook ist ein Fehler aufgetreten. Bitte versuchen Sie es erneut.
   {/ST-CreateAccountAfterGuestOrder_facebook_error}
{/ST-CreateAccountAfterGuestOrder_method(facebook)}
```

## Verwandte Themen

* Wegweiser: [Mehrfachkontenübersicht anbieten](https://dokumentation.websale.de/v8s/kundenkonto/mehrfachkontenuebersicht-anbieten.md)
* Wegweiser: [Prüfungen von Adressdaten festlegen](https://dokumentation.websale.de/v8s/adressdaten/pruefungen-von-adressdaten-festlegen.md)
* Wegweiser: [Sicherheitskonzept und Datenschutz](https://dokumentation.websale.de/v8s/sicherheitskonzept-und-datenschutz.md)
* Wegweiser: Produkte in den Warenkorb legen nur für angemeldete Käufer


## Related topics

- [Kunde, Anmeldung und Konto](https://dokumentation.websale.de/v8s/referenz/tags/ws/kunde-anmeldung-und-konto.md)
- [actions - Anmeldung & Registrierung](https://dokumentation.websale.de/konfiguration/actions-fehlertexte-e-mails/actions-anmeldung-registrierung.md)
- [Kunde, Anmeldung und Kundenkonto](https://dokumentation.websale.de/v8s/referenz/konfigurationen/shopkonfiguration-shop-config/kunde-anmeldung-und-kundenkonto.md)
- [Schaltflächen für Kundenkonto und Anmeldung](https://dokumentation.websale.de/v8s/referenz/tags/bt/kundenkonto-und-anmeldung.md)
- [Anmeldung & Benutzerverwaltung von strapi](https://dokumentation.websale.de/strapi-cms/anmeldung-benutzerverwaltung-von-strapi.md)


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.