ASP.NET 2.0 brought a lot to the table with the Membership and Profiles API, and when coupled with some fine techniques provided by jquery some very sleek-looking login functionality can be provided to your users. We just finished a nifty presentation model when working with login functionality for a new non-for-profit site; SpaceForGood. This article will attempt to highlight the core settings used to put together the Profiles web services with your site, as well as depict an example of the script used to invoke it client-side.
First of all I want to bring out that this article is going to assume that you are already familiar with the Profile API of ASP.NET 2.0. You should already know how to make a connection string in your web.config file, and at least a brief understanding of membership, users and the concept of each user having their own profile. Also, you should at least be somewhat familiar with ASP.NET AJAX and how to put the dll's in your bin folder and update your web.config. Even if you're not fully up on these concepts just yet, you can still benefit from seeing how easy it is, and maybe that will inspire you to get started.
Exposing Your Profile in the Web.config
In order to access the profile service vis-a-vis AJAX or jquery, you will have to enable a few properties in your web.config first:
<profile>
<providers>
<clear/>
<add name="AspNetSqlProfileProvider" type="System.Web.Profile.SqlProfileProvider, System.Web, Version=2.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a" connectionStringName="MyConnectionString" applicationName="/" />
</providers>
<properties>
<add name="FirstName" type="System.String"/>
<add name="LastName" type="System.String"/>
<add name="JobTitle" type="System.String"/>
<add name="Email1" type="System.String"/>
<add name="Email2" type="System.String"/>
<add name="Email3" type="System.String"/>
<add name="HomePhone" type="System.String"/>
<add name="WorkPhone" type="System.String"/>
<add name="MobilePhone" type="System.String"/>
<group name="Organization">
<add name="Keys"/>
</group>
</properties>
</profile>
...
<system.web.extensions>
<scripting>
<webServices>
<authenticationService enabled="true" />
<roleService enabled="true"/>
<profileService enabled="true" readAccessProperties="FirstName, LastName, Email1, Email2, Email3"/>
</webServices>
</scripting>
</system.web.extensions>
Once you have enabled the service in your web.config file, you can interact with these services using codes somewhere along the lines of...
// login
function doLogin() {
$("#loginMessage").html("");
var userNameValue = $("#userNameInput").val();
var passwordValue = $("#passwordInput").val();
var rememberMeValue = $("#rememberMeInput").val();
var persistLogin = (rememberMeValue == "persist");
// call the authetication service to authenticate the credentials entered by the user.
Sys.Services.AuthenticationService.login(userNameValue, passwordValue,
persistLogin, null, null, OnLoginCompleted, OnAuthenticationFailed, "User Context");
}
// login completed
function OnLoginCompleted(validCredentials, userContext, methodName) {
if (validCredentials) {
$("#username").attr("value", ""); // clear login entry
$("#password").attr("value", ""); // clear password entry
LoadRoles();
}
else {
$("#loginMessage").html("Invalid user credentials");
}
}
// logout completed
function OnLogoutCompleted(result) {
$("#username").attr("value", ""); // clear login entry
$("#password").attr("value", ""); // clear password entry
$("#userWelcomeDisplay").html("Hello There!"); // obviously you can do something more elaborate
}
// authentication failed
function OnAuthenticationFailed(error, userContext, methodName) {
alert("Authentication service failed with message: " + error.get_message());
}
// loads the profile of the current authenticated user
function LoadProfile() {
var loggedIn = Sys.Services.AuthenticationService.get_isLoggedIn();
if (loggedIn) {
Sys.Services.ProfileService.load(null, OnLoadProfileCompleted, OnLoadProfileFailed, "User Context");
}
else {
OnLogoutCompleted(null);
}
}
// reads the profile information and displays it
function OnLoadProfileCompleted(numProperties, userContext, methodName) {
// todo: display some user information
}
// callback function called if the profile load or save operations failed.
function OnLoadProfileFailed(error, userContext, methodName) {
alert("Profile service failed with message: " + error.get_message());
}