Welcome back! Today’s tutorial will focus on creating a simple and functioning login page that validates a user’s credentials.
I use the term validate instead of authenticate because this is truly not a secure or fool-proof login system using CCB’s API.
The API service we’ll use, Individual Profile from Login and Password, simply states that using this service returns an individual profile for the login and password provided.
However, with a bit of elbow grease, we’re going to use this service to create a simple login page.
Again, please don’t confuse this simple login system for an enterprise-grade authentication system.
Creating the simple login page
One of the first things needed is creating an HTML5 page and form using a bit of HTML and PHP. Using a text editor of your choice, create and save a PHP file named ccblogin.php.
Next, use the HTML and PHP provided below to create your form, form fields, and other page details for the Login Page (i.e., ccblogin.php).
You’ll notice a few things about the code. First, there are PHP variables used as well as an if else statement using logic to determine whether or not credentials submitted are successfully associated with a CCB profile.
Essentially, if the clearFields variable is set, defined, or classified as existing, then the form is shown.
If the clearFields variable does not exist, then it means a CCB profile has been identified using the submitted credentials from the login form.
Next, let’s focus on the form submission and logic.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
</head>
<body>
<?
// $msgZ variable will display a message should an error exist, and nothing should an error not exist.
echo $msgZ;
// if $clearFields is set, then show the form; if not, don't show form. Pretty simple.
if($clearFields){
?>
<form action="" method="POST">
Username:<br>
<input type="text" name="user" value="<? echo $uname; ?>" required>
<br>
Password:<br>
<input type="password" name="pass" required>
<p>
<input type="submit" name="submit" value="Login">
</p>
</form>
<? } else { ?>
<p>Yay, you've successfully logged in using <b><? echo $uname; ?></b>!</p>
<? } ?>
</body>
</html>Login page form logic
Now that the login page HTML and PHP exists, it’s time to craft the the form logic to handle form submission and data.
But before this can happen, be sure to include the necessary comments and the config.php file.
Next, define the following variables and their respective values:
- response_object – this variable’s value is defined as empty, and is used to display notification messages to user via the web browser.
- uname – this variable’s value is defined as empty, and is used for the submitted username from the form.
- upass – this variable’s value is defined as empty, and is used for the submitted password from the form.
- clearFields – this variable’s value is defined as 1 (one) by default, and is used in the if else statement (as mentioned in previous section) for showing or hiding the login form upon submission.
Once necessary variables have been defined, then the logic for capturing whether or not the form has been submitted can be created as shown below in the if statement:
<?PHP
/**
* individual login
*/
// contains resusable globals and functions
include("includes/config.php");
$response_object = $uname = $upass ='';
$clearFields = 1;
if(isset($_POST['submit']) && $_POST['submit'] == 'Login'){
}
$msgZ = $response_object;
?>Notice I’ve added a variable equals variable statement after the close of the if statement. This logic corresponds to the association of notification messages from the submission logic to HTML section when viewing from the web browser.
Once the form submission if statement is defined, then it’s time to sanitize user’s form input using PHP Global Variables:
- uname – variable for Username input field name of user (i.e., $_REQUEST[‘user’])
- upass – variable for Password input field name of pass (i.e., $_REQUEST[‘pass’])
For this example, since I have a MySQL database operating on this web server, I’m using mysql_real_escape_string to sanitize input.
If not operating MySQL, then feel free to use PHP’s FILTER_SANITIZE_STRING filter to remove tags, and remove or encode special characters from a string.
The next step to take is testing and ensuring both uname and upass variables are not empty using an if else statement and PHP’s empty method.
This logic is really not needed due to using HTML5’s native required attribute on form text and password fields (see images below). But it’s ALWAYS better to be safe than sorry by included this logic.
Within the if statement, we’ll use independent if statements in conjunction to using the empty method for uname and upass variables to define response_object variable with its respective error messages.
Next, it’s time to focus on finally making the CCB API Request.
<?PHP
$uname = mysql_real_escape_string($_REQUEST['user']);
$upass = mysql_real_escape_string($_REQUEST['pass']);
if(empty($uname) || empty($upass)){
if(empty($uname))
$response_object = 'Please enter a valid user name.';
if(empty($upass))
$response_object = 'Please enter a valid password.';
} else {
}
?>Make CCB API Request
Although previous sections likely have no resemblance to previous tutorials, you’ll likely feel at home with this section as it very much resembles tutorials from previous weeks.
We were last working within the if statement of validating whether or not the submitted fields were empty.
We’ve completed the section for if fields were empty. It’s now time to complete the section to check and validate whether or not a CCB profile exists for submitted credentials.
Once of the first things to define is the apiService variable, which today’s tutorial uses the individual_profile_from_login_password API service (see CCB documentation).
Unlike most of the previous tutorials, this tutorial will use POST instead of GET. This means we’ll need to separate the apiService variable from the traditional urlData variable data that is submitted for a GET request.
In short, create a servData variable and bind the CCB API srv parameter to the apiService variable.
Next, create the normal urlData variable, but don’t include the apiService variable when binding the CCB API login parameter to uname variable and the CCB API password parameter to upass variable.
Once both servData and urlData variables have been defined and binded accordingly, then it’s time to pass both to the ccbDetails function to make the CCB API request to check and validate credentials.
Be sure to set the first parameter of the ccbDetails function to be post and not get, passing the urlData variable as the second variable and the servData variable as the third variable.
The ccbDetails function does the heavy lifting to authenticate, authorize, access, and retrieve data from the CCB system.
Once the response is successfully returned as defined by the rss variable, create a nodes variable and set it equal to the rss variable.
The rss variable uses a reference or pointer to parse the response data using the following expression in conjunction to PHP’s XPATH query method: //individuals/individual.
The next part of the tutorial is the most critical. This next line of code actually determines whether or not a CCB profile has been returned for the submitted credentials.
If a CCB profile exists, then the nodes variable count should be greater than 1 (one). If a CCB profile does not exist, then the nodes variable is 0 (zero).
That being stated, create a theCount variable and set it equal to PHP’s built-in count method, passing to it the nodes variable.
Following this line of code, create an error message by default for when a CCB Profile does not exist for submitted credentials using the response_object variable.
Following this logic, create an if statement for when the value of theCount variable is greater than 0 (zero), meaning a CCB Profile has been returned for submitted credentials.
Within this if statement, set the response_object variable to a successful login message and then set the clearFields variable to equal 0 (zero).
If you remember referencing the clearFields variable in previous sections, then recall that setting the clearFields variable to 0 (zero) hides the login form and displays a successful login message instead.
And that’s all the logic and code needed for a form submission and CCB API POST request.
<?PHP
$apiService = 'individual_profile_from_login_password';
$servData = array_filter( array(
'srv' => "$apiService"
) );
$urlData = array_filter( array(
'login' => "$uname",
'password' => "$upass"
) );
$rss = ccbDetails('post',$urlData,$servData); // transform to XML
$nodes = $rss->xpath('//individuals/individual'); // xpath for individuals->individual
$theCount = count($nodes);
$response_object = 'Login failed! Please try again.';
if( $theCount > 0){
$response_object = ' Successful login.';
$clearFields = 0;
}
?>Bringing it all together for the finale
When combining each of the aforementioned sections into one file, your code should appear as follows:
<?PHP
/**
* individual login
*/
// contains resusable globals and functions
include("includes/config.php");
$response_object = $uname = $upass ='';
$clearFields = 1;
if(isset($_POST['submit']) && $_POST['submit'] == 'Login'){
$uname = mysql_real_escape_string($_REQUEST['user']);
$upass = mysql_real_escape_string($_REQUEST['pass']);
if(empty($uname) || empty($upass)){
if(empty($uname))
$response_object = 'Please enter a valid user name.';
if(empty($upass))
$response_object = 'Please enter a valid password.';
} else {
$apiService = 'individual_profile_from_login_password';
$servData = array_filter( array(
'srv' => "$apiService"
) );
$urlData = array_filter( array(
'login' => "$uname",
'password' => "$upass"
) );
$rss = ccbDetails('post',$urlData,$servData); // transform to XML
$nodes = $rss->xpath('//individuals/individual'); // xpath for individuals->individual
$theCount = count($nodes);
$response_object = 'Login failed! Please try again.';
if( $theCount > 0){
$response_object = ' Successful login.';
$clearFields = 0;
}
}
}
$msgZ = $response_object;
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Login Page</title>
</head>
<body>
<?
// $msgZ variable will display a message should an error exist, and nothing should an error not exist.
echo $msgZ;
// if $clearFields is set, then show the form; if not, don't show form. Pretty simple.
if($clearFields){
?>
<form action="" method="POST">
Username:<br>
<input type="text" name="user" value="<? echo $uname; ?>" required>
<br>
Password:<br>
<input type="password" name="pass" required>
<p>
<input type="submit" name="submit" value="Login">
</p>
</form>
<? } else { ?>
<p>Yay, you've successfully logged in using <b><? echo $uname; ?></b>!</p>
<? } ?>
</body>
</html>Save the file (i.e., ccblogin.php) and open it via a web browser. The display should appear as the following:
Next step is to insert a valid CCB user’s credentials into the respective input fields and then submit the form.
If the credentials submitted are associated with a CCB profile, then the following is displayed via the web browser:
If the credentials submitted are NOT associated with a CCB profile, then the following is displayed via the web browser:
All in all, this specific API service can be used to create a simple login page that validates username and password credentials are associated with a given CCB profile.
Again, please don’t confuse this simple login system for an enterprise-grade authentication system.
However, with the right know of authentication and authorization systems, one could very well create their own login system should you not want to use off-the-shelf systems and services.
In closing, please do let me know if you have questions or comments concerning this tutorial. Thanks and see you back here next week for another tutorial.