Différences entre versions de « Js AJAX auth »
Aller à la navigation
Aller à la recherche
| (5 versions intermédiaires par le même utilisateur non affichées) | |||
| Ligne 5 : | Ligne 5 : | ||
Par exemple, pour ''toto:password'' on aura le header suivant: ''Basic dG90bzpwYXNzd29yZA=='' | 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. | 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'' : | Pour cela nous allons avoir besoin du code suivant dans le ''index.php'' : | ||
<source lang="php" style="border:1px solid black;font-size:120%"> | <source lang="php" style="border:1px solid black;font-size:120%"> | ||
<?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) { | function getServerVariable($var) { | ||
| Ligne 34 : | Ligne 44 : | ||
return false; | return false; | ||
} | } | ||
| − | if($login !== "toto" | + | if($login !== "toto" || $password !== "password"){ |
// Identifiants faux, on retourne false et HTTP 401 : Unauthorized | // Identifiants faux, on retourne false et HTTP 401 : Unauthorized | ||
http_response_code ( 401 ); | http_response_code ( 401 ); | ||
| Ligne 48 : | Ligne 58 : | ||
=== Coté client === | === Coté client === | ||
| − | Coté client, il nous trois fichiers. | + | Coté client, il nous faut trois fichiers. |
Le fichier ''ajax.js'' pour instancier l'objet XmlHttpRequest : | Le fichier ''ajax.js'' pour instancier l'objet XmlHttpRequest : | ||
<source lang="javascript" style="border:1px solid black;font-size:120%"> | <source lang="javascript" style="border:1px solid black;font-size:120%"> | ||
| Ligne 69 : | Ligne 79 : | ||
var xhr = getXhr(); | var xhr = getXhr(); | ||
// Ouverture de l'URL en GET | // Ouverture de l'URL en GET | ||
| − | xhr.open("GET", "http://127.0.0.1 | + | xhr.open("GET", "http://127.0.0.1", false); |
// Envoie de la requête | // Envoie de la requête | ||
xhr.setRequestHeader("Authorization", "Basic " + btoa(user + ":" + password)); | xhr.setRequestHeader("Authorization", "Basic " + btoa(user + ":" + password)); | ||
| Ligne 87 : | Ligne 97 : | ||
<source lang="html5" style="border:1px solid black;font-size:120%"> | <source lang="html5" style="border:1px solid black;font-size:120%"> | ||
<html> | <html> | ||
| − | |||
<head> | <head> | ||
<script type="text/javascript" src="ajax.js"></script> | <script type="text/javascript" src="ajax.js"></script> | ||
Version actuelle datée du 11 février 2018 à 21:47
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 faut 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 !