It is quite common to require an area of a website that users
must logon to in order to access content or functionality. Umbraco
provides support for this through its membership functionality
which supports the standard ASP.NET Membership Provider model. This
means the "out of the box" asp.net controls can be used to create,
login, manage and generally work with your Umbraco members.
There are many ways in which the membership classes and controls
can be used. In a number of articles I'll go through step by step
examples of how to get started with Umbraco membership. Although it
quite straightforward, easy to follow guides seem scarce and there
are a few key points to get right.
I'll start with a blank instance of Umbraco. You can install
your own but naturally I grabbed one from our plans page (currently all
with a 3 month free trial, perfect for experimenting). During the
install I selected the business starter kit to give me an example
site to work with.
I always prefer creating user controls with Visual Studio and
putting them in a class library for use in my Umbraco sites, but
for simplicity I'll create templates directly in Umbraco. I'll
devote a future article to using Visual Studio to create user
controls but for now I'll keep it simple. In the Umbraco admin area
- settings - templates, create a new one called 'login' which in
this case inherits from 'Starterkit Master'. Add a standard asp
login control as follows:
<asp:content
ContentPlaceHolderId="cp_content" runat="server">
<asp:Login LoginButtonText="GO"
ID="Login1" runat="server">
</asp:Login>
</asp:content>
The key bit is the <asp:Login> control which, when
rendered, will display a standard login prompt. The control can be
customised by setting a number of attributes, in this example I've
changed the text on the login button by setting the LoginButtonText
attribute. A full list of available settings an be found on the
Microsoft website here
In order to use this new template we need to tweak a couple of
document types. Update the 'homepage' document type to allow
Textpages to be created below it:
Next update the Textpage type to allow it to use the new
template we've just created:
This will allow us to create a new text page called login, and
set it to use the new template.
If you follow the 'link to document' to /login.aspx you should
now see a standard login page. It could do with some styling
applying (which can be done through standard CSS) but it will be
fully functional. In order to test it we'll need to setup a site
member. In the Umbraco admin site go to Members and create a type
call 'Customers' and a Group call 'Customer' (by right clicking on
the relevant folder and selecting 'Create'). These can be called
anything you like, this is just an example.
Now right click on Members and choose 'create'. Create a member
called John Smith that is a member of the 'Customers' group.
Enter a suitable username and enter a password or note the
automatically generated one. If you now return to your login page
and try to login as john.smith with the correct password, you
should end up back on the homepage of your site without any error
messages being shown. This means you have successfully logged in to
your site as this member.
In future articles I'll show you how to display different pages
and content to logged in users, create register pages to allow them
to sign up, look at other controls such as changing passwords and
cover more in depth features such as Member properties and
performing advanced operations using C# code. If you've found this
helpful or have suggestions for other things you would like to see,
please leave a comment below.