Member Registration and Login
In this article you can learn about how to create Member registration and login functionality for the frontend of your application.
Last updated
Was this helpful?
In this article you can learn about how to create Member registration and login functionality for the frontend of your application.
Last updated
Was this helpful?
With a fresh Umbraco CMS install, you can create frontend registration, login functions, and restrict site access based on the system.
By the end of this tutorial, you will learn how to:
Implement a basic register/login functionality on your website,
Hide pages from non-logged-in members, and
Assign newly registered members to specific member groups.
Install the latest : dotnet new umbraco
.
Install the Umbraco Starter Kit: dotnet add package Umbraco.TheStarterKit
Run the project: dotnet run
Complete the installer and login to the backoffice.
Navigate to the Settings section in the backoffice.
Locate the Partial Views entry under Templating in the left-hand section.
Click the "+" to create a new partial view.
Choose New partial view from snippet....
Pick the Login snippet from the list.
Name the partial view Login and save it:
Repeat the above steps using the Register Member and Login Status snippets.
Save the partial views as "Register" and "LoginStatus" respectively.
The Partial Views list should now look like this:
Create a new Document Type with a template and name it "Login".
Setup the "Login" Document Type to be composed by the "Content Base" and "Navigation Base" Document Types.
Allow the "Login" Document Type as a child under the "Home" Document Type.
Locate the newly created "Login" template, and overwrite its content with this:
Halfway there!
Navigate to the Content section.
Create a new page based on the "Login" Document Type Under the Home node:
Save and publish the page.
The Register and Login functionality is rendered by the "Login" template:
You can now use the page to register new Members. Every registered person will show up in the Members section in the backoffice:
The "LoginStatus" partial view comes into play after registering as a new Member (or logging in as an existing Member). It will render a welcome message and a "log out" button:
Now that we have the options to:
Register a member
Log in as a member
Check the current login status
Log out a member
We can take this a bit further and specify which parts of our website should be accessible to logged-in members. To do this:
Go to the Member section in the Backoffice.
Create a new Member Group.
Give the group a name.
Save the Member Group.
Navigate back to the created Member.
Assign the newly created Member Group.
Save the member:
Almost there!
Navigate to the Content section.
Create a new page that should only be visible to "Premium" members.
Click the menu icon (•••) to bring up the page options, and pick "Restrict Public Access" once created.
You will be able to restrict access to a specific member, or a specific group. Choose the latter option. In the dialog that follows you must define:
The group(s) that will have access to the page.
The page with the login form.
The page to display if the content page is inaccessible to the logged-in member.
Congratulations! With all of that setup, the "Premium Content" page is only accessible to logged-in "Premium" Members. When not logged in, the website visitors will automatically be redirected to the "Register/Login" page.
However, with the above approach, members will not be assigned to any group automatically. For this to happen, we would need to write a bit of custom code.
The following code automatically assigns Members to the "Premium" Member Group.
To enable the notification handler, we also need a composer:
To render these partial views, we need a new Document Type with a dedicated template (see also ):
The "Content Base" and "Navigation Base" Document Types are available once the Umbraco Starter Kit is installed. For more information, see the section.
We can leverage the to handle the automatic Member Group assignment. Specifically the MemberSavedNotification
, which is triggered whenever a Member is saved.