Improve 2-factor auth enablement experience

action.php

@@ -3,9 +3,10 @@
 /**
  * Make things happen when buttons are pressed and forms submitted.
  */
-
 require_once __DIR__ . "/required.php";
 
+use OTPHP\TOTP;
+
 // If the user presses Sign Out but we're not logged in anymore,
 // we don't want to show a nasty error.
 if ($VARS['action'] == 'signout' && $_SESSION['loggedin'] != true) {
@@ -55,6 +56,10 @@ switch ($VARS['action']) {
         if (is_empty($VARS['secret'])) {
             returnToSender("invalid_parameters");
         }
+        $totp = new TOTP(null, $VARS['secret']);
+        if (!$totp->verify($VARS["totpcode"])) {
+            returnToSender("2fa_wrong_code");
+        }
         $database->update('accounts', ['authsecret' => $VARS['secret']], ['uid' => $_SESSION['uid']]);
         insertAuthLog(9, $_SESSION['uid']);
         returnToSender("2fa_enabled");

apps/2fa_qrcode.php

@@ -1,17 +0,0 @@
-<?php
-
-dieifnotloggedin();
-
-// extra login utils
-require_once __DIR__ . "/../lib/login.php";
-
-$APPS["setup_2fa"]["title"] = lang("setup 2fa", false);
-$APPS["setup_2fa"]["icon"] = "lock";
-if (userHasTOTP($_SESSION['username'])) {
-    $APPS["setup_2fa"]["content"] = '<a href="action.php?action=rm2fa&source=security" class="btn btn-warning">'
-            . lang("remove 2fa", false) . '</a>';
-} else {
-    $APPS["setup_2fa"]["content"] = '<div class="alert alert-info"><i class="fa fa-info-circle"></i> ' . lang("2fa explained", false) . '</div>'
-            . '<button class="btn btn-success">'
-            . lang("enable 2fa", false) . '</button>';
-}

apps/setup_2fa.php

@@ -16,15 +16,26 @@ if (userHasTOTP($_SESSION['username'])) {
             . lang("remove 2fa", false) . '</a>';
 } else if ($_GET['2fa'] == "generate") {
     $codeuri = newTOTP($_SESSION['username']);
+    $userdata = $database->select('accounts', ['email', 'authsecret', 'realname'], ['username' => $_SESSION['username']])[0];
+    $label = SYSTEM_NAME . ":" . is_null($userdata['email']) ? $userdata['realname'] : $userdata['email'];
+    $issuer = SYSTEM_NAME;
     $qrCode = new QrCode($codeuri);
     $qrCode->setSize(200);
     $qrCode->setErrorCorrection("H");
     $qrcode = $qrCode->getDataUri();
     $totp = Factory::loadFromProvisioningUri($codeuri);
     $codesecret = $totp->getSecret();
-    $chunk_secret = trim(chunk_split($codesecret, 8, ' '));
+    $chunk_secret = trim(chunk_split($codesecret, 4, ' '));
+    $lang_manualsetup = lang("manual setup", false);
+    $lang_secretkey = lang("secret key", false);
+    $lang_label = lang("label", false);
+    $lang_issuer = lang("issuer", false);
+    $lang_entercode = lang("enter otp code", false);
     $APPS["setup_2fa"]["content"] = '<div class="alert alert-info"><i class="fa fa-info-circle"></i> ' . lang("scan 2fa qrcode", false) . '</div>' . <<<END
 <style nonce="$SECURE_NONCE">
+.margintop-15px {
+    margin-top: 15px;
+}
 .mono-chunk {
     text-align: center;
     font-size: 110%;
@@ -32,8 +43,9 @@ if (userHasTOTP($_SESSION['username'])) {
 }
 </style>
 <img src="$qrcode" class="img-responsive qrcode" />
-<div class="well well-sm mono-chunk">$chunk_secret</div>
-<form action="action.php" method="POST">
+<form action="action.php" method="POST" class="margintop-15px">
+    <input type="text" name="totpcode" class="form-control" placeholder="$lang_entercode" minlength=6 maxlength=6 required />
+    <br />
     <input type="hidden" name="action" value="add2fa" />
     <input type="hidden" name="source" value="security" />
     <input type="hidden" name="secret" value="$codesecret" />
@@ -42,6 +54,17 @@ END
             . lang("confirm 2fa", false) . <<<END
     </button>
 </form>
+<div class="panel panel-default margintop-15px">
+    <div class="panel-body">
+        <b>$lang_manualsetup</b>
+        <br /><label>$lang_secretkey:</label>
+        <div class="well well-sm mono-chunk">$chunk_secret</div>
+        <br /><label>$lang_label:</label>
+        <div class="well well-sm mono-chunk">$label</div>
+        <br /><label>$lang_issuer:</label>
+        <div class="well well-sm mono-chunk">$issuer</div>
+    </div>
+</div>
 END;
 } else {
     $APPS["setup_2fa"]["content"] = '<div class="alert alert-info"><i class="fa fa-info-circle"></i> ' . lang("2fa explained", false) . '</div>'

lang/en_us.php

@@ -41,7 +41,8 @@ $STRINGS = [
     "2fa enabled" => "2-factor authentication activated.",
     "remove 2fa" => "Disable 2-factor authentication",
     "2fa explained" => "2-factor authentication adds more security to your "
-    . "account. You'll need an app such as Google Authenticator on your "
+    . "account. You can use the Auth Keys (key icon) feature of the Netsyms "
+    . "Business Mobile app, or another TOTP-enabled app (Authy, FreeOTP, etc) on your "
     . "smartphone. When you have the app installed, you can enable 2-factor "
     . "authentication by clicking the button below and scanning a QR code with "
     . "the app. Whenever you sign in in the future, you'll need to input a "
@@ -53,7 +54,7 @@ $STRINGS = [
     . "security device, click the button below.",
     "enable 2fa" => "Enable 2-factor authentication",
     "scan 2fa qrcode" => "Scan the QR Code with the authenticator app, or enter"
-    . " the secret key manually.",
+    . " the information manually.  Then type in the six-digit code the app gives you and press Finish Setup.",
     "confirm 2fa" => "Finish setup",
     "invalid parameters" => "Invalid request parameters.",
     "ldap server error" => "The LDAP server returned an error: {arg}",
@@ -86,4 +87,8 @@ $STRINGS = [
     . "\r\n"
     . "\r\nThese notifications can be disabled by editing the user in "
     . "ManagePanel.",
+    "enter otp code" => "Enter 6-digit code",
+    "secret key" => "Secret key",
+    "label" => "Label",
+    "issuer" => "Issuer",
 ];

lang/messages.php

@@ -25,6 +25,10 @@ define("MESSAGES", [
         "string" => "2fa enabled",
         "type" => "success"
     ],
+    "2fa_wrong_code" => [
+        "string" => "2fa incorrect",
+        "type" => "danger"
+    ],
     "invalid_parameters" => [
         "string" => "invalid parameters",
         "type" => "danger"