Forgot password suggest profiles based on email id

Forgot password suggest profiles based on email id

If you are website developer and programmer, you must have come across several forgot password technologies. One of the most striking among them is the Facebook style profile suggestion system.

Facebook uses a forgot password mechanism wherein as soon as a user provides a wrong password for an existing email id, the website shows the profile badge associated with the email id. The profile is simple, but for a user who forgot password, it can be really helpful to confirm whether the email id is correct or not.

Often websites prompt messages like – “username or password is incorrect”. This message can be very vague for some users. This message does not actually tell you which part of the information was wrong – the username or the password.

So, to avoid such occurrences, we can implement a mechanism wherein we can have two workflow situations –

  1. When the user enters a wrong email id or username – In this case we simply check the email id or the username with our database. If the user does not exist, we flash a message that “No user found with this email. Please register”. Here, we do not have the scope of showing suggestions or associated accounts.
  2. When the user enters a correct username or email, but the password is wrong – This is the case when we display a profile badge and prompt a message. The message will say – “Is this your account? Reset password or Login as another user”. The profile badge will contain only general information like profile picture, name of the user, associated email id, age (optional), city (optional); but nothing confidential.

What are the advantages of this “forgot password” mechanism

This mechanism has some advantages. Very frankly speaking, even before Facebook implemented this system, I had done it for my college final year project. I got some wonderful user reviews. The website users were fascinated about this new approach and here are some of the reasons –

  1. They could relate seeing their profile images. This was quite appealing
  2. They could identify their profiles quickly
  3. The users when they forgot password, could at least figure out that the email entered was correct. Because the corresponding profile badge could be identified by them.

The mechanism that Facebook (and might be some others too) use is that they show the exact profile matching the current email id provided by the user. However, in my project I did something even more interesting. I punched in data retrieving through AJAX and JQuery do display profile suggestions. Read on to know about that.

Preparing this forgot password mechanism

Forgot password mechanism, that Facebook implements, has a simple workflow. No JQuery or AJAX; plain navigations and error prompting. So, our workflow will move like this –

  1. Collect the email and password from the user.
  2. User submits the information
  3. We check whether email exists, if yes we move to step 4. Otherwise, we abort and prompt – “no user found with this email id”.
  4. We check the password, if correct user is made to proceed to the desired page. Otherwise move to step 5.
  5. An error message is displayed saying the password is incorrect. A profile badge is shown containing all general details about the associated user.

Forgot-password-suggest-profiles-based-on-email-id-facebook

We will not detail on creating HTML forms and PHP codes for capturing data. That is beyond the scope of this tutorial. Considering you know that, we move on to next step. We discuss only the forgot password section in this article.

Our index page containing the form is as follows and also creation of our database tables –

<form action="validate.php" method="POST">
                    <p>
                        <label>Enter email id</label>
                        <input type="text" name="email"/>
                    </p>
                    <p>
                        <label>Enter password</label>
                        <input type="password" name="password"/>
                    </p>
                    <p>
                        <input type="submit" value="SUBMIT" name="submit" class="submit"/>
                    </p>
                </form>
// Creating the table users
$query1 = "CREATE TABLE IF NOT EXISTS FG_USERS(
    email varchar(100) PRIMARY KEY,
    password varchar(100),
    name varchar(100),
    imagepath varchar(200)
    )";

$result1 = mysql_query($query1)
        or die(mysql_error());


// Inserting one demo record
$query2 = "INSERT INTO FG_USERS(email,password,name,imagepath) 
    VALUES('kaustav.banerjee4u@gmail.com','1234','Kaustav Banerjee', 'img/prof1.png')";

$result2 = mysql_query($query2)
        or die(mysql_error());

We collect the email and password values through the POST method and validate the email first. The redirection will be to the same page. However, the message we prompt will be determined from the URL variable values.

So, we will attach a string named “error” to the URL. Then we will collect the value of the variable using the GET method. When the value of the variable “error” is “email”, we will prompt that “email not registered’. Otherwise the value of the string will be “password” and we will carry forward our forgot password technique.

Here is the code for collecting the values in a PHP file, do the validation and return the composed URL.

if(isset($_POST['submit'])){
    $email = $_POST['email'];
    $password = $_POST['password'];
    
    $query = "SELECT email,password,name,imagepath from FG_USERS WHERE email='".$email."'";
    $result = mysql_query($query)
            or die(mysql_error());
    if(mysql_num_rows($result)>0){     
        // User with this email has been found. Proceed to checking password.
        $row = mysql_fetch_row($result);
        if($password === $row[1]){
            // If password is correct, proceed user to profile.
            $_SESSION['userlogged'] =1;
header("Location: dashboard.php"); /* Redirect browser */
exit();
        }
        else{
header("Location: validate.php?error=password&emailid=".$email); /* Redirect browser */
exit();
        }
    }
    else{
header("Location: validate.php?error=email"); /* Redirect browser */
exit();
    }    
}

Below is the code on the new redirected page that extracts the URL string, and prompts the message accordingly. This is the step just before the actual forgot password procedure starts.

<?php
if($_GET){
    $error = $_GET['error'];
    if($error == 'email'){
?>
        <div id="wrapper">
            <p>
                <label>This email is not in our records. Do you <a href="#">want to register?</a></label>
            </p>
            <p>
                <a href="index.php">Go back to home page</a>
            </p>
        </div>
<?php
    }
    elseif($error == 'password'){
        $email = $_GET['emailid'];
        
        $query = "SELECT email,password,name,imagepath from FG_USERS WHERE email='".$email."'";
        $result = mysql_query($query)
            or die(mysql_error());
        
        $row = mysql_fetch_row($result);
?>
        <div id="wrapper">
            <p>
            <label>Are you sure about the password? We think it's incorrect.</label>
            </p>
            <div id="profile">
                <div class="image left">
                    <img src="<?php echo $row[3]; ?>"/>
                </div>
                <div class="details right">
                    <span>Email :</span> <?php echo $row[0]; ?>
                    <br />
                    <br />
                    <span>Name :</span> <?php echo $row[2]; ?>
                    <br />
                    <br />
                    <a href="#">Forgot password</a>
                </div>
            </div>
            <p>
                <a href="index.php">Go back to home page</a>
            </p>
        </div>
<?php
    }
}
?>

Note here, in the block where we implement our forgot password user suggestion, the database is accessed and HTML display is prepared dynamically according to the email value.

Another mechanism similar to this (the forgot password mechanism I created)

You all know how much I love JQuery. When I first started learning JQuery, AJAX and PHP during my college days, I implemented a lot of it in my project.

The mechanism that I created at that time was a super hit. I realized months and years later that I had innovated something awesome, when Facebook started implemented something close to it.

My approach was slightly different. I had a panel attached to the login box called “retrieve password”. Whenever a user clicks on forgot password, the panel drops down and asks for the users email id. Wait, you must be thinking – “what’s the big deal, many websites do that”.

My code was built in a way to display results instantly like autocomplete. As soon as a user starts typing his or her registered email id, the suggestion box starts displaying all profiles that match (with name, email, profile image, etc.). As soon as the user finds his or her match, the user clicks on that particular record.

When the record is clicked, the “forgot password” algorithm fires the main step. An email is sent instantly to the user’s registered email id. Isn’t that awesome?

This system has all the requirements of a forgot password algorithm –

  1. Safely transfers the password to the registered email. So no hacking possible.
  2. User gets to know immediately if someone else tries to reset password.
  3. User friendly and appealing.
  4. Fantastic UI experience.

I have not included codes or demos for this mechanism in this tutorial. However, I plan to do so in the near future according to my readers reviews.

Comments are closed.