Angemeldet Geräteverwaltung – PHP & MySQL

In diesem Artikel erstellen wir eine Funktion, mit der die Benutzer überprüfen können, wie viele Geräte sie angemeldet haben. Möglicherweise haben Sie diese Funktion auf Facebook gesehen, wo Sie eine Liste aller Geräte sehen können, auf denen Sie angemeldet waren Sie haben auch die Möglichkeit, das Gerät zu entfernen. Die entfernten Geräte werden nicht mehr angemeldet und mussten durch erneute Eingabe von E-Mail und Passwort angemeldet werden.

Im Folgenden finden Sie die Schritte zum Verwalten mehrerer Geräte / Browser-Anmeldungen:

• Wenn der Benutzer während der Anmeldung die richtige E-Mail-Adresse und das richtige Passwort eingibt, prüfen wir, ob dieser Benutzer dem aktuellen Gerät und Browser vertraut.
• Wenn es nicht vertrauenswürdig ist, wird eine E-Mail mit einem Bestätigungscode an die E-Mail-Adresse des Benutzers gesendet und ein Eingabefeld angezeigt.
• Der Benutzer muss den Bestätigungscode in dieses Eingabefeld eingeben.
• Sobald der Code überprüft wurde, wird der Benutzer aufgefordert, diesem Gerät / Browser zu vertrauen oder nicht.
• Wenn der Benutzer dem Gerät vertraut, wird er beim nächsten Anmeldeversuch nicht nach einem Bestätigungscode gefragt.
• Eine separate Seite wird erstellt, um eine Liste aller Geräte anzuzeigen, auf denen der Benutzer angemeldet ist.
• Auf dieser Seite kann der Benutzer das gewünschte Gerät entfernen.
• Wenn das Gerät / der Browser entfernt wird und der Benutzer versucht hat, sich von diesem Gerät / Browser aus anzumelden, wird erneut ein neuer Bestätigungscode an seine E-Mail-Adresse gesendet.

Inhaltsverzeichnis:

1. Datenbankstruktur
2. Login Formular
3. Übermittlung des Anmeldeformulars
4. Verifizierungs-Schlüssel
5. Gerät vertrauen
6. Alle angemeldeten Geräte anzeigen
7. Gerät entfernen

1. Datenbankstruktur

Zuerst erstellen wir zwei Tabellen, eine für Benutzer und eine für Geräte. Möglicherweise haben Sie bereits eine Tabelle für Benutzer. Wenn Sie dies tun, müssen Sie eine neue Spalte hinzufügen Verifizierungs-Schlüssel drin. Wenn Sie bereits eine Tabelle für Benutzer haben, können Sie die Spalte verification_code hinzufügen, indem Sie die folgende Abfrage ausführen:

/* if you already have the users table */
ALTER TABLE users ADD COLUMN verification_code TEXT NOT NULL

Wenn Sie nicht über die Benutzertabelle verfügen, führen Sie die folgende Abfrage in Ihrem phpMyAdmin aus, oder Sie können die Tabellen manuell erstellen.

CREATE TABLE IF NOT EXISTS users(
    id INTEGER NOT NULL PRIMARY KEY AUTO_INCREMENT,
    email TEXT NOT NULL,
    password TEXT NOT NULL,
    verification_code TEXT NOT NULL
);

CREATE TABLE IF NOT EXISTS devices(
    id INTEGER NOT NULL PRIMARY KEY AUTO_INCREMENT,
    user_id INTEGER NOT NULL,
    browser_info TEXT NOT NULL,
    browser_token TEXT NOT NULL,
    last_login DATETIME NOT NULL,
    last_login_location TEXT NOT NULL,
    
    CONSTRAINT fk_devices_user_id FOREIGN KEY (user_id) REFERENCES users(id)
);

• Benutzer ID wird ein Fremdschlüssel aus der Benutzertabelle sein.
• browser_info speichert den Namen des Browsers und des Betriebssystems, z. B. Safari Mac OS X.
• browser_token Dies wird als Cookie im Browser gespeichert, um den Browser zu identifizieren.
• letzte Anmeldung Dies zeigt den Zeitpunkt an, zu dem das Gerät zuletzt angemeldet wurde.
• last_login_location Dadurch wird der Standort des Benutzers angegeben, von dem aus die Anmeldung erfolgt ist.
• fk_devices_user_id ist der Name der Einschränkung, mit der wir den Primärschlüssel der ID aus der Benutzertabelle als Fremdschlüssel in der Gerätetabelle festlegen.

2. Anmeldeformular

<form method="POST">

    <table>
        <tr>
            <td>
                Email
            </td>
            <td>
                <input type="email" name="email">
            </td>
        </tr>

        <tr>
            <td>
                Password
            </td>

            <td>
                <input type="password" name="password">
            </td>
        </tr>
    </table>
 
    <input type="submit" value="Login" name="login">
</form>

Dadurch wird ein E-Mail- und Passwortfeld zusammen mit einer Senden-Schaltfläche mit der Bezeichnung „Anmelden“ erstellt. Möglicherweise haben Sie bereits eine ähnliche Änderung vorgenommen. Die eigentliche Änderung erfolgt im nächsten Schritt.

3. Übermittlung des Anmeldeformulars

Wenn das Formular gesendet wird, überprüfen wir die Anmeldeinformationen und stellen sicher, dass sie korrekt sind. Anschließend prüfen wir, ob der Benutzer diesem Gerät oder Browser vertraut. Wenn nicht, senden wir eine E-Mail an den Benutzer, um dieses Gerät zu überprüfen. Wenn ja, wird er zur Geräteseite weitergeleitet, auf der er alle seine Geräte sehen kann.

Um eine E-Mail zu senden, verwenden wir PHPMailer. Sie können lernen, wie Sie PHPMailer integrieren, indem Sie im Anschluss daran.

<?php

// session start is required for login
session_start();

// connecting with database
$conn = mysqli_connect("localhost", "db_username", "db_userpassword", "db_name");

// check if the form is submitted
if (isset($_POST["login"]))
{
    // get input field values, preventing from SQL injection
    $email = mysqli_real_escape_string($conn, $_POST["email"]);
    $password = mysqli_real_escape_string($conn, $_POST["password"]);
      
    // check if the email exists in database
    $sql = "SELECT * FROM users WHERE email="" . $email . """;
    $result = mysqli_query($conn, $sql);
 
    if (mysqli_num_rows($result) == 0)
    {
        echo "In-correct email";
        exit();
    }
    else
    {
        // check if the password is correct, we are using hashed password
        $row = mysqli_fetch_object($result);
        if (password_verify($password, $row->password))
        {
            // store the user in session
            $_SESSION["user"] = $row;

            // check if the device or browser is trusted or not
            $sql = "SELECT * FROM devices WHERE browser_token = '" . $_COOKIE["browser_token"] . "' AND user_id = '" . $row->id . "'";
            $result = mysqli_query($conn, $sql);

            // device/browser is trusted
            if (mysqli_num_rows($result) > 0)
            {
                header("Location: devices.php");
            }
            else
            {

                // not trusted, send an email.
                // generate a unique verification code
                $verification_code = uniqid();

                // Instantiation and passing `true` enables exceptions
                $mail = new PHPMailer(true);

                try {
                    //Server settings
                    $mail->SMTPDebug = 0;                      // Enable verbose debug output
                    $mail->isSMTP();                                            // Send using SMTP
                    $mail->Host="smtp.gmail.com";                    // Set the SMTP server to send through
                    $mail->SMTPAuth   = true;                                   // Enable SMTP authentication
                    $mail->Username="your_email";                     // SMTP username
                    $mail->Password   = 'your_password';                               // SMTP password
                    $mail->SMTPSecure = PHPMailer::ENCRYPTION_STARTTLS;         // Enable TLS encryption; `PHPMailer::ENCRYPTION_SMTPS` encouraged
                    $mail->Port       = 587;                                    // TCP port to connect to, use 465 for `PHPMailer::ENCRYPTION_SMTPS` above

                    //Recipients
                    $mail->setFrom('your_email', 'your_name');
                    $mail->addAddress($email);

                    // Content
                    $mail->isHTML(true);                                  // Set email format to HTML
                    $mail->Subject="Verify this browser";
                    $mail->Body    = 'Your verification code is <b style="font-size: 30px;">' . $verification_code . '</b>';

                    $mail->send();
                    // echo 'Message has been sent';
                } catch (Exception $e) {
                    die("Message could not be sent. Mailer Error: {$mail->ErrorInfo}");
                }

                // save the verification code in users table
                $sql = "UPDATE users SET verification_code="" . $verification_code . "" WHERE id = '" . $_SESSION["user"]->id . "'";
                mysqli_query($conn, $sql);

                ?>

                <!-- show a form to enter verification code from email -->

                <h1>New device detected. Email has been sent with a verification code.</h1>

                <form method="POST">

                    <table>
                        <tr>
                            <td>
                                Verification code
                            </td>
                            <td>
                                <!-- verification code input field -->
                                <input type="text" name="verification_code">
                            </td>
                        </tr>
                    </table>
                 
                    <!-- submit button -->
                    <input type="submit" value="Verify" name="verify">
                </form>

                <?php
            }
        }
        else
        {
            echo "Invalid password";
            exit();
        }
    }
}

Sobald die E-Mail gesendet wurde, wird der Feldwert des Bestätigungscodes in der Zeile dieses Benutzers in der Datenbank angezeigt. Außerdem wird ein Eingabefeld mit der Bezeichnung „Bestätigungscode eingeben“ angezeigt. Hier müssen Sie den in Ihrer E-Mail-Adresse empfangenen Code eingeben.

Hinweis: Wenn Sie keine E-Mail erhalten, stellen Sie sicher, dass Sie in PHPMailer die richtige E-Mail-Adresse und das richtige Kennwort eingegeben haben. Außerdem sollte die Option für weniger sichere Apps Ihres Google Mail-Kontos aktiviert sein. Sie können es von aktivieren Hier.

4. Bestätigungscode

Wenn das Bestätigungsformular eingereicht wird, gehen wir wie folgt vor:

• Überprüfen Sie, ob der im Formular eingegebene Bestätigungscode mit dem in der Datenbank übereinstimmt.
• Wenn dies übereinstimmt, leeren wir das Bestätigungscodefeld aus der Benutzertabelle.
• Und zeigen Sie ein Formular, um diesem Gerät / Browser zu vertrauen oder nicht.

<?php

if (isset($_POST["verify"]))
{
    $user_id = isset($_SESSION["user"]) ? $_SESSION["user"]->id : 0;
    $verification_code = $_POST["verification_code"];

    $sql = "SELECT * FROM users WHERE id = '" . $user_id . "' AND verification_code="" . $verification_code . """;
    $result = mysqli_query($conn, $sql);

    if (mysqli_num_rows($result) == 0)
    {
        die("Verification code has been expired.");
    }

    $sql = "UPDATE users SET verification_code="" WHERE id = '" . $user_id . "' AND verification_code="" . $verification_code . """;
    mysqli_query($conn, $sql);

?>

    <form method="POST">
        <input type="button" onclick="window.location.href="https://adnan-tech.com/logged-in-devices-management-php-mysql/devices.php";" value="Don't trust this device">
        <input type="submit" name="trust_device" value="Trust device">
    </form>

<?php
}

Wenn der Benutzer auf „Diesem Gerät nicht vertrauen“ drückt, erhält er beim nächsten Versuch, sich in diesem Browser anzumelden, erneut den Bestätigungscode. Wir leiten den Benutzer einfach auf die Geräteseite weiter, auf der alle angemeldeten Geräte angezeigt werden.

5. Gerät vertrauen

Wenn der Benutzer nun die Taste „Gerät vertrauen“ drückt, gehen wir wie folgt vor:

• Generieren Sie eine eindeutige ID und speichern Sie sie in den Cookies des Browsers.
• Abrufen von Browserinformationen (Browsername, Gerätetyp und Plattform). Sie müssen auskommentieren Browscap Zeile in Ihrer php.ini, um diese Funktion zu verwenden.
• Holen Sie sich die IP-Adresse des Benutzers, um seinen Standort mithilfe des Geo-Plugins zu ermitteln. Wenn es nicht über localhost funktioniert, müssen Sie Ihre IP-Adresse manuell eingeben. Sie können Ihre IP-Adresse von Google erhalten.
• Vom Geo-Plugin erhalten wir den Namen des Landes und der Stadt.
• Schließlich werden wir diese Daten in die Gerätetabelle einfügen. Wenn Sie sich das nächste Mal mit demselben Gerät anmelden, werden Sie nicht nach einem Bestätigungscode gefragt.

<?php

if (isset($_POST["trust_device"]))
{
    $browser_token = uniqid();
    setcookie("browser_token", $browser_token);

    $browser = get_browser(null, true);
    $browser_info = $browser["browser"] . " " . $browser["device_type"] . " " . $browser["platform"];

    $user_ip = getenv('REMOTE_ADDR');
    $user_ip = "111.119.187.11";

    $geo = unserialize(file_get_contents("http://www.geoplugin.net/php.gp?ip=$user_ip"));
    $country = $geo["geoplugin_countryName"];
    $city = $geo["geoplugin_city"];
    $last_login_location = $country . ", " . $city;

    $sql = "INSERT INTO devices (user_id, browser_info, browser_token, last_login, last_login_location) VALUES ('" . $_SESSION["user"]->id . "', '" . $browser_info . "', '" . $browser_token . "', NOW(), '" . $last_login_location . "')";
    mysqli_query($conn, $sql);

    header("Location: devices.php");
}

?>

Sie werden zur Datei mit dem Namen „Geräte.php“. Jetzt müssen wir dem Benutzer alle angemeldeten Geräte anzeigen, damit er sie entfernen kann, wenn er möchte.

6. Alle Geräte anzeigen

Erstellen Sie eine Datei mit dem Namen Geräte.php und fügen Sie den folgenden Code ein:

<?php

// devices.php

// session start is required for login
session_start();

// connecting with database
$conn = mysqli_connect("localhost", "db_username", "db_userpassword", "db_name");

// check if the user is logged in
if (!isset($_SESSION["user"]))
{
    die("Not logged in");
}

// paste the remove device code here from next step

// get all devices of logged in user
$sql = "SELECT * FROM devices WHERE user_id = '" . $_SESSION["user"]->id . "'";
$result = mysqli_query($conn, $sql);

?>

Wenden Sie etwas CSS an, damit die Tabelle gut aussieht.

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
th, td {
    padding: 15px;
}

Alle Gerätedaten in tabellarischer Form anzeigen:

<!-- table to show all devices data -->
<table>
    <tr>
        <th>Device info</th>
        <th>Last login</th>
        <th>Last location</th>
        <th>Actions</th>
    </tr>

    <!--  table row for each device -->
    <?php while ($row = mysqli_fetch_object($result)): ?>
        <tr>
            <td><?php echo $row->browser_info; ?></td>

            <!-- last login date in readable format -->
            <td><?php echo date("d M, Y H:i:s A", strtotime($row->last_login)); ?></td>
            <td><?php echo $row->last_login_location; ?></td>
            <td>
                <!-- form to remove the device -->
                <form method="POST">
                    <input type="hidden" name="id" value="<?php echo $row->id; ?>">
                    <input type="submit" name="remove_device" value="Remove device">
                </form>
            </td>
        </tr>
    <?php endwhile; ?>
</table>

Der Code ist in Kommentaren selbsterklärend. Jetzt müssen wir eine Funktion hinzufügen, um das Gerät zu entfernen. Wir haben bereits ein Formular mit einer Senden-Schaltfläche angezeigt, die beim Klicken das Gerät aus der Liste der angemeldeten Geräte des Benutzers entfernen und es diesem Gerät nicht ermöglichen soll, sich ohne Überprüfung anzumelden.

7. Gerät entfernen

Jetzt entfernen wir einfach das ausgewählte Gerät aus der Gerätetabelle für den angemeldeten Benutzer:

<?php

// check if form is submitted
if (isset($_POST["remove_device"]))
{
    // get device ID
    $id = $_POST["id"];

    // remove from database
    $sql = "DELETE FROM devices WHERE user_id = '" . $_SESSION["user"]->id . "' AND id = '" . $id . "'";
    mysqli_query($conn, $sql);

    // success message
    echo "Device has been removed.";
}

?>

Download-Link generieren