Comment déconnecter l'utilisateur du site Web en utilisant l'authentification BASIC?

Est-il possible de déconnecter un utilisateur d'un site Web s'il utilise l'authentification de base?

Tuer une session ne suffit pas, car une fois que l'utilisateur est authentifié, chaque demande contient des informations de connexion, de sorte que l'utilisateur est automatiquement connecté la prochaine fois qu'il accède au site en utilisant les mêmes informations d'identification.

La seule solution jusqu'à présent est de fermer le navigateur, mais ce n'est pas acceptable du point de vue de l'utilisabilité.

L'authentification de base n'a pas été conçue pour gérer la déconnexion. Vous pouvez le faire, mais pas complètement automatiquement.

Ce que vous devez faire, c'est que l'utilisateur clique sur un lien de déconnexion et envoie un `` 401 non autorisé '' en réponse, en utilisant le même domaine et au même niveau de dossier URL que le 401 normal que vous envoyez en demandant une connexion.

Ils doivent être dirigés pour saisir ensuite des informations d'identification erronées, par exemple. un nom d'utilisateur et un mot de passe vierges, et en réponse, vous renvoyez une page «Vous avez réussi à vous déconnecter». Les informations d'identification incorrectes / vierges remplaceront alors les informations d'identification correctes précédentes.

En bref, le script de déconnexion inverse la logique du script de connexion, ne renvoyant la page de réussite que si l'utilisateur ne transmet pas les bonnes informations d'identification.

La question est de savoir si la boîte de mot de passe quelque peu curieuse «ne saisissez pas votre mot de passe» rencontrera l'acceptation des utilisateurs. Les gestionnaires de mots de passe qui essaient de remplir automatiquement le mot de passe peuvent également vous gêner ici.

Modifier pour ajouter en réponse au commentaire: la reconnexion est un problème légèrement différent (sauf si vous avez besoin d'une déconnexion / connexion en deux étapes évidemment). Vous devez rejeter (401) la première tentative d'accès au lien de reconnexion, puis accepter la seconde (qui a vraisemblablement un nom d'utilisateur / mot de passe différent). Il existe plusieurs façons de procéder. La première consisterait à inclure le nom d'utilisateur actuel dans le lien de déconnexion (par exemple. / Relogin? Nom d'utilisateur) et à le rejeter lorsque les informations d'identification correspondent au nom d'utilisateur.

Un complément à la réponse de bobince ...

Avec Ajax, vous pouvez avoir votre lien / bouton de déconnexion câblé à une fonction Javascript. Demandez à cette fonction d'envoyer le XMLHttpRequest avec un mauvais nom d'utilisateur et mot de passe. Cela devrait récupérer un 401. Ensuite, définissez document.location sur la page de pré-connexion. De cette façon, l'utilisateur ne verra jamais la boîte de dialogue de connexion supplémentaire lors de la déconnexion, ni n'aura à se rappeler de saisir de mauvaises informations d'identification.

Demandez à l'utilisateur de cliquer sur un lien vers https: // log: out@example.com/ . Cela remplacera les informations d'identification existantes par des informations non valides; les déconnecter.

Vous pouvez le faire entièrement en JavaScript:

IE a (depuis longtemps) une API standard pour effacer le cache d'authentification de base:

document.execCommand("ClearAuthenticationCache")

Devrait retourner vrai quand cela fonctionne. Renvoie soit faux, non défini ou explose sur d'autres navigateurs.

Les nouveaux navigateurs (depuis décembre 2012: Chrome, FireFox, Safari) ont un comportement "magique". S'ils voient une demande d'authentification de base réussie avec un autre faux nom d'utilisateur (disons logout), ils effacent le cache des informations d'identification et le définissent éventuellement pour ce nouveau nom d'utilisateur faux, dont vous devez vous assurer qu'il ne s'agit pas d'un nom d'utilisateur valide pour afficher le contenu.

Un exemple de base de ceci est:

var p = window.location.protocol + '//'
// current location must return 200 OK for this GET
window.location = window.location.href.replace(p, p + 'logout:password@')

Une façon "asynchrone" de faire ce qui précède est de faire un appel AJAX en utilisant le logoutnom d'utilisateur. Exemple:

(function(safeLocation){
    var outcome, u, m = "You should be logged out now.";
    // IE has a simple solution for it - API:
    try { outcome = document.execCommand("ClearAuthenticationCache") }catch(e){}
    // Other browsers need a larger solution - AJAX call with special user name - 'logout'.
    if (!outcome) {
        // Let's create an xmlhttp object
        outcome = (function(x){
            if (x) {
                // the reason we use "random" value for password is 
                // that browsers cache requests. changing
                // password effectively behaves like cache-busing.
                x.open("HEAD", safeLocation || location.href, true, "logout", (new Date()).getTime().toString())
                x.send("")
                // x.abort()
                return 1 // this is **speculative** "We are done." 
            } else {
                return
            }
        })(window.XMLHttpRequest ? new window.XMLHttpRequest() : ( window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : u ))
    }
    if (!outcome) {
        m = "Your browser is too old or too weird to support log out functionality. Close all windows and restart the browser."
    }
    alert(m)
    // return !!outcome
})(/*if present URI does not return 200 OK for GET, set some other 200 OK location here*/)

Vous pouvez également en faire un bookmarklet:

javascript:(function(c){var a,b="You should be logged out now.";try{a=document.execCommand("ClearAuthenticationCache")}catch(d){}a||((a=window.XMLHttpRequest?new window.XMLHttpRequest:window.ActiveXObject?new ActiveXObject("Microsoft.XMLHTTP"):void 0)?(a.open("HEAD",c||location.href,!0,"logout",(new Date).getTime().toString()),a.send(""),a=1):a=void 0);a||(b="Your browser is too old or too weird to support log out functionality. Close all windows and restart the browser.");alert(b)})(/*pass safeLocation here if you need*/);

La fonction suivante est confirmée pour Firefox 40, Chrome 44, Opera 31 et IE 11.
Bowser est utilisé pour la détection du navigateur, jQuery est également utilisé.

- secUrl est l'URL d'une zone protégée par mot de passe à partir de laquelle vous déconnecter.
- redirUrl est l'URL d'une zone non protégée par mot de passe (page de réussite de déconnexion).
- vous souhaiterez peut-être augmenter le délai de redirection (actuellement 200 ms).

function logout(secUrl, redirUrl) {
    if (bowser.msie) {
        document.execCommand('ClearAuthenticationCache', 'false');
    } else if (bowser.gecko) {
        $.ajax({
            async: false,
            url: secUrl,
            type: 'GET',
            username: 'logout'
        });
    } else if (bowser.webkit) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", secUrl, true);
        xmlhttp.setRequestHeader("Authorization", "Basic logout");
        xmlhttp.send();
    } else {
        alert("Logging out automatically is unsupported for " + bowser.name
            + "\nYou must close the browser to log out.");
    }
    setTimeout(function () {
        window.location.href = redirUrl;
    }, 200);
}

Voici un exemple Javascript très simple utilisant jQuery:

function logout(to_url) {
    var out = window.location.href.replace(/:\/\//, '://log:out@');

    jQuery.get(out).error(function() {
        window.location = to_url;
    });
}

Cet utilisateur se déconnecte sans lui montrer à nouveau la boîte de connexion du navigateur, puis le redirige vers une page déconnectée

Ce n'est pas directement possible avec l'authentification de base.

Il n'y a aucun mécanisme dans la spécification HTTP pour que le serveur dise au navigateur d'arrêter d'envoyer les informations d'identification que l'utilisateur a déjà présentées.

Il existe des «hacks» (voir les autres réponses) impliquant généralement l'utilisation de XMLHttpRequest pour envoyer une demande HTTP avec des informations d'identification incorrectes pour remplacer celles fournies à l'origine.

Cela fonctionne pour IE / Netscape / Chrome:

      function ClearAuthentication(LogOffPage) 
  {
     var IsInternetExplorer = false;    

     try
     {
         var agt=navigator.userAgent.toLowerCase();
         if (agt.indexOf("msie") != -1) { IsInternetExplorer = true; }
     }
     catch(e)
     {
         IsInternetExplorer = false;    
     };

     if (IsInternetExplorer) 
     {
        // Logoff Internet Explorer
        document.execCommand("ClearAuthenticationCache");
        window.location = LogOffPage;
     }
     else 
     {
        // Logoff every other browsers
    $.ajax({
         username: 'unknown',
         password: 'WrongPassword',
             url: './cgi-bin/PrimoCgi',
         type: 'GET',
         beforeSend: function(xhr)
                 {
            xhr.setRequestHeader("Authorization", "Basic AAAAAAAAAAAAAAAAAAA=");
         },

                 error: function(err)
                 {
                    window.location = LogOffPage;
             }
    });
     }
  }


  $(document).ready(function () 
  {
      $('#Btn1').click(function () 
      {
         // Call Clear Authentication 
         ClearAuthentication("force_logout.html"); 
      });
  });          

C'est en fait assez simple.

Il vous suffit de visiter ce qui suit dans votre navigateur et d'utiliser des informations d'identification incorrectes: http: // nom d'utilisateur: mot de passe@votredomaine.com

Cela devrait vous déconnecter.

Tout ce dont vous avez besoin est de rediriger l'utilisateur sur une URL de déconnexion et de renvoyer une 401 Unauthorizederreur dessus. Sur la page d'erreur (qui doit être accessible sans authentification de base), vous devez fournir un lien complet vers votre page d'accueil (y compris le schéma et le nom d'hôte). L'utilisateur cliquera sur ce lien et le navigateur demandera à nouveau les informations d'identification.

Exemple pour Nginx:

location /logout {
    return 401;
}

error_page 401 /errors/401.html;

location /errors {
    auth_basic off;
    ssi        on;
    ssi_types  text/html;
    alias /home/user/errors;
}

Page d'erreur /home/user/errors/401.html:

<!DOCTYPE html>
<p>You're not authorised. <a href="<!--# echo var="scheme" -->://<!--# echo var="host" -->/">Login</a>.</p>

function logout() {
  var userAgent = navigator.userAgent.toLowerCase();

  if (userAgent.indexOf("msie") != -1) {
    document.execCommand("ClearAuthenticationCache", false);
  }

  xhr_objectCarte = null;

  if(window.XMLHttpRequest)
    xhr_object = new XMLHttpRequest();
  else if(window.ActiveXObject)
    xhr_object = new ActiveXObject("Microsoft.XMLHTTP");
  else
    alert ("Your browser doesn't support XMLHTTPREQUEST");

  xhr_object.open ('GET', 'http://yourserver.com/rep/index.php', false, 'username', 'password');
  xhr_object.send ("");
  xhr_object = null;

  document.location = 'http://yourserver.com'; 
  return false;
}

 function logout(url){
    var str = url.replace("http://", "http://" + new Date().getTime() + "@");
    var xmlhttp;
    if (window.XMLHttpRequest) xmlhttp=new XMLHttpRequest();
    else xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4) location.reload();
    }
    xmlhttp.open("GET",str,true);
    xmlhttp.setRequestHeader("Authorization","Basic xxxxxxxxxx")
    xmlhttp.send();
    return false;
}

Sur la base de ce que j'ai lu ci-dessus, j'ai obtenu une solution simple qui fonctionne sur n'importe quel navigateur:

1) sur votre page de déconnexion, vous appelez un ajax à votre backend de connexion. Votre backend de connexion doit accepter l'utilisateur de déconnexion. Une fois que le back-end accepte, le navigateur efface l'utilisateur actuel et suppose l'utilisateur "déconnexion".

$.ajax({
    async: false,
    url: 'http://your_login_backend',
    type: 'GET',
    username: 'logout'
});      

setTimeout(function () {
    window.location.href = 'http://normal_index';
}, 200);

2) Maintenant, lorsque l'utilisateur est revenu au fichier d'index normal, il essaiera d'entrer automatiquement dans le système avec la "déconnexion" de l'utilisateur, cette deuxième fois, vous devez le bloquer en répondant avec 401 pour appeler la boîte de dialogue de connexion / mot de passe.

3) Il existe plusieurs façons de le faire, j'ai créé deux backends de connexion, un qui accepte l'utilisateur de déconnexion et un qui ne le fait pas. Ma page de connexion normale utilise celle qui n'accepte pas, ma page de déconnexion utilise celle qui l'accepte.

Je viens de tester les éléments suivants dans Chrome (79), Firefox (71) et Edge (44) et cela fonctionne très bien. Il applique la solution de script comme d'autres l'ont noté ci-dessus.

Ajoutez simplement un lien "Déconnexion" et lorsque vous cliquez dessus, renvoyez le code HTML suivant

    <div>You have been logged out. Redirecting to home...</div>    

<script>
    var XHR = new XMLHttpRequest();
    XHR.open("GET", "/Home/MyProtectedPage", true, "no user", "no password");
    XHR.send();

    setTimeout(function () {
        window.location.href = "/";
    }, 3000);
</script>

Ce JavaScript doit fonctionner pour tous les navigateurs de la dernière version:

//Detect Browser
var isOpera = !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
    // Opera 8.0+ (UA detection to detect Blink/v8-powered Opera)
var isFirefox = typeof InstallTrigger !== 'undefined';   // Firefox 1.0+
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0;
    // At least Safari 3+: "[object HTMLElementConstructor]"
var isChrome = !!window.chrome && !isOpera;              // Chrome 1+
var isIE = /*@cc_on!@*/false || !!document.documentMode; // At least IE6
var Host = window.location.host;


//Clear Basic Realm Authentication
if(isIE){
//IE
    document.execCommand("ClearAuthenticationCache");
    window.location = '/';
}
else if(isSafari)
{//Safari. but this works mostly on all browser except chrome
    (function(safeLocation){
        var outcome, u, m = "You should be logged out now.";
        // IE has a simple solution for it - API:
        try { outcome = document.execCommand("ClearAuthenticationCache") }catch(e){}
        // Other browsers need a larger solution - AJAX call with special user name - 'logout'.
        if (!outcome) {
            // Let's create an xmlhttp object
            outcome = (function(x){
                if (x) {
                    // the reason we use "random" value for password is 
                    // that browsers cache requests. changing
                    // password effectively behaves like cache-busing.
                    x.open("HEAD", safeLocation || location.href, true, "logout", (new Date()).getTime().toString())
                    x.send("");
                    // x.abort()
                    return 1 // this is **speculative** "We are done." 
                } else {
                    return
                }
            })(window.XMLHttpRequest ? new window.XMLHttpRequest() : ( window.ActiveXObject ? new ActiveXObject("Microsoft.XMLHTTP") : u )) 
        }
        if (!outcome) {
            m = "Your browser is too old or too weird to support log out functionality. Close all windows and restart the browser."
        }
        alert(m);
        window.location = '/';
        // return !!outcome
    })(/*if present URI does not return 200 OK for GET, set some other 200 OK location here*/)
}
else{
//Firefox,Chrome
    window.location = 'http://log:out@'+Host+'/';
}

ajoutez ceci à votre application:

@app.route('/logout')
def logout():
    return ('Logout', 401, {'WWW-Authenticate': 'Basic realm="Login required"'})

tapez chrome://restartdans la barre d'adresse et Chrome, avec toutes ses applications qui s'exécutent en arrière-plan, redémarrera et le cache de mot de passe Auth sera nettoyé.

Pour mémoire, il y a un nouvel en-tête de réponse HTTP appelé Clear-Site-Data. Si la réponse de votre serveur comprend un en- Clear-Site-Data: "cookies"tête, les informations d'authentification (pas seulement les cookies) doivent être supprimées. Je l'ai testé sur Chrome 77 mais cet avertissement s'affiche sur la console:

Clear-Site-Data header on 'https://localhost:9443/clear': Cleared data types:
"cookies". Clearing channel IDs and HTTP authentication cache is currently not
supported, as it breaks active network connections.

Et les informations d'authentification ne sont pas supprimées, donc cela ne fonctionne pas (pour l'instant) pour implémenter les déconnexions d'authentification de base, mais peut-être à l'avenir. N'a pas testé sur d'autres navigateurs.

Références:

https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Clear-Site-Data

https://www.w3.org/TR/clear-site-data/

https://github.com/w3c/webappsec-clear-site-data

https://caniuse.com/#feat=mdn-http_headers_clear-site-data_cookies

L'envoi https://invalid_login@hostnamefonctionne très bien partout sauf Safari sur Mac (enfin, pas vérifié Edge mais devrait fonctionner là aussi).

La déconnexion ne fonctionne pas dans Safari lorsqu'un utilisateur sélectionne «mémoriser le mot de passe» dans la fenêtre contextuelle d'authentification de base HTTP. Dans ce cas, le mot de passe est stocké dans Keychain Access (Finder> Applications> Utilities> Keychain Access (ou CMD + SPACE et tapez "Keychain Access")). L'envoi https://invalid_login@hostnamen'affecte pas l'accès au trousseau, donc avec cette case à cocher, il n'est pas possible de se déconnecter sur Safari sur Mac. Au moins, c'est comme ça que ça marche pour moi.

MacOS Mojave (10.14.6), Safari 12.1.2.

Le code ci-dessous fonctionne bien pour moi dans Firefox (73), Chrome (80) et Safari (12). Lorsqu'un utilisateur accède à une page de déconnexion, le code est exécuté et supprime les informations d'identification.

    //It should return 401, necessary for Safari only
    const logoutUrl = 'https://example.com/logout'; 
    const xmlHttp = new XMLHttpRequest();
    xmlHttp.open('POST', logoutUrl, true, 'logout');
    xmlHttp.send();

De plus, pour une raison quelconque, Safari n'enregistre pas les informations d'identification dans la fenêtre contextuelle d'authentification de base HTTP, même lorsque le «souvenir du mot de passe» est sélectionné. Les autres navigateurs le font correctement.

• utiliser un identifiant de session (cookie)
• invalider l'ID de session sur le serveur
• N'acceptez pas les utilisateurs avec des ID de session non valides

J'ai mis à jour la solution de mthoring pour les versions modernes de Chrome:

function logout(secUrl, redirUrl) {
    if (bowser.msie) {
        document.execCommand('ClearAuthenticationCache', 'false');
    } else if (bowser.gecko) {
        $.ajax({
            async: false,
            url: secUrl,
            type: 'GET',
            username: 'logout'
        });
    } else if (bowser.webkit || bowser.chrome) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open(\"GET\", secUrl, true);
        xmlhttp.setRequestHeader(\"Authorization\", \"Basic logout\");\
        xmlhttp.send();
    } else {
// http://stackoverflow.com/questions/5957822/how-to-clear-basic-authentication-details-in-chrome
        redirUrl = url.replace('http://', 'http://' + new Date().getTime() + '@');
    }
    setTimeout(function () {
        window.location.href = redirUrl;
    }, 200);
}

    function logout(secUrl, redirUrl) {
        if (bowser.msie) {
            document.execCommand('ClearAuthenticationCache', 'false');
        } else if (bowser.gecko) {
            $.ajax({
                async: false,
                url: secUrl,
                type: 'GET',
                username: 'logout'
            });
        } else if (bowser.webkit) {
            var xmlhttp = new XMLHttpRequest();
            xmlhttp.open("GET", secUrl, true);
            xmlhttp.setRequestHeader("Authorization", "Basic logout");
            xmlhttp.send();
        } else {
            alert("Logging out automatically is unsupported for " + bowser.name
                + "\nYou must close the browser to log out.");
        }
        setTimeout(function () {
            window.location.href = redirUrl;
        }, 200);
    }
 Run code snippetHide results
Expand snippet

J'ai essayé d'utiliser ce qui précède de la manière suivante.

?php
    ob_start();
    session_start();
    require_once 'dbconnect.php';

    // if session is not set this will redirect to login page
    if( !isset($_SESSION['user']) ) {
        header("Location: index.php");
        exit;
    }
    // select loggedin users detail
    $res=mysql_query("SELECT * FROM users WHERE userId=".$_SESSION['user']);
    $userRow=mysql_fetch_array($res);
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Welcome - <?php echo $userRow['userEmail']; ?></title>
<link rel="stylesheet" href="assets/css/bootstrap.min.css" type="text/css"  />
<link rel="stylesheet" href="style.css" type="text/css" />

    <script src="assets/js/bowser.min.js"></script>
<script>
//function logout(secUrl, redirUrl)
//bowser = require('bowser');
function logout(secUrl, redirUrl) {
alert(redirUrl);
    if (bowser.msie) {
        document.execCommand('ClearAuthenticationCache', 'false');
    } else if (bowser.gecko) {
        $.ajax({
            async: false,
            url: secUrl,
            type: 'GET',
            username: 'logout'
        });
    } else if (bowser.webkit) {
        var xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", secUrl, true);
        xmlhttp.setRequestHeader("Authorization", "Basic logout");
        xmlhttp.send();
    } else {
        alert("Logging out automatically is unsupported for " + bowser.name
            + "\nYou must close the browser to log out.");
    }
    window.location.assign(redirUrl);
    /*setTimeout(function () {
        window.location.href = redirUrl;
    }, 200);*/
}


function f1()
    {
       alert("f1 called");
       //form validation that recalls the page showing with supplied inputs.    
    }
</script>
</head>
<body>

    <nav class="navbar navbar-default navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="http://www.codingcage.com">Coding Cage</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">
            <li class="active"><a href="http://www.codingcage.com/2015/01/user-registration-and-login-script-using-php-mysql.html">Back to Article</a></li>
            <li><a href="http://www.codingcage.com/search/label/jQuery">jQuery</a></li>
            <li><a href="http://www.codingcage.com/search/label/PHP">PHP</a></li>
          </ul>
          <ul class="nav navbar-nav navbar-right">

            <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
              <span class="glyphicon glyphicon-user"></span>&nbsp;Hi' <?php echo $userRow['userEmail']; ?>&nbsp;<span class="caret"></span></a>
              <ul class="dropdown-menu">
                <li><a href="logout.php?logout"><span class="glyphicon glyphicon-log-out"></span>&nbsp;Sign Out</a></li>
              </ul>
            </li>
          </ul>
        </div><!--/.nav-collapse -->
      </div>
    </nav> 

    <div id="wrapper">

    <div class="container">

        <div class="page-header">
        <h3>Coding Cage - Programming Blog</h3>
        </div>

        <div class="row">
        <div class="col-lg-12" id="div_logout">
        <h1 onclick="logout(window.location.href, 'www.espncricinfo.com')">MichaelA1S1! Click here to see log out functionality upon click inside div</h1>
        </div>
        </div>

    </div>

    </div>

    <script src="assets/jquery-1.11.3-jquery.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>


</body>
</html>
<?php ob_end_flush(); ?>

Mais il vous redirige uniquement vers un nouvel emplacement. Pas de déconnexion.