Formulaire de connexion HTML personnalisé dans HTTP Basic Auth

Question

J'ai une API avec HTTP Basic Auth. Si des utilisateurs non authentifiés envoient des requêtes HTTP, le serveur renvoie le code d'état 401 et l'en-tête WWW-Authenticate. Et le navigateur affiche le formulaire de connexion standard. Est-il possible d'afficher mon formulaire de connexion HTML au lieu du formulaire de connexion du navigateur standard?

Answer 1

Étant donné que vous utilisez un appel AJAX, vous pouvez intercepter le code d'état 401 à partir du serveur et rediriger l'utilisateur vers un formulaire de connexion personnalisé. Par exemple, supposons que vous utilisiez jQuery et en essayant d'accéder au protégé par critère d'évaluation de l'API d'authentification de base https://httpbin.org/basic-auth/user/passwd:

$.ajax({ 
    url: 'https://httpbin.org/basic-auth/user/passwd', 
    type: 'GET' 
}).then(function(result) { 
    alert('success'); 
}).fail(function(xhr) { 
    if (xhr.status === 401) { 
     // we are not authenticated => we must redirect the user to our custom login form 
     window.location.href = '/my-custom-login-form'; 
    } 
}); 

Une fois que vous avez recueilli le nom d'utilisateur et mot de passe, vous saurez comment construire l'en-tête d'authentification correcte sur les demandes ultérieures à votre API:

$.ajax({ 
    url: 'https://httpbin.org/basic-auth/user/passwd', 
    type: 'GET', 
    headers: { 
     Authorization: 'Basic dXNlcjpwYXNzd2Q=' 
    } 
})...