Utilisation de l'authentification par formulaire avec ASP.NET AJAX
Mise à jour : novembre 2007
Vous pouvez utiliser le service d'authentification de l'application Microsoft AJAX Library pour vérifier les informations d'identification stockées dans le cadre du service d'appartenance d'ASP.NET.
Cette rubrique explique comment appeler le service d'authentification d'application à partir du navigateur à l'aide de JavaScript.
Vous pouvez accéder au service d'authentification à partir du script client en utilisant la classe AuthenticationService qui prend en charge les méthodes suivantes :
login. Cette méthode valide les informations d'identification de l'utilisateur en utilisant le fournisseur d'appartenances par défaut. Si les informations d'identification sont vérifiées, la méthode envoie un cookie d'authentification par formulaire au navigateur. La plupart des applications ASP.NET AJAX utiliseront la méthode login parce que les applications authentifiées par formulaire requièrent un cookie d'authentification dans le navigateur.
logout. Cette méthode efface le cookie d'authentification par formulaire.
Configuration du serveur
Le serveur fournit l'infrastructure pour traiter les informations d'identification telles que le nom et le mot de passe d'un utilisateur, et valider ces informations. La fonctionnalité d'authentification par formulaire dans ASP.NET vous permet d'authentifier le nom de connexion et le mot de passe des utilisateurs à l'aide d'un formulaire de connexion. Si l'application authentifie la demande, le serveur délivre un ticket qui contient une clé pour rétablir l'identité de l'utilisateur pour les demandes suivantes.
La classe AuthenticationService fournit la classe proxy JavaScript que vous appelez à partir du script client pour communiquer avec le service d'authentification sur le serveur.
.gif "Remarque") Remarque : |
|---|
Vous pouvez créer votre propre service d'authentification serveur. Pour plus d'informations, consultez AuthenticationServiceManager. |
Pour prendre en charge l'authentification dans le script client, le serveur doit être configuré comme décrit dans les sections suivantes.
Pour plus d'informations sur l'authentification dans ASP.NET, consultez Fonctionnement de la sécurité ASP.NET et Gestion des utilisateurs à l'aide de l'appartenance.
Activation du service d'authentification
Pour utiliser le service d'authentification à partir du script client, vous devez activer explicitement le service d'authentification en utilisant l'élément suivant dans le fichier Web.config de l'application :
<system.web.extensions>
<scripting>
<webServices>
<authenticationService enabled="true" />
</webServices>
</scripting>
</system.web.extensions>
Pour plus d'informations, consultez Comment : configurer les services ASP.NET dans ASP.NET AJAX.
Le service d'authentification requiert l'activation de l'authentification par formulaire. L'exemple suivant indique comment activer l'authentification par formulaire dans le fichier Web.config de l'application.
<system.web>
<authentication mode="Forms">
<forms cookieless="UseCookies"
loginUrl="~/login.aspx"/>
</authentication>
<system.web>
| Remarque : |
|---|
Les cookies doivent être activés dans le navigateur. Le service d'authentification utilise un cookie pour le ticket d'authentification qui rétablit l'identité de l'utilisateur au cours des demandes suivantes. |
Configuration de l'accès à la base de données d'appartenance
Par défaut, ASP.NET utilise une base de données SQL Server Express pour stocker les informations d'appartenance. La chaîne de connexion pour la base de données est définie dans le fichier Machine.config. Elle est comparable à celle qui suit :
<connectionStrings>
<add name="LocalSqlServer"
connectionString="data source=.\SQLEXPRESS;Integrated Security=SSPI;
AttachDBFilename=|DataDirectory|aspnetdb.mdf;
User Instance=true" providerName="System.Data.SqlClient" />
</connectionStrings>
Si vous utilisez une base de données différente pour les informations d'appartenance, vous pouvez créer un élément <connectionStrings> dans le fichier Web.config de l'application qui désigne cette base de données. Pour plus d'informations, consultez Configuration d'une application ASP.NET pour utiliser l'appartenance (membership).
Création d'un dossier restreint
Si vous souhaitez limiter l'accès aux informations afin que seuls les utilisateurs connectés puissent y accéder, vous devez créer une zone restreinte du site. C'est en général un dossier sous la racine de l'application. Pour limiter l'accès au dossier restreint, vous devez créer un fichier Web.config dans le dossier restreint et lui ajouter une section <authorization>. L'exemple suivant affiche le contenu d'un fichier Web.config qui limite l'accès aux utilisateurs authentifiés uniquement.
<?xml version="1.0"?>
<configuration>
<system.web>
<authorization>
<deny users="?"/>
<allow users="*"/>
</authorization>
</system.web>
</configuration>
Exemple
L'exemple suivant illustre une page Web ASP.NET qui authentifie l'utilisateur à l'aide du script client. Pour cet exemple, vous devez avoir configuré le serveur comme indiqué précédemment dans cette rubrique. Il est supposé que le nom du dossier restreint est Secured.
La page contient un élément <asp:ScriptManager>. Lorsque cet élément est inclus dans la page, l'objet AuthenticationService est automatiquement accessible à tout script client sur la page.
La page comporte un bouton avec un gestionnaire d'événements associé nommé OnClickLogin. Le code dans le gestionnaire de méthodes appelle la méthode login de la classe AuthenticationService.
Après vous être connecté, le texte du bouton change, tout comme le texte au haut de la page pour refléter votre état connecté. Cliquez sur le lien au bas de page pour accéder à une page localisée dans le dossier Secured. Comme vous êtes maintenant connecté, vous pouvez accéder aux pages de ce dossier sans être redirigé vers la page de connexion.
Dans l'exemple de page, vous pouvez cliquer sur un bouton pour vous déconnecter. Il appelle le gestionnaire d'événements du bouton OnClickLogout qui appelle la méthode logout. Après vous être déconnecté, le texte en haut de la page change. En essayant d'accéder à la page dans le dossier Secured, vous êtes redirigé vers la page de connexion parce que votre navigateur n'a plus de cookie d'authentification par formulaire.
L'exemple de code fournit des fonctions asynchrones de rappel achevé pour les méthodes login et logout. Vous pouvez également créer des fonctions de rappel défaillant pour les deux méthodes. Pour plus d'informations, consultez l'exemple fourni dans la vue d'ensemble de la classe AuthenticationService.
<%@ Page Language="VB" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head id="Head1" >
<title>Authentication Service</title>
<style type="text/css">
body { font: 11pt Trebuchet MS;
font-color: #000000;
padding-top: 72px;
text-align: center }
.text { font: 8pt Trebuchet MS }
</style>
</head>
<body>
<form id="form1" >
<asp:ScriptManager ID="ScriptManagerId">
<Scripts>
<asp:ScriptReference Path="Authentication.js" />
</Scripts>
</asp:ScriptManager>
<h2>Authentication Service</h2>
<span id="loggedin"
style="visibility:hidden; color:Green; font-weight:bold; font-size:large"
visible="false"><b>You are logged in! </b>
</span>
<span id="notloggedin"
style="visibility:visible;color:Red; font-weight:bold; font-size:large">
You are logged out!
<br /> <br />
<span style="font-weight:normal; font-size:medium; color:Black">
Please, use one of the following [username, password]
combinations:<br />
[user1, u$er1] <br/>
[user2, u$er2] <br/>
[user3, u$er3]
</span>
</span>
<br /><br />
<div>
<table>
<tr id="NameId" style="visibility:visible;">
<td style="background-color:Yellow; font-weight:bold; color:Red">
User Name:
</td>
<td>
<input type="text" id="username"/>
</td>
</tr>
<tr id="PwdId" style="visibility:visible;">
<td style="background-color:Yellow; font-weight:bold; color:Red">
Password:
</td>
<td>
<input type="password" id="password" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="ButtonLogin"
style="background-color:Aqua;"
onclick="OnClickLogin(); return false;">Login</button>
<button id="ButtonLogout"
style="background-color:Aqua; visibility:hidden;"
onclick="OnClickLogout(); return false;">Logout</button>
</td>
</tr>
</table>
<br />
<br />
<a href="secured/Default.aspx" target="_top2" >
Attempt to access a page
that requires authenticated users.</a>
<br />
<br />
<!-- <a href="CreateNewUser.aspx"><b>Create a new user.</b></a>
-->
</div>
</form>
<hr />
<div id="FeedBackID" style="visibility:visible" />
</body>
</html>
<%@ Page Language="C#" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head >
<title>Authentication Service</title>
<style type="text/css">
body { font: 11pt Trebuchet MS;
font-color: #000000;
padding-top: 72px;
text-align: center }
.text { font: 8pt Trebuchet MS }
</style>
</head>
<body>
<form id="form1" >
<asp:ScriptManager ID="ScriptManagerId">
<Scripts>
<asp:ScriptReference Path="Authentication.js" />
</Scripts>
</asp:ScriptManager>
<h2>Authentication Service</h2>
<span id="loggedin"
style="visibility:hidden; color:Green; font-weight:bold; font-size:large"
visible="false"><b>You are logged in! </b>
</span>
<span id="notloggedin"
style="visibility:visible;color:Red; font-weight:bold; font-size:large">
You are logged out!
<br /> <br />
<span style="font-weight:normal; font-size:medium; color:Black">
Please, use one of the following [username, password]
combinations:<br />
[user1, u$er1] <br/>
[user2, u$er2] <br/>
[user3, u$er3]
</span>
</span>
<br /><br />
<div>
<table>
<tr id="NameId" style="visibility:visible;">
<td style="background-color:Yellow; font-weight:bold; color:Red">
User Name:
</td>
<td>
<input type="text" id="username"/>
</td>
</tr>
<tr id="PwdId" style="visibility:visible;">
<td style="background-color:Yellow; font-weight:bold; color:Red">
Password:
</td>
<td>
<input type="password" id="password" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="ButtonLogin"
style="background-color:Aqua;"
onclick="OnClickLogin(); return false;">Login</button>
<button id="ButtonLogout"
style="background-color:Aqua; visibility:hidden;"
onclick="OnClickLogout(); return false;">Logout</button>
</td>
</tr>
</table>
<br />
<br />
<a href="secured/Default.aspx" target="_top2" >
Attempt to access a page
that requires authenticated users.</a>
<br />
<br />
<!-- <a href="CreateNewUser.aspx"><b>Create a new user.</b></a>
-->
</div>
</form>
<hr />
<div id="FeedBackID" style="visibility:visible" />
</body>
</html>
var usernameEntry;
var passwordEntry;
var username;
var password;
var textLoggedIn;
var textNotLoggedIn;
var buttonLogin;
var buttonLogout;
function pageLoad()
{
usernameEntry = $get("NameId");
passwordEntry = $get("PwdId");
username = $get("username");
password = $get("password");
textLoggedIn = $get("loggedin");
textNotLoggedIn = $get("notloggedin");
buttonLogin = $get("ButtonLogin");
buttonLogout = $get("ButtonLogout");
}
// This function sets and gets the default
// login completed callback function.
function SetDefaultLoginCompletedCallBack()
{
// Set the default callback function.
Sys.Services.AuthenticationService.set_defaultLoginCompletedCallback(OnLoginCompleted);
// Get the default callback function.
var callBack =
Sys.Services.AuthenticationService.get_defaultLoginCompletedCallback();
}
// This function sets and gets the default
// logout completed callback function.
function SetDefaultLogoutCompletedCallBack()
{
// Set the default callback function.
Sys.Services.AuthenticationService.set_defaultLogoutCompletedCallback(OnLogoutCompleted);
// Get the default callback function.
var callBack =
Sys.Services.AuthenticationService.get_defaultLogoutCompletedCallback();
}
// This function sets and gets the default
// failed callback function.
function SetDefaultFailedCallBack()
{
// Set the default callback function.
Sys.Services.AuthenticationService.set_defaultFailedCallback(OnFailed);
// Get the default callback function.
var callBack =
Sys.Services.AuthenticationService.get_defaultFailedCallback();
}
// This function calls the login method of the
// authentication service to verify
// the credentials entered by the user.
// If the credentials are authenticated, the
// authentication service issues a forms
// authentication cookie.
function OnClickLogin()
{
// Set the default callback functions.
SetDefaultLoginCompletedCallBack();
SetDefaultLogoutCompletedCallBack();
SetDefaultFailedCallBack();
// Call the authetication service to authenticate
// the credentials entered by the user.
Sys.Services.AuthenticationService.login(username.value,
password.value, false,null,null,null,null,"User Context");
}
// This function calls the logout method of the
// authentication service to clear the forms
// authentication cookie.
function OnClickLogout()
{
// Clear the forms authentication cookie.
Sys.Services.AuthenticationService.logout(null,
null, null, null);
}
// This is the callback function called
// if the authentication fails.
function OnFailed(error,
userContext, methodName)
{
// Display feedback message.
DisplayInformation("error:message = " +
error.get_message());
DisplayInformation("error:timedOut = " +
error.get_timedOut());
DisplayInformation("error:statusCode = " +
error.get_statusCode());
}
// The callback function called
// if the authentication completed successfully.
function OnLoginCompleted(validCredentials,
userContext, methodName)
{
// Clear the user password.
password.value = "";
// On success there will be a forms
// authentication cookie in the browser.
if (validCredentials == true)
{
// Clear the user name.
username.value = "";
// Hide login fields.
buttonLogin.style.visibility = "hidden";
usernameEntry.style.visibility = "hidden";
passwordEntry.style.visibility = "hidden";
textNotLoggedIn.style.visibility = "hidden";
// Display logout fields.
buttonLogout.style.visibility = "visible";
textLoggedIn.style.visibility = "visible";
// Clear the feedback area.
DisplayInformation("");
}
else
{
textLoggedIn.style.visibility = "hidden";
textNotLoggedIn.style.visibility = "visible";
DisplayInformation(
"Login Credentials Invalid. Could not login");
}
}
// This is the callback function called
// if the user logged out successfully.
function OnLogoutCompleted(result)
{
// Display login fields.
usernameEntry.style.visibility = "visible";
passwordEntry.style.visibility = "visible";
textNotLoggedIn.style.visibility = "visible";
buttonLogin.style.visibility = "visible";
// Hide logout fields.
buttonLogout.style.visibility = "hidden";
textLoggedIn.style.visibility = "hidden";
}
// This function displays feedback
// information for the user.
function DisplayInformation(text)
{
document.getElementById("FeedBackID").innerHTML =
"<br/>" + text;
// Display authentication service information.
var userLoggedIn =
Sys.Services.AuthenticationService.get_isLoggedIn();
var authServiceTimeout =
Sys.Services.AuthenticationService.get_timeout();
var userLoggedInfo =
"<br/> User logged in: " + userLoggedIn;
var timeOutInfo =
"<br/> Authentication service timeout: " + authServiceTimeout;
document.getElementById("FeedBackID").innerHTML =
userLoggedInfo + timeOutInfo;
}
if (typeof(Sys) !== "undefined") Sys.Application.notifyScriptLoaded();
Voir aussi
Tâches
Comment : configurer les services ASP.NET dans ASP.NET AJAX
Concepts
Utilisation de services Web dans ASP.NET AJAX
Appel de services Web à partir du script client
Utilisation d'informations de rôle avec ASP.NET AJAX
Utilisation d'informations de profil avec ASP.NET AJAX
Sys.Services.AuthenticationService, classe
Sys.Services.ProfileService, classe
Configuration d'une application ASP.NET pour utiliser l'appartenance (membership)