Einloggen mit Telefonnummer in WordPress

Last updated 18. Oktober 2021

Möglicherweise haben Sie ein Front-End-Anmeldeformular auf Ihrer WordPress-Website platziert. Und Sie möchten Benutzern ermöglichen, sich mit ihrer Telefonnummer oder mit Benutzername/E-Mail anzumelden. Grundsätzlich erlauben Sie Benutzern, einen beliebigen Eintrag aus Benutzername/E-Mail/Telefon und einem Passwort einzugeben.

Bitte beachten Sie, dass dieses Tutorial nicht beabsichtigt, die Anmeldung mit OTP anzuzeigen. Stattdessen werde ich eine weitere Option für die Telefonnummer zusammen mit dem Benutzernamen und der E-Mail-Adresse hinzufügen. So können Ihre Benutzer jede für sie bequeme Option auswählen. Sie haben diese Option wahrscheinlich bei Amazon gesehen. Amazon ermöglicht es uns, uns entweder mit E-Mail oder Handynummer anzumelden.

Ich werde ein einfaches Login-Formular erstellen. Beim Absenden des Formulars schreiben wir einen Code, der im Hintergrund die Anmeldeinformationen für alle 3 Optionen (Benutzername/E-Mail/Telefon) und ein Passwort überprüft.

Um eine Telefonnummer in einem Anmeldeformular hinzuzufügen, sollten Sie eine Telefonnummer eines Benutzers in die Tabelle ‘wp_usermeta’ eingeben. Sie können dies zum Zeitpunkt der Benutzerregistrierung tun. Der folgende Code kann verwendet werden, um eine Telefonnummer eines Benutzers hinzuzufügen.

<?php
$user_id = 1;
$phone_number = 9999999999;
add_user_meta( $user_id, 'user_phone', $phone_number);

Sobald Sie den meta_key ‘user_phone’ zusammen mit seinem Wert in der Datenbank haben, können Sie sich mit der Telefonnummernoption in einem Anmeldeformular anmelden. Lassen Sie uns das folgende Anmeldeformular auf Ihrer Anmeldeseite platzieren.

<?php
$return = log_the_user_in();
if( is_wp_error( $return)) {
    echo $return->get_error_message();
}
?>
<form method="post">
    <p><input type="text" name="user_login" placeholder="Username, email or mobile" required /></p>
    <p><input type="password" name="user_password" placeholder="Password" required /></p>
    <input type="hidden" name="login_nonce" value="<?php echo wp_create_nonce('login_nonce'); ?>" />
    <input type="submit" name="login_the_user" value="Submit" />
</form>

Im obigen Code prüfen wir auf Fehler und drucken sie aus. In den nächsten Schritten werden wir Code zur Behandlung von Fehlern schreiben. Außerdem haben wir dem Formular eine Nonce hinzugefügt, die die empfohlene Methode zur Verarbeitung von Formularen in WordPress ist.

Einloggen mit Telefonnummer in WordPress

Wenn ein Benutzer Anmeldeinformationen ausfüllt und auf eine Schaltfläche zum Senden klickt, nehmen wir die Anmeldeinformationen und überprüfen sie mit der Datenbank. Wenn die Zugangsdaten korrekt sind, melden wir den Benutzer an und leiten ihn auf die Startseite um. Bei falschen Zugangsdaten werden Fehler mit WP_ErrorKlasse protokolliert .

Schreiben Sie also den folgenden Code in die functions.phpDatei, die das Anmeldeformular verarbeitet.

<?php
add_action( 'init', 'log_the_user_in' );
function log_the_user_in() {
    if (isset( $_POST['login_the_user']) && wp_verify_nonce( $_REQUEST['login_nonce'], 'login_nonce')) {
 
        if (! empty( $_POST['user_login']) &&! empty( $_POST['user_password'])) {
 
            if (is_email( $_POST['user_login'])) {
                // check user by email
                $user = get_user_by( 'email', $_POST['user_login'] );
            } elseif (is_numeric( $_POST['user_login'])) {
                // check user by phone number
                global $wpdb;
                $tbl_usermeta = $wpdb->prefix.'usermeta';
                $user_id = $wpdb->get_var( $wpdb->prepare( "SELECT user_id FROM $tbl_usermeta WHERE meta_key=%s AND meta_value=%s", 'user_phone', $_POST['user_login']) );
 
                $user = get_user_by( 'ID', $user_id );
            } else {
                // check user by username
                $user = get_user_by( 'login', $_POST['user_login'] );
            }
 
            if (! $user) {
                return new WP_Error('wrong_credentials', 'Invalid credentials.');
            }
 
            // check the user's login with their password.
            if (! wp_check_password( $_POST['user_password'], $user->user_pass, $user->ID)) {
                return new WP_Error('wrong_credentials', 'Invalid credentials.');
            }
 
            wp_clear_auth_cookie();
            wp_set_current_user($user->ID);
            wp_set_auth_cookie($user->ID);
 
            wp_redirect(get_bloginfo('url'));
            exit;
        } else {
            return new WP_Error('empty', 'Both fields are required.');
        }
    }
}

Hier haben wir zunächst die Nonce überprüft, um unser Formular vor bestimmten Arten von Missbrauch, bösartigem Code und CSRF-Angriffen zu schützen. Als Nächstes wird basierend auf der Methode is_email()oder is_numeric()auf gültige E-Mail- und Telefonnummern geprüft. Wenn der eingegebene Wert keine E-Mail oder kein Telefon ist, verwenden wir den Benutzernamen. Wenn die Anmeldeinformationen erfüllt sind, melden sich Benutzer beim System an und leiten zur Startseite um. In Ihrem Fall können Sie Benutzer gemäß Ihrem Flow auf eine andere Seite umleiten.

Ich hoffe, Sie verstehen, wie Sie die Anmeldung mit einer Telefonnummer in WordPress integrieren. Bitte teilen Sie Ihre Gedanken und Vorschläge im Kommentarbereich unten mit.

Zum Thema passende Artikel

Aufnahmequelle: artisansweb.net