Zum Ende der Metadaten springen
Zum Anfang der Metadaten

Sie zeigen eine alte Version dieser Seite an. Zeigen Sie die aktuelle Version an.

Unterschiede anzeigen Seitenhistorie anzeigen

« Vorherige Version anzeigen Version 2 Nächste Version anzeigen »

This tutorial explains how to install the Login App and setup a simple login form in your web page.

Install Login App

You can either

  • A) download the App from the download page and install it manually or

  • B) use the UM Kickstarter

A) Install manually

If you need to install into an already existing UM you probably need to perform a manual installation as described in this section.

Go to https://www.universal-messenger.de/knowledge-base/intern/02_downloads/addons/index.html and download the Login App package (ZIP file).

Unzip the file right into your UM folder (where subfolders like cmsbs-conf/ and cmsbs-work/ live):

cd UM
unzip $DOWNLOAD_DIR/LoginApp-x.y.z.zip

Restart your UM instance.

B) Install using UM Kickstarter

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.6.2')
}

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:

cmsbs.resturl=http://localhost:8080/cmsbs/rest

cmsbs.restproxy.limit.controller.whitelist.1 = "de.pinuts.cmsbs.lib.widget.Pi"
cmsbs.restproxy.limit.controller.whitelist.2 = "de.pinuts.cmsbs.auth2.Auth"
cmsbs.restproxy.limit.controller.whitelist.3 = "de.pinuts.cmsbs.auth2.Widget"

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

setup.doLast {
    ...
    // UM REST Proxy
    cp('UM/web-integration/cmsbs-restproxy.war', new File(pinuts.um.webappsDir, 'p.war'))
    cp('rest-proxy/cmsbs-restproxy.properties', new File(pinuts.um.serverHome, 'cmsbs-restproxy.properties'))
}

Now, setup and restart your UM instance:

gradle setup run

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:

git clone https://gitext.pinuts.de/um-public/tutorial-login-app.git

Start the sample web app using yarn:

cd tutorial-login-app/my-app
yarn
yarn dev

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:

{
  "data": {
    "ses": null,
    "config": {
      "rememberMe": false,
      "rememberMeDefault": false
    },
    "rememberMeLogin":false
  }
}

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

{
  "data": {
    "ses": {
      "_pi": "my-app",
      "lastLogin": "2021-09-29|17:00:35",
      "loginIp": "127.0.0.1",
      "loggedIn": true,
      "authPass": true,
      "authCookie": false,
      "uid": "2333484",
      "firstname": "Bob",
      "lastname": "",
      "email": "bob@acme.com",
      "cookie": "b0779317014e0fa066efbf0621dc3bfc",
      "_permissions": ["perm1", "perm3"],
      "logoutUnconfirmed": false
    },
    "config": {
      "rememberMe": false,
      "rememberMeDefault": false
    },
    "rememberMeLogin": false
  }
}

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/

  • Keine Stichwörter