Watch videos with subtitles in your language, upload your videos, create your own subtitles! Click here to learn more on "how to Dotsub"

[How Do I:] Secure my Site using Membership and Roles?

0 (0 Likes / 0 Dislikes)
  • Embed Video

  • Embed normal player Copy to Clipboard
  • Embed a smaller player Copy to Clipboard
  • Advanced Embedding Options
  • Embed Video With Transcription

  • Embed with transcription beside video Copy to Clipboard
  • Embed with transcription below video Copy to Clipboard
  • Embed transcript

  • Embed transcript in:
    Copy to Clipboard
  • Invite a user to Dotsub
Welcome to this ASP.NET tour of Membership and Roles. If you've built web apps in the past, you've probably spent a lot of time adding your own user name and password system to your site. Now you don't need to, because with ASP.NET 2.0 you can secure your app with this built-in password management system called Membership, and you also get a bunch of UI controls for helping your users log in, recover passwords, and register for your site. So let's start by creating a new web site. This web site is going to be based on a template that I previously created from the MasterPages video. This is simply under Visual Studio 2005, under Templates, Project. There's a zip file right here, And as you'll see, it's just a simple collection of a couple pages that I've already populated to make this demo look a little bit better. So I'll call this our new project Membership because we're going to be talking about how we manage members in a web site and their roles. What I have here, what's important here is this web config file, which is empty or there's not a whole lot in it, a StyleSheet, a MasterPage, and these pages are all blank. So let me show you. Our Default page is just a simple content page. But because I've already wired it up in the previous video to a MasterPage, if we view this thing, you're going to see that it's just a placeholder ready to go. What we're going to do in this video is populate some of the things like Login and Create Account and things like that. Let me close that and we'll start first by jumping into this new site using this new button right here, the ASP.NET Configuration. By clicking on that, we're going to go to a page that's provided for us automatically to administer our site. We are just concerned with the Security tab. In here we're going to do a couple things. Right now the site is set up to support your basic Windows authentication. So let's change that to work with on the authentication that you would expect on an Internet application, so the kind of user password things that you would expect. So we'll switch that over, and let's do a couple of things here. We're going to enable roles on our site. Roles are like groups of users, and I'm going to create a couple of simple roles. An administrator role. I always have trouble spelling that. So we have administrators and we have basic users, and maybe we have another role called power users that can do special things on the site. So there. We have 3 basic groups of users. Now I'm going to create my first account to kind of bootstrap the whole process, and this will be for me. You have to have a pretty strong password. A combination of alphanumeric and punctuation. I'll put myself in the administrators and users group and we'll set up an email address. And the security question, this is kind of neat. Favorite color? I'll put blue. Okay, so we have our first user. So at this point we can close this site and go back to our project. Now watch the change here when I hit Refresh. We have a new folder here called App_Data and inside is an Express database, ASPNETDB, that was created for us automatically. And it's inside here that ASP.NET automatically manages our users and our accounts and roles. In fact, if I go into the ASP.NET Membership table, I just want to show you what's in here. You don't normally have to deal directly with this database. But my account here, [email protected], you can see there's my color, my question, and my encrypted password answer. Over here is my password, and you can see it's salted. This indicates to me it's a one-way hash, which is nice. This is a pretty secure system right out of the box. What's better, though, is using that database is very simple. We're going to start by going back to our Default page. Let's go to Design mode, and I'm going to spend the rest of the time using these new components right here. Because this is the Default page, it's the site that everyone hits. You're going to hit it when you're not currently authenticated. So what we want to do is present the user with an option to login and maybe even also to create a new account. So we'll do that here. I could just start typing you can login here and then drag a hyperlink over, but the problem is when I go back to this page when I'm already authenticated, I don't want to re-login. So I need this control called the LoginView. This manages the contents inside this little box here depending on whether or not I'm logged in or not. So the anonymous template is going to look something like this. You are not logged in. We can drag over a hyperlink login, and I'll drag over a hyperlink to— What else can you do if you're not logged in? You can create an account. So those are the 2 options that we have. And if we are authenticated, we want to say something like Welcome back, LoginName. And from here you do something like change your password. So I dragged over this component called LoginName, which is nice because it's going to pull using the Membership APIs in ASP.NET. It's going to pull the user name in automatically. I don't have to do anything there for that. So in order to test this LoginView, we need to actually enable our site to be logged in. So let's go to our Login page and set up our login form. As you can imagine, we need 2 text boxes and a button. When they click the button, we need to authenticate and all this stuff, but ASP.NET makes it easy with the Login control right here. So I drag that onto my form. I'm basically done. I can go to Auto Format and change it to—Professional is good. And let's hit Save. I think at this point we can go ahead and bring up the site. Okay, so we have our anonymous template, so we can login. I'll enter the account information that we just set up and login. Notice it takes me right back to the Default page, and the template is different because it now knows who I am, and from here I can change the password. So far, so good. We got a lot of functionality without writing any code yet. Let's go and customize this a bit further. Let's go back to the Login page and add a new feature here. If I bring up the properties for this component, there's quite a bit here. The one I want to show you is this PasswordRecovery. There's a built-in password recovery system which has a bit of workflow involved. We can add some text like Forgot your password? and then have a page that you can go to when you forget your password. You can see it added that hyperlink for us automatically. Let's go and build out that page, Forgot password. As you might expect, we need another component, this PasswordRecovery control. All we need to do is drag it over. It's going to take care of the rest. We do need to set up the email information, though. So under the MailDefinition we'll do something like this is from [email protected] and maybe make the priority a high priority. And the subject is Your new temporary password. That's good. If we try to use this page right away and send a password back, it's not going to work because we have to change a setting on the web site. So let's go back to the web site administration. We have to tell it where our exchange server is or our SMTP server. So if we go back to Security— Actually, we need to go to the Application configuration area and set up the SMTP server. Here it's just exchange01, we'll make it from— Okay. Save that, close the page. Now I think we're all set to go. So we'll go back to our Default page, and this time I'll go to the Login page, but let's say I forgot my password. I still need my user name, which is scott. And watch, it asks me that favorite color question that I typed in, which is blue. And that's it. So the password has been mailed to me. So now I can go check it out. Yes, this is my real account. Don't read all my email. Okay. It should be right here, no reply. Okay. It says return to the site and use this password. So I'm going to have to copy that to the clipboard. Close those 2. Now let's bring our page back up. Now I can login as scott. I'm going to paste that password back in, and it worked, which is good. I need to change that password because I'm not going to remember that, and our ChangePassword link has not been hooked up. But as you can imagine, that's probably another component. So we go to ChangePassword, empty that text, and let's drag in the ChangePassword component. Save it, close the page, and just kind of rerun it. And I have to log back on. Fortunately, I still have that password in the clipboard. So I'll login as that and then ChangePassword should work. So here's my old one, and here's the one I'm changing it to something I can actually remember. And we're good. So you can see very quickly we've added a lot of new features. Let's keep going. Let's hook up this CreateAccount page. This will show some of our final components here, the CreateUserWizard. This is pretty slick. It's got really 2 steps. You sign up for your account, entering all this information, and then you've finished. I'm going to add a custom step. Let's add a step where the user could select their role. You wouldn't normally do this. You're not going to let a new user change their role. But I just had to come up with some idea here. So let's say Choose your role, and this will allow us to select a role from the Membership page that we set up. So for this we need to drop into source code view. I'm really just showing you so you can see the degree of extensibility we have. This is the wizard step that we just added, Choose your role. If we go back to the Design mode, I'm going to need a couple things for this page. I just need Select a role, and we'll drag in a ListBox. There. Okay, now let's go back to the source code view. I have a couple methods that I can handle. When the page is activated I'm going to call Activate—it's really a step, and when it's deactivated I'll call DeactivateStep. What I need is a couple of script blocks here of code that runs on the server. I have these on the clipboard, so I'm just going to paste them in. Let me explain what these 2 methods do. When that step is activated, I'm using the Roles variable just to get a list. I'm binding it directly to the ListBox. When we move on to the next step, I'm simply finding whatever role was selected and adding it to this new user account, adding the role to that user. So let's close this guy, and I want to use this step to create a user that doesn't have any administrative privileges. So I'll create an account called mike. Okay. So we have a new account that's part of just the users group. And we finish and we're done. Now we can login as mike. Cool. That all worked. Now here's the deal. Here's what I want to do. I actually want these pages, Manage Accounts and Display Reports, which are just dummy pages but let's say I want to protect those so those pages are accessible from anyone in the administrators role like Scott but not accessible for someone like Mike in the users role. To do that, let's create a new folder here. I'll call it Admin. What I'd like to do is move these 2 files, Display Reports and Manage Accounts, into that folder. That's a convenient place for us to hold pages that we want to be protected. So the way we go and do that, if we hit the ASP.NET configuration page again, there's a way for us to protect those pages. Under Security again, under Create access rules we need to create 2 rules. This Admin folder, let's say if you're in the administrators role you're allowed privileges to any file on that page. And we create another rule. We'll exclude all other users. So they're denied. What that's really doing behind the scenes, if we hit Refresh, is it created a web config file when we could have done this directly. So you can see everything in this folder is denied unless you're in the administrators role. Since we moved these 2 pages inside the Admin folder, if we ever want to get to them again, I need to modify the web sitemap. So the URL for those pages are now under admin, and this component, if you want to know what this is for, watch the navigation video. This is used by the tree control on the left-hand side. So because we moved those, we have to keep that in sync. Now if I go back and login as mike, if we try to get to this Manage Accounts page you can see it simply redirects us back into the Login page because it knows that we don't have privileges. So if I login as scott, an account where we do have privileges, I can see the page. Of course it's empty. We haven't really done anything in there yet. However, notice this little problem right here, our image controls? If we bring up the properties, they're still pointing back to our main admin— it's pointing to a local folder called images under the Admin folder, which we don't have. So in order to fix this last little problem, we need to go back to our MasterPages. When I created the MasterPages originally, I didn't think that those images would be accessed from anywhere but on the root. See this image tag right here? What I'd really like is for the images to come off the top level. But if I put a slash, then it's not going to find it in the Membership web site. So what I need to do is change this to an asp:Image control and setting the runat="server." By doing this, I have access to this feature that allows me to set a path. ImageSrc. If I put a tilde right here, that tilde will be mapped at runtime to the root of my site. What is this? Oh, ImageUrl. Sorry. There we go. So I need to do the same with my other image. I've got to locate it. Here's the other one. So I'll copy and just replace that, stick the runat="server" in there, and change source to that and stick in the tilde. Now when I go back to this page, Display Reports, of course I have to login first, which is nice it handled that for me automatically. Now I get my images to work, which is great. The final thing I want to do, if you notice if we login as mike, the menu here still shows these as options, Manage Accounts and Display Reports. If we want to hide that, we need to modify the default behavior of the site provider. So for that, inside the web config we need to add an entry for the sitemap. This is another block of text I have in the clipboard, so instead of typing it I'll just paste it in. What we're doing here is we're setting up our sitemap, and the key line is this securityTrimmingEnabled. What that does is it uses the overall security settings and removes pages from the menu that you're not allowed to see. Let me just demonstrate it for you. Notice I don't have those pages here under the Administration tab. I can still get to the main admin page, but I can't even see that I have those other options. But as soon as I login as scott, those options show up for me automatically. So all this code that we've done in the past 10 or 20 minutes, very little code but all this functionality, if we had to do all this from scratch and code it with ASP.NET 1.1, it would probably take a week. And on top of that, we may have not even done it in a secure way. So we've got this whole neat system with very little code to create Membership and Roles that you can add right now to your web sites.

Video Details

Duration: 17 minutes and 43 seconds
Country: United States
Language: English
License: All rights reserved
Genre: None
Views: 5
Posted by: neudesicasp on Aug 22, 2013

Learn how to secure a web site using the new Membership and Roles features of ASP.NET 2.0. Topics include user registration, password recovery, and restricting access to content with roles.

Caption and Translate

    Sign In/Register for Dotsub to translate this video.