Js AJAX auth
Introduction
Le mécanisme Auth Basic consiste a faire passer le login et le mot de passe dans le header "Authorization" de la requête HTTP.
Le login et le mot de passe sont ajoutés comme suit, login:password, puis encodé en base 64.
Par exemple, pour toto:password on aura le header suivant: Basic dG90bzpwYXNzd29yZA==
Mise en place
Coté Serveur
Nous allons gérer l'authentification en renvoyant le code 202 Accepted si l'authentification est correcte et 401 Authorization Required si elle échoue. Pour cela nous allons avoir besoin du code suivant dans le index.php :
<?php
// Utilisé pour autoriser les appel Web Service en AJAX depuis toutes les adresses
header ( "Access-Control-Allow-Origin: *" );
// Utilisé pour autoriser les méthodes GET, POST, PUT et DELETE
header ( "Access-Control-Allow-Methods: GET, POST, PUT, DELETE" );
// On autorise les données dans le header
header ( "Access-Control-Allow-Headers: Content-Type" );
// On positione l'encodage en UTF-8 sinon json_encode ne fonctionnera pas !
header ( 'Content-Type: application/json; charset=utf-8' );
// On inclut l'objet User ainsi que les classes nécessaires
function getServerVariable($var) {
if (isset ( $_SERVER [$var] ) && ! empty ( $_SERVER [$var] )) {
return $_SERVER [$var];
}
return false;
}
function main(){
$method = $_SERVER ['REQUEST_METHOD'];
if($method !== "GET"){
// HTTP 405 : Method Not Allowed
http_response_code(405);
echo json_encode(false);
}
$login = getServerVariable("PHP_AUTH_USER");
$password = getServerVariable("PHP_AUTH_PW");
if ($login === FALSE || $password === FALSE) {
// Pas d'identifiant on retourne false et HTTP 401 : Unauthorized
http_response_code ( 401 );
echo json_encode ( false );
return false;
}
if($login !== "toto" || $password !== "password"){
// Identifiants faux, on retourne false et HTTP 401 : Unauthorized
http_response_code ( 401 );
echo json_encode ( false );
}else{
// Identifiants ok, on retourne true et HTTP 202: Accepted
http_response_code ( 202 );
echo json_encode ( true );
}
}
main();
Coté client
Coté client, il nous trois fichiers. Le fichier ajax.js pour instancier l'objet XmlHttpRequest :
function getXhr() {
var xhr;
if (window.XMLHttpRequest) {
// code for IE7+, Firefox, Chrome, Opera, Safari
xhr = new XMLHttpRequest();
} else {
// code for IE6, IE5
xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
return xhr;
}
Le fichier auth.js qui va faire l'authentification :
function auth(user, password) {
// Création de l'objet XHR
var xhr = getXhr();
// Ouverture de l'URL en GET
xhr.open("GET", "http://127.0.0.1", false);
// Envoie de la requête
xhr.setRequestHeader("Authorization", "Basic " + btoa(user + ":" + password));
xhr.send();
// Récupération de la réponse
return xhr.status == 202;
}
function doAuth(user, password){
if(auth(user, password)){
alert("Auth OK!");
}else{
alert("Try again");
}
}
Et enfin, le fichier index.html pour appeler le tout :
<html>
<head>
<script type="text/javascript" src="ajax.js"></script>
<script type="text/javascript" src="auth.js"></script>
</head>
<body onLoad="doAuth('toto', 'password')">
</body>
</html>
Vous devriez voir s'afficher Auth OK! avec comme code HTTP 202 !