ASP.NET 4 Unleased - p 119 ppt

ptg 1154 { font-size:12px; text-align:left; padding:10px; } .login_button { border:solid 1px black; padding:3px; } </style> <title>Show Login</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Login id=”Login1” InstructionText=”Please log in before accessing the premium section of our Website.” TitleText=”Log In” TextLayout=”TextOnTop” LoginButtonText=”Log In” DisplayRememberMe=”false” CssClass=”login” TitleTextStyle-CssClass=”login_title” InstructionTextStyle-CssClass=”login_instructions” LoginButtonStyle-CssClass=”login_button” Runat=”server” /> </div> </form> </body> </html> The page in Listing 26.6 uses Cascading Style Sheets (CSS) to change the appearance of the login form rendered by the Login control. By taking advantage of Cascading Style Sheets, you can customize the appearance of the Login control in any way that you can imagine. NOTE For the complete list of properties supported by the Login control, see the Microsoft .NET Framework SDK Documentation. CHAPTER 26 Using the Login Controls From the Library of Wow! eBook ptg 1155 Using the Login Control 26 Automatically Redirecting a User to the Referring Page If you request a page that you are not authorized to view, the ASP.NET Framework automatically redirects you to the Login.aspx page. After you log in successfully, you are redirected back to the original page that you requested. When you are redirected to the Login.aspx page, a query string parameter named ReturnUrl is automatically added to the page request. This query string parameter contains the path of the page that you originally requested. The Login control uses the ReturnUrl parameter when redirecting you back to the original page. You need to be aware of two special circumstances. First, if you request the Login.aspx page directly, a ReturnUrl parameter is not passed to the Login.aspx page. In that case, after you successfully log in, you are redirected to the Default.aspx page. Second, if you add the Login control to a page other than the Login.aspx page, the ReturnUrl query string parameter is ignored. In this case, you need to set the Login control’s DestinationPageUrl property. When you successfully log in, you are redirected to the URL represented by this property. If you don’t supply a value for the DestinationPageUrl property, the same page is reloaded. Automatically Hiding the Login Control from Authenticated Users Some websites display a login form at the top of every page. That way, registered users can log in at any time to view additional content. The easiest way to add a Login control to all the pages in an application is to take advantage of Master Pages. If you add a Login control to a Master Page, the Login control is included in every content page that uses the Master Page. You can change the layout of the Login control by modifying the Login control’s Orientation property. If you set this property to the value Horizontal, the Username and Password text boxes are rendered in the same row. If you include a Login control in all your pages, you should also modify the Login control’s VisibleWhenLoggedIn property. If you set this property to the value False, the Login control is not displayed when a user has already authenticated. For example, the Master Page in Listing 26.7 contains a Login control that has both its Orientation and VisibleWhenLoggedIn properties set. LISTING 26.7 LoginMaster.master <%@ Master 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 id=”Head1” runat=”server”> From the Library of Wow! eBook ptg 1156 <style type=”text/css”> html { background-color:silver; } .content { margin:auto; width:650px; border:solid 1px black; background-color:white; padding:10px; } .login { font:10px Arial,Sans-Serif; margin-left:auto; } .login input { font:10px Arial,Sans-Serif; } </style> <title>My Website</title> </head> <body> <form id=”form1” runat=”server”> <div class=”content”> <asp:Login id=”Login1” Orientation=”Horizontal” VisibleWhenLoggedIn=”false” DisplayRememberMe=”false” TitleText=”” CssClass=”login” Runat=”server” /> <hr /> <asp:contentplaceholder id=”ContentPlaceHolder1” runat=”server”> </asp:contentplaceholder> </div> </form> </body> </html> CHAPTER 26 Using the Login Controls From the Library of Wow! eBook ptg 1157 Using the Login Control 26 The content page in Listing 26.8 uses the Master Page in Listing 26.7 (see Figure 26.4). When you open the page in a browser, the Login control is hidden after you successfully log in to the application. LISTING 26.8 LoginContent.aspx <%@ Page Language=”C#” MasterPageFile=”~/LoginMaster.master” %> <asp:Content ID=”Content1” ContentPlaceHolderID=”ContentPlaceHolder1” Runat=”Server”> <h1>Welcome to our Website!</h1> </asp:Content> Using a Template with the Login Control If you need to completely customize the appearance of the Login control, you can use a template. The Login control includes a LayoutTemplate property that enables you to customize the layout of the controls rendered by the Login control. FIGURE 26.4 Adding the Login control to a Master Page. From the Library of Wow! eBook ptg 1158 CHAPTER 26 Using the Login Controls When you create a Layout template, you can add controls to the template that have the following IDs: . UserName . Password . RememberMe . FailureText You also need to add a Button control that includes a CommandName property with the value Login. The page in Listing 26.9 illustrates how you can use a LayoutTemplate to customize the appearance of the Login control (see Figure 26.5). LISTING 26.9 LoginTemplate.aspx <%@ 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 id=”Head1” runat=”server”> <style type=”text/css”> .loginError FIGURE 26.5 Using a template with the Login control. From the Library of Wow! eBook ptg 1159 Using the Login Control 26 { color:red; font:bold 14px Arial,Sans-Serif; } </style> <title>Login Template</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Login id=”Login1” Runat=”server”> <LayoutTemplate> <asp:Label id=”FailureText” EnableViewState=”false” CssClass=”loginError” Runat=”server” /> <br /> <asp:Label id=”lblUserName” AssociatedControlID=”UserName” Text=”User Name:” Runat=”server” /> <br /> <asp:TextBox id=”UserName” Runat=”server” /> <br /><br /> <asp:Label id=”lblPassword” AssociatedControlID=”Password” Text=”Password:” Runat=”server” /> <br /> <asp:TextBox id=”Password” TextMode=”Password” Runat=”server” /> <br /><br /> <asp:Button From the Library of Wow! eBook ptg 1160 CHAPTER 26 Using the Login Controls id=”btnLogin” Text=”Login” CommandName=”Login” Runat=”server” /> </LayoutTemplate> </asp:Login> </div> </form> </body> </html> Performing Custom Authentication with the Login Control By default, the Login control uses ASP.NET Membership to authenticate a username and password. If you need to change this default behavior, you can handle the Login control’s Authenticate event. Imagine, for example, that you are building a simple application and you want to store a list of usernames and passwords in the web configuration file. The web configuration file in Listing 26.10 contains the credentials for two users named Bill and Ted. LISTING 26.10 Web.Config <?xml version=”1.0” encoding=”utf-8”?> <configuration> <system.web> <authentication mode=”Forms”> <forms> <credentials passwordFormat=”Clear”> <user name=”Bill” password=”secret” /> <user name=”Ted” password=”secret” /> </credentials> </forms> </authentication> </system.web> </configuration> The page in Listing 26.11 contains a Login control that authenticates users against the list of usernames and passwords stored in the web configuration file. From the Library of Wow! eBook ptg 1161 Using the Login Control 26 LISTING 26.11 LoginCustom.aspx <%@ Page Language=”C#” %> <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”> <script runat=”server”> protected void Login1_Authenticate(object sender, AuthenticateEventArgs e) { string userName = Login1.UserName; string password = Login1.Password; e.Authenticated = FormsAuthentication.Authenticate(userName, password); } </script> <html xmlns=”http://www.w3.org/1999/xhtml” > <head id=”Head1” runat=”server”> <title>Login Custom</title> </head> <body> <form id=”form1” runat=”server”> <div> <asp:Login id=”Login1” OnAuthenticate=”Login1_Authenticate” Runat=”server” /> </div> </form> </body> </html> The page in Listing 26.11 includes a method that handles the Login control’s Authenticate event. The second parameter passed to the Authenticate event handler is an instance of the AuthenticateEventArgs class. This class includes the following property: . Authenticated If you assign the value True to this property, the Login control authenticates the user. In Listing 26.11, the FormsAuthentication.Authenticate() method is called to check for a username and password in the web configuration file that matches the username and password entered into the login form. The value returned from this method is assigned to the AuthenticateEventArgs.Authenticated property. From the Library of Wow! eBook ptg 1162 CHAPTER 26 Using the Login Controls Using the CreateUserWizard Control The CreateUserWizard control renders a user registration form. If a user successfully submits the form, a new user is added to your website. In the background, the CreateUserWizard control uses ASP.NET membership to create the new user. The CreateUserWizard control supports a large number of properties (too many to list here) that enable you to modify the appearance and behavior of the control. For example, the page in Listing 26.12 uses several of the CreateUserWizard properties to customize the appearance of the form rendered by the control. LISTING 26.12 ShowCreateUserWizard.aspx <%@ 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 id=”Head1” runat=”server”> <style type=”text/css”> .createUser { width:350px; font:14px Verdana,Sans-Serif; background-color:lightblue; border:solid 3px black; padding:4px; } .createUser_title { background-color:darkblue; color:white; font-weight:bold; } .createUser_instructions { font-size:12px; text-align:left; padding:10px; } .createUser_button { border:solid 1px black; padding:3px; } </style> <title>Show CreateUserWizard</title> </head> From the Library of Wow! eBook ptg 1163 Using the CreateUserWizard Control 26 <body> <form id=”form1” runat=”server”> <div> <asp:CreateUserWizard id=”CreateUserWizard1” ContinueDestinationPageUrl=”~/Default.aspx” InstructionText=”Please complete the following form to register at this Website.” CompleteSuccessText=”Your new account has been created. Thank you for registering.” CssClass=”createUser” TitleTextStyle-CssClass=”createUser_title” InstructionTextStyle-CssClass=”createUser_instructions” CreateUserButtonStyle-CssClass=”createUser_button” ContinueButtonStyle-CssClass=”createUser_button” Runat=”server” /> </div> </form> </body> </html> The CreateUserWizard control in Listing 26.12 is formatted with Cascading Style Sheets (see Figure 26.6). The control’s ContinueDestinationPageUrl property is set to the value ”~/Default.aspx”. After you successfully register, you are redirected to the Default.aspx page. NOTE For the complete list of properties supported by the CreateUserWizard control, see the Microsoft .NET Framework SDK Documentation. Configuring Create User Form Fields By default, the CreateUserWizard control displays the following form fields: . Username . Password . Confirm Password . Email . Security Question . Security Answer From the Library of Wow! eBook . ContinueDestinationPageUrl property is set to the value ”~/Default.aspx”. After you successfully register, you are redirected to the Default.aspx page. NOTE For the complete list of properties supported. runat=”server”> <style type=”text/css”> .createUser { width:350px; font:14px Verdana,Sans-Serif; background-color:lightblue; border:solid 3px black; padding:4px; } .createUser_title { background-color:darkblue;. { margin:auto; width:650px; border:solid 1px black; background-color:white; padding:10px; } .login { font:10px Arial,Sans-Serif; margin-left:auto; } .login input { font:10px Arial,Sans-Serif; } </style>