Einbindung
Zwei-Faktor-Authentifizierung Optin

Voraussetzung

Legen Sie zunächst ein Konto auf BerlinSMS an, um Zwei-Faktor-Authentifizierung Optin verwenden zu können. Loggen Sie sich anschließend auf https://twofa.berlinsms.de ein und laden sie sich den Sitekey und den Secretkey herunter.

→ Wie erhalte ich einen Sitekey?

Einbindungen

Clientseitig – per React-Komponente

Clientseitig – per React-Komponente

Clientseitig – per HTML/JS

Clientseitig – per HTML/JS

Die Einbindung der Zwei-Faktor-Authentfizierung setzt ein HTML-Formular für die Registrierung der User voraus.

Beispiel: https://samples.berlinsms.de/twofa-optin/demo-form-noWidget.html

Unser Widget fügt ein Formularfeld hinzu, in dass der Seitenbenutzer seine Telefonnummer eintragen kann. Die Verifizierung der Nummer erfolgt noch vor dem Abschicken des Registrierungsformulars.

Um das Widget zu integrieren, binden Sie folgenden JavaScript-Tag (<form>-Tag) im HTML-Dokument des Formulars ein und platzieren Sie es idealerweise vor dem Submit-Button:

<script src="https://static.berlinsms.de/twofa/twofa-optin.js"></script>

Nun wird das Widget angezeigt. Erhalten Sie die folgende Fehlermeldung, fehlt der Sitekey.

Beispiel: https://samples.berlinsms.de/twofa-optin/demo-form-noSitekey.html

Sie können das Widget mit mehreren Parametern anpassen. Bitte fügen Sie unbedingt den bsmsSitekey hinzu!

Link: Wie erhalte ich einen Sitekey?

Hängen Sie den Sitekey als Script-Parameter an:

 <script src="https://static.berlinsms.de/twofa/twofa-optin.js?bsmsSitekey=[Sitekey]"></script>

Damit funktioniert nun das Widget.

Beispiel: https://samples.berlinsms.de/twofa-optin/demo-form-noCallback.html

Allerdings empfehlen wir Ihnen, den Button noch nicht zu aktivieren, denn das Formular lässt sich im Moment auch ohne Verifizierung der Telefonnummer abschicken. Die Überprüfung der Rufnummer auf Seiten des Servers würde fehlschlagen.

Um den Button bis zur Verifikation inaktiv zu lassen, setzen Sie ihn initial auf „disabled“. Fügen Sie außerdem eine eindeutige id (z.B. „send-register-form“) hinzu.

<button type=“submit“ id=“send-register-form“  disabled>

Um den Button nach der Verifikation wieder auf „enabled“ zu stellen, übergeben Sie dem Script den Parameter „onSolved“. Dieser Parameter bekommt als Wert einen Callback, der nach der Verifikation verarbeitet wird:

<script src="https://static.berlinsms.de/twofa/twofa-optin.js?bsmsSitekey=[Sitekey]&onSolved=callback"></script>
<script language="javascript">
    function callback() {
        console.log('--->Event: bsmsOnLoadCallback');
        document.getElementById("send-register-form").disabled = true;
    }
</script>

Nun lässt sich das Formular erst nach Eingabe und Validierung der Telefonnummer abschicken.

Beispiel: https://samples.berlinsms.de/twofa-optin/demo-form.html  

Serverseitig – per PHP

Serverseitig – per PHP

Downloaden und entpacken Sie die TwoFA-Optin-Bibliothek von BerlinSMS:

Link: https://static.berlinsms.de/twofa/twofa-optin.zip

Laden Sie die dekomprimierte PHP-Datei in Ihren Webspace hoch und binden Sie sie in Ihrem Projekt ein:

include 'twofa/twofa-optin.php';

Integrieren Sie anschließend den privaten Schlüssel (Sitekey) von BerlinSMS in Ihren Code.

Link: Wie erhalte ich einen Sitekey?

define("TWOFA_Secretkey", "[Secret-Key]");

Erzeugen Sie ein Objekt der importierte Klasse „TwofaOptin“. Übergeben Sie den Secretkey als Parameter:

$twofaChallenge = new TwofaOptin(TWOFA_Secretkey);

Lesen Sie den POST-Parameter aus, den Sie vom Formular erhalten haben.

$twofaChallengeToken = $_POST['challengeToken']

Führen Sie die Twofa-Optin-Überprüfung durch, indem Sie die Funktion „getChallenge“ auf der oben erzeugten Klasse ausführen. Übergeben Sie den challengeToken als Parameter:

$twofaChallenge = $twofaChallenge->getChallenge($twofaChallengeToken);

Werten Sie die Rückmeldung aus. Das zurückgegebene Objekt enthält in der Regel zwei Elemente:

  • solved (boolean): Telefonnummer wurde verifiziert
  • verifiedAddress (string): die bestätigte Telefonnummer
if ($twofaChallenge->solved) {
      // twofa-optin-Überprüfung erfolgreich, 
      // "$twofaChallenge->verifiedAddress" enthält die überprüfte Telefonnummer
} else {
      // twofa-optin-Überprüfung nicht erfolgreich
}
Serverseitig – per JS

Serverseitig – per JS

Installieren Sie zuerst das Paket „@berlinsms/twofa-verify“:

npm install @berlinsms/twofa-verify

Importieren Sie das Paket in Ihr Projekt:

import { TwofaOptin } from '@berlinsms/twofa-verify';

Binden Sie anschließend den privaten Schlüssel (Secretkey) von BerlinSMS in Ihren Code ein:

Link: Wie erhalte ich einen Sitekey?

const twofaSecretkey= "<your_secret_key>";

Erzeugen Sie ein Objekt der importieren Klasse „TwofaOptin“. Übergeben Sie den Secretkey als Parameter:

const twofaOptin = new TwofaOptin(twofaSecretkey);

Lesen Sie die Postparameter aus, die Sie vom Formular erhalten haben:

const challengeToken = req.body.challengeToken;

Führen Sie die Twofa-Optin-Überprüfung durch, indem Sie die Funktion „getChallenge“ auf der oben erzeugten Klasse ausführen. Übergeben Sie den challengeToken als Parameter:

const twofaChallenge = await twofaOptin.getTwofaChallenge(challengeToken);

Werten Sie die Rückmeldung aus. Das zurückgegebene Objekt enthält in der Regel zwei Elemente:

  • solved (boolean): Telefonnummer wurde verifiziert
  • verifiedAddress (string): die bestätigte Telefonnummer
if (twofaChallenge.solved) {
      // twofa-optin-Überprüfung erfolgreich, 
      // "twofaChallenge.verifiedAddress" enthält die überprüfte Telefonnummer
} else {
      // twofa-optin-Überprüfung nicht erfolgreich
}