how to change design /style of the WWW-Authenticate popup box to match my website theme?

Question

Halo there,

I need to change the look /design of the WWW-Authenticate popup box to match my website theme, I don't want it to show the default popup box for authentication when users need to login to secured pages. Below is the PHP script I used to create the WWW-Authenticate popup.

<?php

$_user_ = 'test';
$_password_ = 'test';

session_start();

$url_action = (empty($_REQUEST['action'])) ? 'logIn' : $_REQUEST['action'];
$auth_realm = (isset($auth_realm)) ? $auth_realm : '';

if (isset($url_action)) {
if (is_callable($url_action)) {
    call_user_func($url_action);
} else {
    echo 'Function does not exist, request terminated';
};
};

function logIn() {
global $auth_realm;

if (!isset($_SESSION['username'])) {
    if (!isset($_SESSION['login'])) {
        $_SESSION['login'] = TRUE;
       header('WWW-Authenticate: Basic realm="'.$auth_realm.'"');
       header('HTTP/1.0 401 Unauthorized');
        echo 'You must enter a valid login and password';
        echo '<p><a href="?action=logIn">Try again</a></p>';
        exit;
    } else {
        $user = isset($_SERVER['PHP_AUTH_USER']) ? $_SERVER['PHP_AUTH_USER'] : '';
        $password = isset($_SERVER['PHP_AUTH_PW']) ? $_SERVER['PHP_AUTH_PW'] : '';
        $result = authenticate($user, $password);
        if ($result == 0) {
            $_SESSION['username'] = $user;
        } else {
            session_unset($_SESSION['login']);
            errMes($result);
            echo '<p><a href="?action=logIn">Try again</a></p>';
            exit;
        };
    };
 };
}

function authenticate($user, $password) {
global $_user_;
global $_password_;

if (($user == $_user_)&&($password == $_password_)) { return 0; }
else { return 1; };
}

function errMes($errno) {
   switch ($errno) {
    case 0:
        break;
    case 1:
        echo 'The username or password you entered is incorrect';
        break;
    default:
        echo 'Unknown error';
};
}

function logOut() {

session_start();
session_destroy();
header("Location: index.html");

}

?>

And the following is my code that I use in all pages I need to secure or protect.

<?php
require_once 'auth.php';
echo "You've logged in as {$_SESSION['username']}<br>";
echo '<p><a href="?action=logOut">LogOut</a></p>'
?>

Please help...And recall that the code works fine I only want to change the look. Thanx in advanced :)

score 1 · Accepted Answer · edited Mar 17 '17 at 13:14

Two options:

Javascript

Use javascript to construct a url in the form of http://username:password@domain.com upon form submission, set document.location to the constructed url and the browser will redirect whilst automatically authenticating.

Server Side

Allow the form to submit to itself and use server side code to perform the same redirect - I recommend using a 307 redirect.

In php:

redirect("http://username:password@domain.com", 307);

Downsides

Both versions will still result in the web browser showing the ugly authentication box if the initial username and password submission is incorrect.

If you need to avoid this scenario then you will need to implement your own server side authentication scheme.

More detail

If you can tell me which option you believe you will favour, I can show a little more example code.

Security Implications

There are security implications to using HTTP basic auth. If you do not use SSL then passwords will be sent in cleartext. Using the above methods will send the password in cleartext as part of the URL. There are other security implications too:

https://security.stackexchange.com/questions/988/is-basic-auth-secure-if-done-over-https

Because of these I would always recommend against using http basic auth. Many users may be using the same password for sensitive accounts so it's well worth investing a little time in even a basic authentication system.

note that some browsers don't like redirects/links/... containing auth inofmration after too many spamers/phishers used URLs like www.your.bank.example.com:enter@spam-host.example.com/some/long/path — johannes, Jan 31 '13 at 15:53
@michaelward82 thanx a lot for the feedback I would prefer the javascript option, If you help with that I'l really appreciate it. There's nothing much I'm protecting its just 3 html pages containing photo albums of ceremonies that will only be seen by the family...So i don't think i'l go an extra mile just to protect images that no one cares to see... — Lord-David, Feb 01 '13 at 06:26
Are you using, or would be willing to use, a javascript framework (jQuery, etc.)? jQuery code is so much simpler than vanilla javascript... — michaelward82, Feb 01 '13 at 09:55
Sorry I haven't posted the code yet, I have been busy recently. I will try to post the code today. — michaelward82, Feb 05 '13 at 10:02

score 0 · Answer 2 · answered Jan 31 '13 at 15:01

0

You can't change the style of the pop-up box. You will have to create your own login form on your site.

answered Jan 31 '13 at 15:01

Spirit55555

1
3