Following is a solution that requires very little modification to employ any number of radio button redirections from a login page. It includes fieldset / legend styling that is IE7 certified.
Attached is the md5 file that is required to run the script. I have renamed it out of personal concerns to 'jmd5.js', but credit to authors remains intact.
Overview ::
A basic login screen which validates against selected radio buttons, which alters the login to redirect the user to their desired place of action..
Context view ::
This script requires several pages. For each authentication-only page, you will need a corresponding 'authenticate[a].php' page, where a is for convenience an integer value.
login page 'index.php'
<?php
/////////////////////////////////////////////////////////////////////////////
//
// LOGIN PAGE
//
// Server-side:
// 1. Start a session
// 2. Clear the session
// 3. Generate a random challenge string
// 4. Save the challenge string in the session
// 5. Expose the challenge string to the page via a hidden input field
//
// Client-side:
// 1. When the completes the form and clicks on Login button
// 2. Validate the form (i.e. verify that all the fields have been filled out)
// 3. Set the hidden response field to HEX(MD5(server-generated-challenge + user-supplied-password))
// 4. Submit the form
//////////////////////////////////////////////////////////////////////////////////
session_start();
session_unset();
srand();
$challenge = "";
for ($i = 0; $i < 80; $i++) {
$challenge .= dechex(rand(0, 15));
}
$_SESSION[challenge] = $challenge;
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Administration</title>
<script type="text/javascript" src="/admin/jmd5.js"></script>
<script type="text/javascript">
function login() {
var loginForm = document.getElementById("loginForm");
if (loginForm.username.value == "") {
alert("Please enter your user name.");
return false;
}
if (loginForm.password.value == "") {
alert("Please enter your password.");
return false;
}
var submitForm = document.getElementById("submitForm");
submitForm.username.value = loginForm.username.value;
submitForm.response.value =
hex_md5(loginForm.challenge.value+loginForm.password.value);
submitForm.submit();
}
function changeAction() {
var homePanel = document.getElementById("home");
var inventoryPanel =document.getElementById("inventory");
var informationPanel =document.getElementById("information");
var optionsPanel =document.getElementById("options");
var submitFormAction = document.getElementById("submitForm");
if(homePanel.checked) {
submitFormAction.action="authenticate.php";
login();
}
else if(inventoryPanel.checked) {
submitFormAction.action="authenticate1.php";
login();
}
else if(informationPanel.checked) {
submitFormAction.action="authenticate2.php";
login();
}
else if(optionsPanel.checked) {
submitFormAction.action="authenticate3.php";
login();
}
else {
alert("Please select an administration panel.");
return false;
}
}
</script>
<style type="text/css">
body {
background: #CCCC99;
}
// IE7 hacks firefox ignores
html fieldset {
position: relative; margin-top: 1em; padding-top: 0.75em;
}
html legend {
position: absolute; top: -0.84em; left: 2em;
}
</style>
</head>
<body>
<br/>
<fieldset style="background: #FFFFCC; margin: auto; height: auto; width: auto;">
<legend style="background: #669966; height: auto; width: auto; padding: 5px; border: 1px solid #222; color: #fff; letter-spacing: 3px; font-weight: bold; font-size: 18px; font-family: Arial, Helvetica, sans-serif;">
Please Login
</legend>
<form id="loginForm" action="#" method="post">
<table width="381" height="244">
<?php if (isset($_REQUEST[error])) { ?>
<tr>
<td>Error</td>
<td style="color: red;"> </td>
<td style="color: red;"> </td>
<td style="color: red;"><?php echo $_REQUEST[error]; ?></td>
</tr>
<?php } ?>
<tr>
<td>User Name</td>
<td> </td>
<td> </td>
<td><input type="text" size="28" name="username"/></td>
</tr>
<tr>
<td>Password</td>
<td> </td>
<td> </td>
<td><input type="password" size="28" name="password"/></td>
</tr>
<tr>
<td> Select Control Panel </td>
<td> </td>
<td> </td>
<td><label>
<input type="radio" name="select_panel" value="home" id="home" />
Home</label></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><label>
<input type="radio" name="select_panel" value="inventory" id="inventory" />
Inventory</label></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><label>
<input type="radio" name="select_panel" value="information" id="information" />
Information</label></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td><label>
<input type="radio" name="select_panel" value="options" id="options" />
Options</label></td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td style="text-align: right; padding-right: 30px;">
<input type="hidden" name="challenge" value="<?php echo $challenge; ?>"/>
<input type="button" name="submit" value="Login" onclick="changeAction();"/></td>
</tr>
</table>
</form>
<form id="submitForm" action="index.php" method="post">
<div>
<input type="hidden" name="username"/>
<input type="hidden" name="response"/>
</div>
</form>
</fieldset>
</body>
</html>
'authenticate[zero to many].php'
<?php
/////////////////////////////////////////////////////////////////////////////
//
// AUTHENTICATE PAGE
//
// Server-side:
// 1. Get the challenge from the user session
// 2. Get the password for the supplied user (local lookup)
// 3. Compute expected_response = MD5(challenge+password)
// 4. If expected_response == supplied response:
// 4.1. Mark session as authenticated and forward to secret.php
// 4.2. Otherwise, authentication failed. Go back to index.php
//////////////////////////////////////////////////////////////////////////////////
$userDB = array("log" => "pass"); // array values for demonstration only, not for practical use !
// the following code works, never mind how, just that it works, and for multiple redirect,
// you only need to append one of these authentication pages to a radio button (as demonstrated)
// and then change the last line before exit() is called, to any page you want to make authentication-only
function getPasswordForUser($username) {
// get password from a simple associative array
// but this could be easily rewritten to fetch user info from a real DB
global $userDB; return $userDB[$username];
}
function validate($challenge, $response, $password) {
return md5($challenge . $password) == $response;
}
function authenticate() {
if (isset($_SESSION[challenge]) &&
isset($_REQUEST[username]) &&
isset($_REQUEST[response])) {
$password = getPasswordForUser($_REQUEST[username]);
if (validate($_SESSION[challenge], $_REQUEST[response], $password)) {
$_SESSION[authenticated] = "yes";
$_SESSION[username] = $_REQUEST[username];;
unset($_SESSION[challenge]);
} else {
header("Location:index.php?error=".urlencode("Failed authentication"));
exit;
}
} else {
header("Location:index.php?error=".urlencode("Session expired"));
exit;
}
}
session_start();
authenticate();
/* * * * */ /* * * * */ /* * * * */
header("Location:home_page_control.php"); /* * * * */ /* change location for each radio button redirect */
/* * * * */ /* * * * */ /* * * * */
exit();
?>
"common page" required for authentication, 'common.php'
<?php
////////////////////////////////////////////////////////////////////////////////
//
// COMMON PAGE
//
// Defines require_authentication() function:
// If the user is not authenticated, forward to the login page
//
////////////////////////////////////////////////////////////////////////////////
session_start();
function is_authenticated() {
return isset($_SESSION[authenticated]) &&
$_SESSION[authenticated] == "yes";
}
function require_authentication() {
if (!is_authenticated()) {
header("Location:index.php?error=".urlencode("Not_authenticated"));
// NOTE :: if the login page has been renamed from 'index.php', make the change here, above as well
exit;
}
}
?>
your authentication-only pages... such as 'inventory_control.php', 'options_control.php', etc.
<?php
////////////////////////////////////////////////////////////////////////////////
//
// SECRET PAGE
//
// Invokes require_authentication() to ensure that the user is authenticated
//
////////////////////////////////////////////////////////////////////////////////
require("common.php");
require_authentication();
?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
Logged in users only !
</body>
</html>
