Google+
4elements web design & consultancy

Shineyrock

web design & consultancy
Shineyrock web design & consultancy

Shineyrock

  1. web design en consultancy

blog

  1. Home
  2. blog
  3. lees
  4. How to Implement Email Verification for New Members
  • like 2 06

    How to Implement Email Verification for New Members

    1. May 2021
    2. Daily
    3. gelezen 0

    Have you ever created an account with a website and been required to check your email and click 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.

    After you learn how to verify email addresses in PHP in this tutorial, check out a small selection of these script templates that you can download today.

    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'll receive in their email inbox.

    1. Build a Sign-Up Page

    We first need a simple page where our visitors can sign up for 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.

    Verify Email Address PHP Script Tutorial Sign Up FormVerify Email Address PHP Script Tutorial Sign Up FormVerify Email Address PHP Script Tutorial Sign Up Form

    As you can see, I've 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 two 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 too short
    • the email field is not empty
    • the email address is valid with the form #censored#@xxx.#censored#

    So our first step is to check that the form has been 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 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 submit the form now with empty fields, nothing will happen. If you fill in both fields, then our script will run the code between the brackets.

    Now we're going to create a piece of code that will check if an email address is valid. If it's not, we'll 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:

    #censored#@xxx.#censored#

    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, which allows us to show the error or the success message anywhere on the page.

    And we're 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   */
}
    Verify Email Address PHP Script Tutorial Sign Up FormVerify Email Address PHP Script Tutorial Sign Up FormVerify Email Address PHP Script Tutorial 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 six fields:

    Verify Email Address PHP Script Tutorial Create DBVerify Email Address PHP Script Tutorial Create DBVerify Email Address PHP Script Tutorial Create DB

    Now we must enter details for these fields:

    Verify Email Address PHP Script Tutorial Create TableVerify Email Address PHP Script Tutorial Create TableVerify Email Address PHP Script Tutorial 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, so 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 into 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 can then click the link (which contains the hash), and we'll verify if it matches 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're 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'll 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 the 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. This way, if people with malicious intent gain access to the database, they won't be able to 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:noreply@yourwebsite.com' . "\r\n"; // Set from headers
mail($to, $subject, $message, $headers); // Send our email

    In the PHP send email verification 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 create a dynamic link. 

    The result of all this will look as follows:

    Verify Email Address PHP Script Tutorial Email ResultVerify Email Address PHP Script Tutorial Email ResultVerify Email Address PHP Script Tutorial 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
}

    The 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 besides that, we also 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 wink
    Verify Email Address PHP Script Tutorial Link ResultVerify Email Address PHP Script Tutorial Link ResultVerify Email Address PHP Script Tutorial 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 an 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 their 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>';
}
    Verify Email Address PHP Script Tutorial Account ActivationVerify Email Address PHP Script Tutorial Account ActivationVerify Email Address PHP Script Tutorial Account Activation

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

    Verify Email Address PHP Script Tutorial Invalid ApproachVerify Email Address PHP Script Tutorial Invalid ApproachVerify Email Address PHP Script Tutorial Invalid Approach

    7. Create the Login 

    In this final step, I'll 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 log in 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.

    Top PHP Form Scripts on CodeCanyon in 2021

    Setting up an email verification code generator is a useful skill to have in your arsenal. But if you don't have the time, then grab a professional template. They'll save you time and are designed to suit many website types. You can find some of the best PHP form script downloads with user email verification from CodeCanyon.

    1. Quform: Responsive AJAX Contact Form

    Quform is an excellent AJAX contact form that can be implemented on a number of websites. This download works without reloading the page, letting visitors finish your forms smoothly and quickly. Quform is also easily adapted to all types of forms, including registration and quote. This PHP form is a no-brainer if you want an easy-to-use script for your site.

    Quform AJAX Contact Form Template With User Email VerificationQuform AJAX Contact Form Template With User Email VerificationQuform AJAX Contact Form Template With User Email Verification

    2. Secure PHP Login and Registration System

    What this PHP script download does well is all in the name. Set up secure login and registration processes for your site that visitors can use easily. You can set up user email verification thanks to the built-in module. Forms made from these scripts can also be validated without refreshing the page.

    Secure PHP Login and Registration Download With Send Confirmation Email PHPSecure PHP Login and Registration Download With Send Confirmation Email PHPSecure PHP Login and Registration Download With Send Confirmation Email PHP

    3. Easy Forms: Advanced Form Builder and Manager

    Building the forms your site need don't get easier than with this PHP script download. It's packed with useful features, too many to list in this article. But here are a few features of Easy Forms you and your users will like to have:

    • spam filtering and reCAPTCHA
    • theme designer for forms
    • email verification sent to users
    • support for smartphones, tablets, and other mobile devices
    Easy Forms Template Download With Email Verification Code GeneratorEasy Forms Template Download With Email Verification Code GeneratorEasy Forms Template Download With Email Verification Code Generator

    4. PHP Form Builder

    Build contact forms, dynamic fields forms, and everything in between with PHP Form Builder. It has everything to make the process smooth, including a drag-and-drop builder. You can set up a registration and login form with a PHP send email verification code with no coding knowledge needed.

    Find Even More PHP Scripts From CodeCanyon

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

    PHP scripts on CodeCanyonPHP scripts on CodeCanyonPHP scripts on CodeCanyon

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

    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 it's 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 at the professional PHP scripts on CodeCanyon.

    PHP is a powerful scripting language that is used to keep all types of web functions ticking. If you're interested in learning more about PHP, you'll want to give these articles a look. They were written by the outstanding instructors of Envato Tuts+:

Per - categorie

    Op - datum

      Copyright © 1999 - 2024 Shineyrock web design en consultancy, Alle rechten voorbehouden / Algemene voorwaarden / Sitemap: XML, HTML, Images, Mobile, News