After reading this article you will know:
- How you can apply your Authentication Profile(s) on your front end;
- How you can log your web user in using Authentication Profile(s);
- How you can apply an Authentication Profile to a page or page group;
- How the inheritance between page groups works.
For this HowTo our we'll create a new model named webuser, but you can use every model you'd like for your authentication profile, as long as it has at least one unique, identifying property. When using an Username / password kind of authentication profile even two. (Guess which two?)
Let's say you want your customers to be able to order some nice products from your webshop. You'd probably identify them by an email address and a password. In that case you'll need:
- A model which stores at least an email address and a password;
- An authentication profile which uses that model;
- Web pages to use your authentication profile on.
Let's get going then!
Create a model for your web user.
Head over to the datamodel of your application by clicking the datamodel icon in your datamodel. Our application already has an Order model and a Product model for our case.
- Create a new model, named Web user or Customer, or whatever you like, you're the boss.
- Create properties for an email address and a password. Be sure to give the properties their own type.
That's it for the datamodel! That already was the first-of-three steps.
Create a authentication profile, matching your web user model.
Next up is creating the authentication profile for your web user.
- Click on authentication profiles in the settings menu of your builder bar.
- Create an Username / password kind of authentication profile, based on the web user model we've just created. It should come pretty close the image below.
If you've got no idea what you're doing here, take a look at What are Authentication Profiles. That will explain everything about the settings of an Authentication Profile.
As you can see, we've connected the page at /login to the authentication profile. If you don't have a login page yet, no worries. Choose a different endpoint, create a login page, and edit the authentication profile accordingly afterwards. To learn how you can create a nice login page, take a look at HowTo create a login page using the UI Builder's grid system.
If you're all set on this, the only thing left to do is to connect the authentication profile to the page on which you want to use authentication.
Connect the authentication profile to the page.
- Go the the web module of your app and open the page on which you want to use the authentication.
- Open the page settings of the page.
In the page settings you'll find the authentication profile setting, having the value [none].
- Change the setting to the Authentication Profile you want to use for the page, in our case it was "Web user account".
- Your page has a authentication profile now, meaning that whoever access this page, needs to be logged in as a web user.
As you might have noticed in the GIF above, this app has quite a lot endpoint. It would quite the work to change the authentication profile for every page in here, right? Exactly. That's why we've also added the possibility of selecting an authentication profile for an entire page group. Interested? Continue reading please.
Setting authentication profiles to a page group, using inheritance
- Create a page group with the 'New group'-button, next to the 'New group' button, at the top left of your screen. A new form slides in from the right.
In this form you can set up you new page group by giving it a name; optionally giving it prefixed path; and, why we're here, an authentication profile.
- Select the 'Web user account' authentication profile and press save.
- Drag and drop all pages on which you want the given prefixed path (if given) and the given authentication profile.
All pages in this group will now have an extra, already checked checkbox option in their page settings: 'Inherit authentication profile'. This means these pages inherit the authentication profile of the group their in!
If you've got a page on which you don't want the authentication, but do want in this group, no worries! Just open the page's settings and uncheck this option.
This type of inheritance can also be applied to nested page group. If you create another page group, inside this page group you'll have the option to inherit the authentication profile from the parent.
This can also be turned on or off to match your needs. Because that's all it's for: to match your needs.
If we didn't match your needs or if something we've told you here is not quite clear, please let us know so we can help you with that and improve our documentation too. You're always free to contact us by the intercom logo at the bottom right of your screen!