Login App for a node-based web app

Goal: Setup UM with Login App to implement a customer login in a dynamic (node-based) web app.

You can download the whole Kickstarter-based sample application from our GitLab repository: um-public/tutorial-login-app

Start a new Kickstarter project

See Install Kickstarter

umkickstarter -n de.pinuts.tutorial um

Add Auth2 as a dependency

Edit um/build.gradle to add Auth2:

dependencies {
    // ...
    runtime('de.pinuts.cmsbs:Auth2:4.7.0')
}

Let gradle install the new dependency and start your UM instance:

cd um && gradle setup run

Login to http://localhost:8080/cmsbs as admin / admin

Create a Segment to define the authorized users

A Segment is used to define which Entries in the UM are allowed to perform a login. All members of this Segment are authorized to login.

In this example, all Entries that have an email address are authorized, but all segmentation options could be used here, e.g., inChannel('loginusers') or isSet(login_allowed).

Go to Groups / New Segment and perform the desired segmentation. After that, save your settings as new Segment named can_login:

Create Segments to represent permissions

Go to Groups / New Segment and create some Segments that will later be used to represent the different permissions a user of your web app might be granted.

Provide all of these Segments with the Semantic tag permission.

Create Auth2 App Instance

Go to Tools / Apps / Login and Authorization and create a new instance:

Set the unique name to my-app.

Enter a Title.

Select English as the Used language.

Select the Segment named can_login as the User base.

Enter permission as the Sematic tag to identify Segments representing web user permissions.

Set URL of the REST proxy to /p.

Create a user Entry

Go to Entries / New Entry and create at least one customer user Entry that…

has an email address
and a password
and is member of at least one of the “permissions” Segments you created earlier.

Configure and install REST Proxy

Create a file named um/rest-proxy/cmsbs-restproxy.properties that configures the REST Proxy:

Insert the following cp lines to your um/build.gradle file:

Now, setup and restart your UM instance:

Create a simple node / express based web app

Open a second console window and clone the tutorial’s Git repo if you haven’t already done so:

Start the sample web app using yarn:

The sample web app contains a /user route, that reads the UMSESSIONID cookie and performs a GET request against an API endpoint (/cmsbs/rest/de.pinuts.cmsbs.auth2.Auth/c.json/[login-app-instance-name]) provided by UM's Login App to retrieve information about the logged-in web user: my-app/index.js

This API endpoint returns an empty user profile, if the current user has not logged-in successfully:

It returns a fully populated user profile if the user has logged-in successfully:

Give it a try

Now, you should be able to login to your sample web app using the custom users' credentials you created earlier: http://localhost:8000/