Différences entre versions de « Js AJAX auth »
Aller à la navigation
Aller à la recherche
| Ligne 48 : | Ligne 48 : | ||
=== Coté client === | === Coté client === | ||
| − | Coté client, il nous | + | Coté client, il nous trois fichiers. |
| + | Le fichier ''ajax.js'' pour instancier l'objet XmlHttpRequest : | ||
| + | <source lang="javascript" style="border:1px solid black;font-size:120%"> | ||
| + | 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; | ||
| + | } | ||
| + | </source> | ||
| + | Le fichier ''auth.js'' qui va faire l'authentification : | ||
| + | <source lang="javascript" style="border:1px solid black;font-size:120%"> | ||
| + | function auth(user, password) { | ||
| + | // Création de l'objet XHR | ||
| + | var xhr = getXhr(); | ||
| + | // Ouverture de l'URL en GET | ||
| + | xhr.open("GET", "http://192.168.100.200/auth", 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"); | ||
| + | } | ||
| + | } | ||
| + | </source> | ||
| + | Et enfin, le fichier index.html pour appeler le tout : | ||
| + | <source lang="html5" style="border:1px solid black;font-size:120%"> | ||
| + | <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> | ||
| + | </source> | ||
| + | Vous devriez voir s'afficher ''Auth OK!'' avec comme code HTTP 202 ! | ||
Version du 9 juin 2016 à 23:23
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==
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
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://192.168.100.200/auth", 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 !