Your Web News in One Place

An Interest In:

Web News this Week

Search Archive

Some of Our Sources

View All Sources

Help Webnuz

Referal links:

Sign up for GreenGeeks web hosting
October 9, 2020 01:37 am

How to Implement Email Verification for New Members


Have you ever created an account with a website, and were required to check your email and click through a verification link sent by the company in order to activate it? Doing so highly reduces the number of spam accounts. In this lesson, we'll learn how to do this very thing!

Looking for a Shortcut?

This tutorial teaches you to build an email verification script from scratch, but if you want something that you can use on your website right away, check out some of the great email forms and scripts on CodeCanyon.

Building an Email Verification and Sign-up Script

What Are We Going to Build?

We are going to build a nice PHP sign-up script where a user can create an account to gain access to the "members only section" of a website.

After the user creates their account, the account will then be locked until the user clicks a verification link that they will receive in their  email inbox.


1. Build a Sign-up Page

We first need a simple page where our visitors can sign up their accounts.

index.php: This is our sign up page with a basic form.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "https://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="https://www.w3.org/1999/xhtml">
<head>
    <title>NETTUTS > Sign up</title>
    <link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <!-- start header div -->
    <div id="header">
        <h3>NETTUTS > Sign up</h3>
    </div>
    <!-- end header div -->  
     
    <!-- start wrap div -->  
    <div id="wrap">
         
        <!-- start php code -->
         
        <!-- stop php code -->
     
        <!-- title and description -->   
        <h3>Signup Form</h3>
        <p>Please enter your name and email addres to create your account</p>
         
        <!-- start sign up form -->  
        <form action="" method="post">
            <label for="name">Name:</label>
            <input type="text" name="name" value="" />
            <label for="email">Email:</label>
            <input type="text" name="email" value="" />
             
            <input type="submit" class="submit_button" value="Sign up" />
        </form>
        <!-- end sign up form -->
         
    </div>
    <!-- end wrap div -->
</body>
</html>

css/style.css: This is the stylesheet for index.php and other pages.

/* Global Styles */
 
*{
    padding: 0; /* Reset all padding to 0 */
    margin: 0; /* Reset all margin to 0 */
}
 
body{
    background: #F9F9F9; /* Set HTML background color */
    font: 14px "Lucida Grande";  /* Set global font size & family */
    color: #464646; /* Set global text color */
}
 
p{
    margin: 10px 0px 10px 0px; /* Add some padding to the top and bottom of the <p> tags */
}
 
/* Header */
 
#header{
    height: 45px; /* Set header height */
    background: #464646; /* Set header background color */
}
 
#header h3{
    color: #FFFFF3; /* Set header heading(top left title ) color */
    padding: 10px; /* Set padding, to center it within the header */
    font-weight: normal; /* Set font weight to normal, default it was set to bold */
}
 
/* Wrap */
 
#wrap{
    background: #FFFFFF; /* Set content background to white */
    width: 615px; /* Set the width of our content area */
    margin: 0 auto; /* Center our content in our browser */
    margin-top: 50px; /* Margin top to make some space between the header and the content */
    padding: 10px; /* Padding to make some more space for our text */
    border: 1px solid #DFDFDF; /* Small border for the finishing touch */
    text-align: center; /* Center our content text */
}
 
#wrap h3{
    font: italic 22px Georgia; /* Set font for our heading 2 that will be displayed in our wrap */
}
 
/* Form & Input field styles */
 
form{
    margin-top: 10px; /* Make some more distance away from the description text */
}
 
form .submit_button{
    background: #F9F9F9; /* Set button background */
    border: 1px solid #DFDFDF; /* Small border around our submit button */
    padding: 8px; /* Add some more space around our button text */
}
 
input{
    font: normal 16px Georgia; /* Set font for our input fields */
    border: 1px solid #DFDFDF; /* Small border around our input field */
    padding: 8px; /* Add some more space around our text */
}

Here's what the HTML and CSS look like when they're rendered in the browser.

Sign Up Form

As you can see, I have added a comment to each line that describes what they do. Also, you might have noticed the following comment in the index.php file:

<!-- start php code -->
 
<!-- stop php code -->

We are going to write our PHP between these 2 lines!

2. Input Validation

The first thing we are going to build is a piece of code that's going to validate the information. Here is a short list detailing what needs to be validated.


  • the name field is not empty

  • the name is not to short

  • the email field is not empty

  • the email address is valid with the form [email protected]

So our first step is checking if the form is being submitted, and that the fields are not empty.

<!-- start PHP code -->
<?php
 
    if(isset($_POST['name']) && !empty($_POST['name']) AND isset($_POST['email']) && !empty($_POST['email'])){
        // Form Submited
    }
             
?>
<!-- stop PHP Code -->

Time for a breakdown! We start of with an IF statement and we are first validating the name field:

if(  ){ // If statement is true run code between brackets
 
}
 
isset($_POST['name']) // Is the name field being posted; it does not matter whether it's empty or filled.
&& // This is the same as the AND in our statement; it allows you to check multiple statements.
!empty($_POST['name']) // Verify if the field name is not empty
 
isset($_POST['email']) // Is the email field being posted; it does not matter if it's empty or filled.
&& // This is the same as the AND in our statement; it allows you to check multiple statements.
!empty($_POST['email']) // Verify if the field email is not empty

So if you would submit the form now with empty fields, nothing happens. If you fill in both fields then our script will run the code between the brackets.

Now we are going to create a piece of code that will check if an email address is valid. If it's not, we will return a error. Also let's turn our post variables into local variables:

if(isset($_POST['name']) && !empty($_POST['name']) AND isset($_POST['email']) && !empty($_POST['email'])){
    $name = mysql_escape_string($_POST['name']); // Turn our post into a local variable
    $email = mysql_escape_string($_POST['email']); // Turn our post into a local variable
}

We can now reach our data via our local variables. As you can see, I also added a MySQL escape string to prevent MySQL injection when inserting the data into the MySQL database.

The mysql_real_escape_string() function escapes special characters in a string for use in an SQL statement.

Regular Expressions

Next up is a small snippet that checks if the email address is valid.

$name = mysql_escape_string($_POST['name']);
$email = mysql_escape_string($_POST['email']);             
             
if(!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email)){
    // Return Error - Invalid Email
}else{
    // Return Success - Valid Email
}

Please note that I did not personally write this regular expression, it's a small snippet from php.net. Basically, it verifies if the email is written in the following format:

[email protected]

In the eregi function call, you can see that it checks if the email contains characters from the alphabet, if it has any numbers, or a phantom dash (_), and of course the basic requirements for an email with an @ symbol and a . in the domain. If these characteristics are not found, the expression returns false. 

Okay, so now we need to add some basic error messages.

if(!eregi("^[_a-z0-9-]+(\.[_a-z0-9-]+)*@[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$", $email)){
    // Return Error - Invalid Email
    $msg = 'The email you have entered is invalid, please try again.';
}else{
    // Return Success - Valid Email
    $msg = 'Your account has been made, <br /> please verify it by clicking the activation link that has been send to your email.';
}

As you can see we have made a local variable $msg, this allows us to show the error or the success message anywhere on the page.

And we are going to display it between the instruction text and the form.

<!-- title and description -->    
<h3>Signup Form</h3>
<p>Please enter your name and email address to create your account</p>
     
<?php 
    if(isset($msg)){  // Check if $msg is not empty
        echo '<div class="statusmsg">'.$msg.'</div>'; // Display our message and wrap it with a div with the class "statusmsg".
    } 
?>
     
<!-- start sign up form -->

Finally, we'll add a bit of CSS to style.css, to style our status message a bit.

#wrap .statusmsg{
    font-size: 12px; /* Set message font size  */
    padding: 3px; /* Some padding to make some more space for our text  */
    background: #EDEDED; /* Add a background color to our status message   */
    border: 1px solid #DFDFDF; /* Add a border arround our status message   */
}
Sign Up Form

3. Creating the Database & Establishing a Connection

Now we need to establish a database connection and create a table to insert the account data. So let's go to PHPMyAdmin and create a new database with the name registrations and create a user account that has access to that database in order to insert and update data.

Let's create our users table, with 5 fields:

Create DB

Now we must enter details for these fields:

Create Table

For those who don't want to input this data manually, you can instead run the following SQL code.

CREATE TABLE `users` (
`id` INT( 10 ) NOT NULL AUTO_INCREMENT PRIMARY KEY ,
`username` VARCHAR( 32 ) NOT NULL ,
`password` VARCHAR( 32 ) NOT NULL ,
`email` TEXT NOT NULL ,
`hash` VARCHAR( 32 ) NOT NULL ,
`active` INT( 1 ) NOT NULL DEFAULT '0'
) ENGINE = MYISAM ;

Our database is created, now we need to establish a connection using PHP. We'll write the following code at the start of our script just below the following line:

<!-- start PHP code -->
<?php
// Establish database connection

We'll use the following code to connect to the database server and select the registrations database with a basic MySQL connection.

mysql_connect("localhost", "username", "password") or die(mysql_error()); // Connect to database server(localhost) with username and password.
mysql_select_db("registrations") or die(mysql_error()); // Select registrations database.

Now that we've established a connection to our database, we can move on to the next step and insert the account details.


4. Insert Account

Now it's time to enter the submitted account details to our database and generate an activation hash. Write the following code below this line:

// Return Success - Valid Email
$msg = 'Your account has been made, <br /> please verify it by clicking the activation link that has been send to your email.';

Activation Hash

In our database we made a field called hash, this hash is a 32 character string of text. We also send this code to the user's email address. They then can click the link (which contains the hash) and we will verify if it matches up with the one in the database. Let's create a local variable called $hash and generate a random MD5 hash.

$hash = md5( rand(0,1000) ); // Generate random 32 character hash and assign it to a local variable.
// Example output: f4552671f8909587cf485ea990207f3b

What did we do? Well we are using the PHP function rand to generate a random number between 0 and 1000. Next our MD5 function will turn this number into a 32 character string of text which we will use in our activation email. 

MD5 is a good choice for generating random strings. It also used to be a common choice for hashing passwords, but it has been shown to not be secure for passwords. Instead, use the password_hash function.

Creating a Random Password

The next thing we need to is to create a random password for our member:

$password = rand(1000,5000); // Generate random number between 1000 and 5000 and assign it to a local variable.
// Example output: 4568

Insert the following information into our database using a MySQL query

mysql_query("INSERT INTO users (username, password, email, hash) VALUES(
'". mysql_escape_string($name) ."', 
'". mysql_escape_string(password_hash($password)) ."', 
'". mysql_escape_string($email) ."', 
'". mysql_escape_string($hash) ."') ") or die(mysql_error());

As you can see, we insert all data with a MySQL escape string around it to prevent any MySQL injection.

You also might notice that the password_hash function changes the random password into a secure hash for protection. Example: if an "evil" person gains access to the database, he can't read the passwords.

For testing, fill in the form and check if the data is being inserted into our database.


5. Send the Verification Email

Right after we have inserted the information into our database, we need to send an email to the user with the verification link. So let's use the PHP mail function to do just that.

$to      = $email; // Send email to our user
$subject = 'Signup | Verification'; // Give the email a subject 
$message = '
 
Thanks for signing up!
Your account has been created, you can login with the following credentials after you have activated your account by pressing the url below.
 
------------------------
Username: '.$name.'
Password: '.$password.'
------------------------
 
Please click this link to activate your account:
http://www.yourwebsite.com/verify.php?email='.$email.'&hash='.$hash.'
 
'; // Our message above including the link
                     
$headers = 'From:[email protected]' . "\r\n"; // Set from headers
mail($to, $subject, $message, $headers); // Send our email

In the code above we send a short description to our user which contains the username and password—using the local variables we created when the data was posted. Then we created a dynamic link. 

The result of all this will look as follows:

Email Result

As you can see, it creates a URL which is impossible to guess. This is a very secure way to verify the email address of a user.


6. Account Activation

As you can see, our URL links to verify.php so let's create that file, using the same basic template we used for index.php.

However, remove the form from the template.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>NETTUTS > Sign up</title>
    <link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <!-- start header div --> 
    <div id="header">
        <h3>NETTUTS > Sign up</h3>
    </div>
    <!-- end header div -->   
     
    <!-- start wrap div -->   
    <div id="wrap">
        <!-- start PHP code -->
        <?php
         
            mysql_connect("localhost", "tutorial", "password") or die(mysql_error()); // Connect to database server(localhost) with username and password.
            mysql_select_db("registrations") or die(mysql_error()); // Select registration database.
             
        ?>
        <!-- stop PHP Code -->
 
         
    </div>
    <!-- end wrap div --> 
</body>
</html>

The first thing we need to do is check if we have our $_GET variables (for the email and hash).

if(isset($_GET['email']) && !empty($_GET['email']) AND isset($_GET['hash']) && !empty($_GET['hash'])){
    // Verify data
}else{
    // Invalid approach
}

To make things a bit easier, let's assign our local variables. We'll also add some MySQL injection prevention by, once again, using the MySQL escape string.

if(isset($_GET['email']) && !empty($_GET['email']) AND isset($_GET['hash']) && !empty($_GET['hash'])){
    // Verify data
    $email = mysql_escape_string($_GET['email']); // Set email variable
    $hash = mysql_escape_string($_GET['hash']); // Set hash variable
}

Next thing is to check the data from the URL against the data in our database using a MySQL query.

$search = mysql_query("SELECT email, hash, active FROM users WHERE email='".$email."' AND hash='".$hash."' AND active='0'") or die(mysql_error()); 
$match  = mysql_num_rows($search);

In the code above, we used a MySQL SELECT statement, and checked if the email and hash matched. But beside that, we checked if the status of the account is inactive. Finally, we use mysql_num_rows to determine how many matches have been found. So let's try this out. Just use a simple echo to return the results.

$search = mysql_query("SELECT email, hash, active FROM users WHERE email='".$email."' AND hash='".$hash."' AND active='0'") or die(mysql_error()); 
$match  = mysql_num_rows($search);
 
echo $match; // Display how many matches have been found -> remove this when done with testing ;)
Link Result

We have a match! To change the result, simply change the email and you'll see that the number returned is 0.

So, we can use our $match variable to either activate the account or return a error when no match has been found.

if($match > 0){
    // We have a match, activate the account
}else{
    // No match -> invalid url or account has already been activated.
}

In order to activate the account, we must update the active field to 1 using a MySQL query.

// We have a match, activate the account
mysql_query("UPDATE users SET active='1' WHERE email='".$email."' AND hash='".$hash."' AND active='0'") or die(mysql_error());
echo '<div class="statusmsg">Your account has been activated, you can now login</div>';

So we use the same search terms for the update as we used in our MySQL select query. We change active to 1 wherever the email, hash and active fields have the right values. We also return a message telling the user that his account has been activated. You can add a message like we did here to the no match part. So the final code should look similar to the following:

mysql_connect("localhost", "tutorial", "password") or die(mysql_error()); // Connect to database server(localhost) with username and password.
mysql_select_db("registrations") or die(mysql_error()); // Select registration database.
             
if(isset($_GET['email']) && !empty($_GET['email']) AND isset($_GET['hash']) && !empty($_GET['hash'])){
    // Verify data
    $email = mysql_escape_string($_GET['email']); // Set email variable
    $hash = mysql_escape_string($_GET['hash']); // Set hash variable
                 
    $search = mysql_query("SELECT email, hash, active FROM users WHERE email='".$email."' AND hash='".$hash."' AND active='0'") or die(mysql_error()); 
    $match  = mysql_num_rows($search);
                 
    if($match > 0){
        // We have a match, activate the account
        mysql_query("UPDATE users SET active='1' WHERE email='".$email."' AND hash='".$hash."' AND active='0'") or die(mysql_error());
        echo '<div class="statusmsg">Your account has been activated, you can now login</div>';
    }else{
        // No match -> invalid url or account has already been activated.
        echo '<div class="statusmsg">The url is either invalid or you already have activated your account.</div>';
    }
                 
}else{
    // Invalid approach
    echo '<div class="statusmsg">Invalid approach, please use the link that has been send to your email.</div>';
}
Account Activation

If you visit verify.php without any strings, the follow error will be shown:

Invalid Approch

7. Create the Login 

In this final step, I will show you how to create a basic login form and check if the account is activated. First create a new file called login.php with the basic template we used before, but this time I changed the form into a login form.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>NETTUTS > Sign up</title>
    <link href="css/style.css" type="text/css" rel="stylesheet" />
</head>
<body>
    <!-- start header div --> 
    <div id="header">
        <h3>NETTUTS > Sign up</h3>
    </div>
    <!-- end header div -->   
     
    <!-- start wrap div -->   
    <div id="wrap">
        <!-- start PHP code -->
        <?php
         
            mysql_connect("localhost", "tutorial", "password") or die(mysql_error()); // Connect to database server(localhost) with username and password.
            mysql_select_db("registrations") or die(mysql_error()); // Select registration database.
                 
             
        ?>
        <!-- stop PHP Code -->
     
        <!-- title and description -->    
        <h3>Login Form</h3>
        <p>Please enter your name and password to login</p>
         
        <?php 
            if(isset($msg)){ // Check if $msg is not empty
                echo '<div class="statusmsg">'.$msg.'</div>'; // Display our message and add a div around it with the class statusmsg
            } ?>
         
        <!-- start sign up form -->   
        <form action="" method="post">
            <label for="name">Name:</label>
            <input type="text" name="name" value="" />
            <label for="password">Password:</label>
            <input type="password" name="password" value="" />
             
            <input type="submit" class="submit_button" value="Sign up" />
        </form>
        <!-- end sign up form --> 
         
    </div>
    <!-- end wrap div --> 
</body>
</html>

The form is basic HTML, and is almost the same as the signup form, so no further explanation is needed. 

Now it's time to write the code for the login script. We'll add this just below the MySQL connection code. We start with something we also did in the signup form.

We first check to see if the data is being posted, and we make sure that it's not empty.

if(isset($_POST['name']) && !empty($_POST['name']) AND isset($_POST['password']) && !empty($_POST['password'])) {
    $username = mysql_escape_string($_POST['name']); // Set variable for the username

    $result = mysql_fetch_assoc(mysql_query("SELECT password FROM users WHERE active = '1' AND username = '" . $username . "'"));
    $password_hash = (isset($result['password']) ? $result['password'] : '');
    $result = password_verify($_POST['password'], $password_hash);
}

Next, we've created the connection to our users table and verified if the entered data is correct. We wrote a MySQL query which would select the password hash from the database associated with the entered username. Finally, we've used the password_verify function to verify the input password. The $result contains TRUE if the user has entered the correct password, otherwise it would be FALSE.

And the active condition is important! This is what makes sure that you can only login if your account has been activated.

if($result){
    $msg = 'Login Complete! Thanks';
    // Set cookie / Start Session / Start Download etc...
}else{
    $msg = 'Login Failed! Please make sure that you enter the correct details and that you have activated your account.';
}

In the code above we check if the login was a success or not.

Conclusion

And that's all it takes to create a complete email validation and login system in PHP! I hope you enjoyed the post, and if you did please leave a comment below!

Coding your own PHP is great fun and of course is the foundation for a good app. However, to save time creating more specialized features or for complete applications that you can use and customize, take a look the professional PHP scripts on CodeCanyon.

You can explore thousands of the best and most useful PHP scripts ever created on CodeCanyon.

Here are a few of the best-selling and up-and-coming PHP scripts available on CodeCanyon for 2020.



Original Link: https://code.tutsplus.com/tutorials/how-to-implement-email-verification-for-new-members--net-3824

Share this article:    Share on Facebook
View Full Article

TutsPlus - Code

Tuts+ is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites.

More About this Source Visit TutsPlus - Code