EOL- (Login per E-Mail) - WEBSALE Dokumentation

Beim Login per E-Mail meldet sich ein Käufer ohne Passwort an. Er gibt auf der Login-Seite seine E-Mail-Adresse ein. Der Shop schickt ihm daraufhin eine E-Mail. Mit dem Inhalt dieser E-Mail ist er angemeldet. Je nach Konfiguration enthält die E-Mail entweder einen Einmalcode, den der Käufer im Shop eingeben muss, oder einen Anmeldelink, dessen Klick die Anmeldung direkt abschließt. Die EOL-Tags steuern beide Seiten dieses Ablaufs: die Login-Seite mit Anforderungs- und Codeeingabe sowie die E-Mail mit Code oder Link. Hinzu kommen zwei Schaltflächen-Tags und ein Formular-Tag, die nur in diesem Zusammenhang verwendet werden und daher hier beschrieben sind. Wegweiser: Login per E-Mail ohne Passwort · Referenz: Abschnitt EmailOTPLogin

Wo die Tags gelten

Der gesamte Ablauf im Shop läuft über ein einziges Template, nämlich das Login-Template aus dem Abschnitt Templates der Shopkonfiguration (ws_login.htm). Das Shopsystem zeigt dieses Template in drei Situationen an: als normale Login-Seite, nach dem Anfordern einer E-Mail und nach einem Fehler. Welche Ansicht anzeigt wird, entscheidet das Template anhand des Werts von EOL-PendingEmail selbst. Die E-Mail wird aus einem eigenen Template erstellt, das im Abschnitt EmailOTPLoginMail eingetragen ist. Nur dort sind der EOL-Code und der EOL-MagicLink gefüllt. Alle übrigen EOL-Tags sind in beiden Templates aktiv.

Ist die Funktion eingeschaltet

Tag	Klammerung greift, wenn
`EOL-Enabled`	der Login per E-Mail für diesen Aufruf aktiv ist
`EOL-MethodIsCode`	als Methode der Einmalcode eingestellt ist
`EOL-MethodIsLink`	als Methode der Anmeldelink eingestellt ist

{EOL-Enabled}
   ... Anforderung und Codeeingabe ...
{/EOL-Enabled}

EOL-Enabled berücksichtigt den Testbetrieb. Steht in der Konfiguration allow = test, greift die Klammerung nur im Testmodus des Shops. So lässt sich die Funktion im laufenden Shop aufbauen, ohne dass sie für Käufer sichtbar ist. EOL-MethodIsCode und EOL-MethodIsLink lesen nur die Einstellung Method aus und fragen nicht, ob die Funktion aktiviert ist. Setzen Sie sie deshalb immer innerhalb von EOL-Enabled ein. Alle drei Tags sind reine Klammerungen, positiv wie negativ.

Anforderung oder Codeeingabe: EOL-PendingEmail

Hat ein Käufer eine Mail angefordert, merkt sich der Shop die eingegebene Adresse in der Sitzung. EOL-PendingEmail gibt sie als Einzel-Tag aus und dient als Klammerung, solange sie vorliegt. Damit schaltet das Template zwischen den beiden Ansichten um.

{!EOL-PendingEmail}
   ... Eingabe der E-Mail-Adresse ...
{/!EOL-PendingEmail}

{EOL-PendingEmail}
   <p>Wir haben eine E-Mail an <strong>~EOL-PendingEmail~</strong> gesendet.</p>
   ... Codeeingabe oder Hinweis auf den Link ...
{/EOL-PendingEmail}

Der Shop setzt die Adresse, auch wenn zu ihr gar kein Kundenkonto existiert. In diesem Fall wird keine E-Mail verschickt, es wird aber dieselbe Ansicht angezeigt. Besucher können so nicht erkennen, welche Adressen im Shop registriert sind. Die Adresse verschwindet wieder, wenn die Anmeldung gelingt, wenn der Käufer abbricht, Die Adresse verschwindet wieder, wenn die Anmeldung gelingt, der Käufer den Vorgang abbricht, der E-Mail-Versand scheitert, die Gültigkeitsdauer seit der Anforderung abgelaufen ist oder die Anmeldung wegen zu vieler Fehlversuche gesperrt wird. In diesem Fall fällt das Template von selbst auf die Anforderungsansicht zurück.

Formularfelder und Schaltflächen

Die Anforderung benötigt kein eigenes Formular-Tag. Sie läuft über das normale Anmeldeformular FORM-LoginKnownUser. Erst die Codeeingabe hat mit FORM-EOL_Verify ein eigenes Ziel.

Tag	Liefert	Gehört in
`EOL-MailInput`	den Feldnamen für die E-Mail-Adresse, fest `ws_eolin_input_email`	Anforderungsformular
`BT-EOL_Request`	den Namen der Schaltfläche, die die Mail anfordert, fest `button_eolin_request`	Anforderungsformular
`EOL-CodeInput`	den Feldnamen für den Einmalcode, fest `ws_eolin_code`	Formular mit `FORM-EOL_Verify`
`BT-EOL_CancelVerify`	den Namen der Schaltfläche, die die Codeeingabe abbricht, fest `button_eolin_cancel`	Formular mit `FORM-EOL_Verify`
`FORM-EOL_Verify`	das Ziel des Formulars für die Codeeingabe	`action`-Attribut

<form action="~FORM-LoginKnownUser~" method="post">
   <input type="email" name="~EOL-MailInput~" autocomplete="email" required>
   <button type="submit" name="~BT-EOL_Request~" value="1">Login-Code anfordern</button>
</form>

Die Funktion BT-EOL_Requestgibt nur dann etwas aus, wenn sie aktiv ist und das Login-Template angezeigt wird. Auf jedem anderen Template sowie bei deaktivierter Funktion bleibt das name-Attribut leer und die Schaltfläche löst keine Aktion aus.

Setzen Sie das Anforderungsfeld in ein eigenes Formular und nicht in das bestehende Formular mit Adresse und Passwort. Beide Formulare dürfen dasselbe Ziel FORM-LoginKnownUser haben. Befindet sich im Passwortformular ein Pflichtfeld für den Login per E-Mail, verhindert der Browser die normale Anmeldung, solange das Feld leer ist.

Durch Klicken auf die Schaltfläche „Abbrechen” wird die gemerkte Adresse gelöscht und man wird zur Login-Seite zurückgeführt. Da sie sich im selben Formular wie das Codefeld befindet, benötigt sie das Attribut formnovalidate. Andernfalls verlangt der Browser zuerst einen Code, bevor er das Abbrechen überhaupt absendet.

<form action="~FORM-EOL_Verify~" method="post">
   <input type="text" name="~EOL-CodeInput~" maxlength="~EOL-CodeLength~"
          inputmode="numeric" autocomplete="one-time-code" required>
   <button type="submit">Anmelden</button>
   <button type="submit" name="~BT-EOL_CancelVerify~" value="1" formnovalidate>Abbrechen</button>
</form>

Die Schaltfläche zum Absenden der Codeeingabe benötigt keinen Namen. Dem Shop reicht das Ziel FORM-EOL_Verify, um zu wissen, was zu tun ist.

Der Shop vergleicht den Code Zeichen für Zeichen, ohne Leerzeichen zu entfernen und ohne Groß- und Kleinschreibung anzugleichen. Bei CodeAlphabet = alphanumeric besteht der Code aus Großbuchstaben und Ziffern. Wer ihn klein eintippt, bekommt den Fehler 3. Ersetzen Sie in diesem Fall inputmode="numeric" durch autocapitalize="characters" und weisen Sie im Text auf die Großschreibung hin. Kein Tag verrät dem Template, welches Alphabet eingestellt ist, Sie müssen die Konfiguration kennen.

Inhalt der Mail

Tag	Liefert
`EOL-Code`	den Einmalcode im Klartext, nur bei `Method = code`
`EOL-MagicLink`	den vollständigen Anmeldelink, nur bei `Method = link`
`EOL-CodeLength`	die eingestellte Länge des Codes
`EOL-ValidityMinutes`	die Gültigkeitsdauer von Code und Link in Minuten

{EOL-MethodIsCode}
   <p>Ihr Anmeldecode lautet:</p>
   <p class="code"><strong>~EOL-Code~</strong></p>
   <p>Der Code ist ~EOL-ValidityMinutes~ Minuten gültig.</p>
{/EOL-MethodIsCode}

{EOL-MethodIsLink}
   <p><a href="~EOL-MagicLink~">Jetzt anmelden</a></p>
   <p>Der Link ist ~EOL-ValidityMinutes~ Minuten gültig.</p>
{/EOL-MethodIsLink}

Sowohl der EOL-Code als auch der EOL-MagicLink sind nur während der Erstellung der E-Mail gefüllt. Anschließend löscht der Shop den Code und den Link aus dem Speicher und bewahrt nur einen Prüfwert auf. Auf der Login-Seite liefern beide Tags deshalb keine Ergebnisse und können auch nicht als Klammerung verwendet werden. EOL-MagicLink ist eine absolute HTTPS-Adresse ohne Sitzungskennung. Der Käufer kann den Link somit auf einem anderen Gerät öffnen als dem, auf dem er die E-Mail angefordert hat. Die Anmeldung findet dann auf dem Gerät statt, auf dem er klickt. Wenn in der Konfiguration MagicLinkBindIP = yes gesetzt ist, gelingt das nur, wenn beide Geräte mit derselben IP-Adresse im Internet unterwegs sind. Andernfalls erscheint die Fehlermeldung 5. Die Felder EOL-CodeLength und EOL-ValidityMinutes geben den tatsächlich verwendeten Wert aus. Ein Wert außerhalb des zulässigen Bereichs wird dabei bereits an die Grenze gezogen. Beide greifen immer als Klammerung.

Fehler anzeigen

Für die Anforderung und die Prüfung gibt es jeweils ein eigenes Fehler-Tag. Als Einzeltag gibt es die Fehlernummer aus. Als Klammerung ohne Parameter greift es, sobald die Nummer ungleich 0 ist. Mit Parameter greift es bei genau dieser Nummer.

{EOL-VerifyError(4)}
   <p class="error">Der Code ist abgelaufen. Bitte fordern Sie einen neuen an.</p>
{/EOL-VerifyError(4)}

EOL-RequestError

Nummer	Bedeutung	Danach zeigt der Shop
0	Anforderung angenommen. Das gilt auch für eine unbekannte Adresse, an die keine Mail geht.	Codeeingabe beziehungsweise Hinweis auf den Link
1	Funktion nicht aktiv	Loginseite
2	E-Mail-Adresse leer oder ungültig	Anforderung
3	Captcha nicht bestanden	Anforderung
4	zu viele Anforderungen im Zeitfenster oder Anmeldung wegen Fehlversuchen gesperrt	Anforderung
5	Mail konnte nicht versendet werden	Anforderung
6	interner Fehler	Anforderung

Fehler 5 tritt auch dann auf, wenn im Abschnitt EmailOTPLoginMail kein Template eingetragen ist. Er ist somit der typische Fehler einer unvollständigen Einrichtung.

EOL-VerifyError

Nummer	Bedeutung	Danach zeigt der Shop
0	kein Fehler
1	keine Anforderung in dieser Sitzung oder Gültigkeitsdauer seit der Anforderung abgelaufen	Anforderung
2	zu viele Fehleingaben für diesen Code oder Anmeldung wegen Fehlversuchen gesperrt	Codeeingabe beziehungsweise Loginseite
3	Code oder Link falsch, bereits verwendet oder für diese Adresse nicht vorhanden	Codeeingabe beziehungsweise Anforderung
4	Code oder Link abgelaufen	Codeeingabe beziehungsweise Anforderung
5	Link von einer anderen IP-Adresse geöffnet, nur bei `MagicLinkBindIP = yes`	Anforderung
200 bis 203	Code oder Link waren gültig, die Anmeldung ließ sich aber nicht abschließen: 200 Konto nicht gefunden, 201 keine Zutrittsberechtigung für diesen Subshop, 202 Konto nicht ladbar, 203 sonstiger Fehler	Loginseite

Bei den Fehlern 3 und 4 hängt die Folgeansicht von der Methode ab. Nach einer falschen Codeeingabe bleibt der Käufer in der Codeeingabe-Maske hängen. Nach einem ungültigen Link landet er in der Anforderungsansicht, oft auf einem Gerät, auf dem es gar keine gemerkte Adresse gibt.

Setzen Sie die Ausgabe von EOL-VerifyError deshalb außerhalb der Klammerung EOL-PendingEmail. Die Fehler 1, 5 und 200 bis 203, die Sperre wegen Fehlversuchen und jeder Fehler beim Öffnen eines Links erscheinen in der Anforderungsansicht. Innerhalb von {EOL-PendingEmail} blieben sie unsichtbar.

Bei den Anforderungsfehlern 4 bis 6 setzt der Shop häufig zusätzlich EOL-VerifyError auf 1, da keine gültige Anforderung entstanden ist. In diesem Fall sollte nur der Anforderungsfehler angezeigt werden, da der Käufer sonst zwei Meldungen für dasselbe Problem sieht.

{EOL-RequestError}
   <p class="error">Die E-Mail konnte nicht angefordert werden (Fehler ~EOL-RequestError~).</p>
{/EOL-RequestError}

{!EOL-RequestError}
   {EOL-VerifyError}
      <p class="error">Die Anmeldung ist fehlgeschlagen (Fehler ~EOL-VerifyError~).</p>
   {/EOL-VerifyError}
{/!EOL-RequestError}

Eine Fehlernummer gilt nur für den Aufruf, in dem sie auftritt. Beim nächsten Seitenaufruf sind beide Tags wieder auf 0 gesetzt.

Nach erfolgreicher Prüfung

Wenn Code oder Link stimmen, meldet der Shop den Käufer an. Dabei wird eine neue Sitzungskennung vergeben, der Zähler für Fehlversuche wird zurückgesetzt und der Zeitpunkt der letzten Anmeldung wird eingetragen. Wenn der Käufer eine Zwei-Faktor-Anmeldung eingerichtet hat, gelangt er anschließend nicht direkt ins Kundenkonto.

Eingerichteter zweiter Faktor	Weiter auf
Authenticator-App (TOTP)	die Prüfung des zweiten Faktors
Passkey, sofern Passkeys im Shop aktiv sind	die Prüfung des Passkeys
Code per E-Mail	entfällt, der Käufer hat sich gerade per E-Mail ausgewiesen
keiner	das Kundenkonto

Die Tags im Überblick

Tag	Einzel-Tag	Bereichs-Tag	negatives Bereichs-Tag	Schleifen-Tag
`EOL-Enabled`	–	ja	ja	–
`EOL-MethodIsCode`	–	ja	ja	–
`EOL-MethodIsLink`	–	ja	ja	–
`EOL-PendingEmail`	ja	ja	ja	–
`EOL-RequestError`	ja	ja	ja	–
`EOL-VerifyError`	ja	ja	ja	–
`EOL-Code`	ja	ja	ja	–
`EOL-MagicLink`	ja	ja	ja	–
`EOL-CodeLength`	ja	ja	ja	–
`EOL-ValidityMinutes`	ja	ja	ja	–
`EOL-MailInput`	ja	–	–	–
`EOL-CodeInput`	ja	–	–	–
`BT-EOL_Request`	ja	–	–	–
`BT-EOL_CancelVerify`	ja	–	–	–
`FORM-EOL_Verify`	ja	–	–	–

​Wo die Tags gelten

​Ist die Funktion eingeschaltet

​Anforderung oder Codeeingabe: EOL-PendingEmail

​Formularfelder und Schaltflächen

​Inhalt der Mail

​Fehler anzeigen

​EOL-RequestError

​EOL-VerifyError

​Nach erfolgreicher Prüfung

​Die Tags im Überblick

​Verwandte Themen

Wo die Tags gelten

Ist die Funktion eingeschaltet

Anforderung oder Codeeingabe: EOL-PendingEmail

Formularfelder und Schaltflächen

Inhalt der Mail

Fehler anzeigen

EOL-RequestError

EOL-VerifyError

Nach erfolgreicher Prüfung

Die Tags im Überblick

Verwandte Themen