Tutorial 5: Extranet & Permissions

In the previous tutorial, we covered creating user groups and users, importing and exporting users, and how to create dynamic user groups using user smart searches.

All in all, we covered the essentials of organizing users in the backend – and in this tutorial, we will be covering the essentials of working with users in frontend.

This involves:

  • Getting acquainted with the Extranet module
  • Getting to know how permissions work in Dynamicweb

In concrete terms, we will do the following on the tutorial website:

  • Create a login-form which registered users may use to login
  • Create a sign-up form where visitors may register a profile
  • Create a profile page where users may view and edit their profiles
  • Set permissions on content to hide it from non-logged in users

Before we can work with the Extranet module, we need to get the infrastructure ready:

  • Create a new page called Login/Register – set it to Hide in menu on creation (or use the ribbon bar)
  • Create a new page called My profile - set it to Hide in menu on creation (or use the ribbon bar)
  • Go to the Files area and edit your master template, adding the following code to the navigation element, below the <ul> element containing your dwnavigation placeholder:
<ul class="nav navbar-nav pull-right"> @if (!string.IsNullOrWhiteSpace(GetString("DWextranet_AccessUserUserName"))) { <li> <a href="Default.aspx?ID=1246"><b>@GetValue("DWextranet_AccessUserUserName")</b></a> </li> <li> <a href="/Admin/Public/ExtranetLogoff.aspx">Logout</a> </li> } else { <li> <a href="Default.aspx?ID=1245">Login/Register</a> </li> } </ul>
  • Replace the IDs in the code with the IDs of your Login/Register and My Profile pages – you may have to fiddle around with it a bit. If your frontend won’t update, try deleting the parsed templates in the _parsed folder inside your design folder – navigation is usually heavily cached for performance reasons.

Note the conditional statement in the code – we’re basically checking if the tag Dwextranet_AccessUserUserName returns null, as it will always return something if a user is logged in, then rendering either a link to a profile page or a link to a login or registration page as appropriate.

Go to your frontend and verify that you – as an anonymous user – see the Login/Register node in the navigation.

Ok, so when anonymous users visit your website they will see a Login/Register link in the navigation, but we don’t have any content yet:

  • Go to Content and open the Login/Register page
  • Create a new paragraph – call it Login – then attach an Extranet module to it (Figure 3.1)
  • In the Show settings, select Login
  • Save the settings
Figure 3.1 Creating a login form

And that’s all there is to it, really – the layout of the login-box is controlled by the login template (login.html by default), and you can edit that and make it prettier, if you like.

Go to your frontend and log in as one of your test users – verify that you now see the username of the test user and a Logout node in your navigation.

Creating a sign-up form is pretty much the same process:

  • Create another paragraph and call it Register
  • Add another Extranet module to it, but select Create profile/Manage subscription as the Show setting
  • Configure the Create user settings (Figure 4.1)
Figure 4.1 Creating a sign-up form

You must:

  • Select a template – use User_create.html for now
  • Select an approval setting – use None and auto login after creation for now
  • Select a group to put users in – select the Customers group

Take a look at the rest of the settings – notice how you can notify the user, notify admins, configure redirects, and so forth – and that most of the settings come with a matching template.

Log your test user out and try registering a new user with the sign-up form – then check in the backend that everything worked as expected.

Note: When you log out with a user in frontend, you will also be logged out in the backend – so make sure you save anything you need to save beforehand.

So, you know the drill by now:

  • Go to your My Profile page and create a new paragraph called View profile
  • Attach an Extranet module to it – and select View profile in the Show settings (Figure 5.1)
  • In the Details – User settings select Logged in user
  • Save and close
Figure 5.1 Creating a My Profile page

Log in with a test user, then click the user name in the menu to verify that the user profile is rendered in frontend.

So users can now sign up, log in, log off and view their user profile – but the content they see is pretty much the same. Let’s change that:

  • Go to the Content area and create a new page called Editor Tools – you may already have one from doing some of the extra exercises related to items. Set it to Hide in menu.
  • Add some content to the page – doesn’t matter much what it is, a regular paragraph is fine, or maybe an item-creator of some sort
  • Go to the page properties and access the Advanced tab, then click Permissions to open the permission settings (Figure 6.1)
Figure 6.1 Setting the permissions for the Editor Tools page
  • Select the All group, then check the Deny checkbox for frontend and backend access to this page
  • Click the green User Group icon and add your Editors group, then check the Allow checkbox for frontend and backend access to this page

In frontend, only users who belong to the Editors user group will be shown the contents of the page, everyone else will see an empty page.

Now, we hid the page in the menu for that exact reason – it’s no good showing empty pages to your users. One way to go about this is rendering the page only for users who belong to the Editors user group.

  • Open your master page file and locate your navigation section,
  • Add a conditional checking against the ID of the user group – in this case the user group ID is 32, use @TemplateTags() to find the correct user group ID on your solution
  • Don’t forget to point the href to the page ID of your Editor Tools page either
<ul class="nav navbar-nav pull-right"> @if (!string.IsNullOrWhiteSpace(GetString("DWextranet_AccessUserUserName"))) { if (GetString("DW_extranet_Groups")=="32"){ <li> <a href="Default.aspx?ID=1243">Editor Tools</a> </li> } <li> <a href="Default.aspx?ID=1246"><b>@GetValue("DWextranet_AccessUserUserName")</b></a> </li> <li> <a href="/Admin/Public/ExtranetLogoff.aspx">Logout</a> </li> } else { <li> <a href="Default.aspx?ID=1245">Login/Register</a> </li> } </ul>

Go to frontend and login with a user in the Editors group – you should see the Editor Tools page in your navigation. Then log in with a user in the Customers groups – access to the Editor Tools page should now disappear.

Try setting permissions on a paragraph as well – the process is identical and the Permissions button is accessible from the Advanced tab in the regular ribbon bar.

In this tutorial, you’ve learned how to use the Extranet module to create, login, and display users from frontend.

You’ve also learned how to set permissions on content, and how to use conditional statements to check and render content based on template tag values.

In the next tutorial you will get acquainted with the Email Marketing tool and:

  • Create emails
  • Identify and select groups of recipients
  • Send and schedule emails
  • Use email placeholder tags to

The Email Marketing tool is an integral part of Dynamicweb and benefits from access to all the user data available from your website, shop, etc.