AJAX With HTTP Basic Authentication (A Simple Example)

Welcome to a tutorial on how to do an AJAX call with HTTP basic authentication. So you are looking to protect a certain part of your website, but don’t want to create a complicated user login system? HTTP Basic Authentication is a possible option.

That covers the basics, but let us walk through an actual example in this guide – Read on!

ⓘ I have included a zip file with all the example source code at the start of this tutorial, so you don’t have to copy-paste everything… Or if you just want to dive straight in.

 

 

TLDR – QUICK SLIDES

Fullscreen Mode – Click Here

 

TABLE OF CONTENTS

 

 

QUICK NOTES

• Edit protected\.htaccess, set AuthUserFile to the correct path.
• Access main.html to start the demo. A reminder to use http://, not file://.
• The default user and password in this example is USER and PASS.

If you spot a bug, feel free to comment below. I try to answer short questions too, but it is one person versus the entire world… If you need answers urgently, please check out my list of websites to get help with programming.

 

EXAMPLE CODE DOWNLOAD

Click here to download the source code, I have released it under the MIT license, so feel free to build on top of it or use it in your own project.

 

 

 

STEP 1) CREATE A PROTECTED FOLDER

First, we create a protected folder and put all the “secret” contents inside:

<p>uvuvwevwevwe onyetenyevwe ugwemubwem ossas</p>
<p>Wow. Very secret. Such protection. Much covert.</p>

 

STEP 2) CREATE USER & PASSWORD

2A) USING HTPASSWD

Apache Webserver comes with a tool called htpasswd, and we use it to generate the .htpasswd user/password file:

D:\XAMPP\apache\bin>htpasswd -c "D:\http\protected\.htpasswd" USER
New password: ********
Re-type new password: ********
Adding password for user USER

Yes, we can add more users to the existing .htpasswd file easily using the same htaccess tool:

D:\XAMPP\apache\bin>htpasswd "D:\http\protected\.htpasswd" USER2
New password: ****
Re-type new password: ****
Adding password for user USER2

 

2B) USING ONLINE GENERATORS

If you are using a shared host and cannot access htpasswd, the alternative is to use one of the several online generators:

• htaccesstools
• Web Generators
• Ask Apache

 

 

2C) OTHER WEB SERVERS

If you are not using Apache HTTP server – IIS and NGINX both support basic HTTP authentication as well. Just do a quick search online, and there are tons of guides available.

 

STEP 3) PROTECT THE FOLDER

Next, we create a .htaccess file to secure this folder.

AuthType Basic
AuthName "Password Required"
AuthUserFile D:\http\protected\.htpasswd
Require valid-user

That’s all. The next time someone visits http://my-site.com/protected/, the browser will prompt for a user and password.

 

STEP 4) AJAX-HTTP AUTHENTICATION

4A) THE HTML

<!-- (A) "LOGIN FORM" -->
<form onsubmit="return load()">
  <input type="text" id="user-name" placeholder="Name" value="USER" required>
  <input type="password" id="user-pass" placeholder="Password" value="PASS" required>
  <input type="submit" value="Load!">
</form>
 
<!-- (B) CONTAINER TO LOAD CONTENTS VIA AJAX -->
<div id="load-here"></div>

Nothing much on the HTML page itself. Just a “login form”, and prepare a container <div id="load-here"> to AJAX load the contents into.

 

4B) JAVASCRIPT – AJAX AUTHENTICATION

<!-- (C) AJAX HTTP AUTHENTICATION -->
<script>
function load () {
// OPTIONAL BACKWARD COMPATIBILITY - POLYFILL FOR BASE64 ENCODE
// if (window.btoa === undefined) { LOAD POLYFILL }
// https://github.com/MaxArt2501/base64-js

  // (C1) AUTHORIZATION USER + PASSWORD
  var name = document.getElementById("user-name").value,
      pass = document.getElementById("user-pass").value
      token = "Basic " + window.btoa(name + ":" + pass);

  // (B) AJAX CALL
  var xhr = new XMLHttpRequest();
  xhr.open("GET", "protected/secret.html");
  xhr.setRequestHeader("Authorization", token);
  xhr.onload = function(){
    if (this.status==200) {
      document.getElementById("load-here").innerHTML = this.response;
    } else {
      alert("HTTP ERROR " + this.status);
    }
  };
  xhr.send();
  return false;
}
</script>

Yep, that’s all to the “magic” – The AJAX call is pretty much the same, except that:

• We set an authorization header xhr.setRequestHeader("Authorization", token) to it.
• Also, check on the status of the given user and password is valid with if (this.status==200); That is, if the HTTP response code is not 200 (successful) something has gone wrong.

 

 

HARD-CODING THE USER & PASSWORD?

Yes, we can “hard code” the user and password directly into Javascript. But that makes no sense, it will be fully in plain sight within the Javascript – Anyone can just grab and use it.

 

 

LINKS & REFERENCES

• Basic Authentication and Authorization – Apache
• htpasswd – Manage user files for basic authentication
• Basic Authentication For IIS – Microsoft
• Basic Authentication For NGINX
• AJAX Beginner’s Tutorial – Code Boxx

 

INFOGRAPHIC CHEAT SHEET