Setting up Anonymous Access for portal sites in SAP Cloud Platform

Over the last few weeks, I have had few queries around the setup of SAP Cloud Platform Portal sites for anonymous access. In this blog, I want to highlight some of the existing contents/notes which can be leveraged for this scenario. I will also introduce you to the steps required to provide a login overlay screen to authenticate users in a portal site.

Let’s look at how this can be achieved in both Fiori Launchpad as well as Freestyle portal sites.

 

Fiori Launchpad Sites

Below is a supplier portal which I have built. There are two groups “Public” and “Shipment”. Any user should be able to view the Company Info under the group “Public” and for the remaining apps – Track shipment and view payments, the suppliers need to authenticate themselves.

There are two SAP notes which are relevant for this topic.

2559340 – Cloud Portal FLP sites are being accessed with GUEST user

2418533 – Guest/Anonymous user cannot access custom apps

Below is the configuration of my Fiori launchpad.

I have created 3 Fiori Apps and one shell plugin app under Apps in the Content Management of the Fiori Configuration Cockpit.

The Shell plugin app will provide a login button at the top right hand corner of the Fiori Launchpad. If you would like to know more about how to create a shell plugin, you can refer the blog “SAP Conversational AI meets SAP Cloud Platform” where I have used the shell plugins to integrate a chatbot.

 

 

I have created a catalog called “Public” and assigned the Apps “Company Info” and the shell plugin.

The Shipment catalog contains the Fiori Apps Track Shipment” & “View Payments”. These apps needs to be displayed only to an authenticated user.

I have also created a group called “Public” which includes the app “Company Info”. This group will always show up in the Fiori Launchpad. Similarly, there is a group called Shipment which contains the remaining Fiori apps.

In the Roles section, I have assigned the Public catalog/group to the Anonymous role.

All authenticated users would be assigned to the “Everyone” role. Hence, I have assigned the catalog/group called Shipment to “Everyone” role as shown below.

This completes the configuration of the Fiori Launchpad.

Let’s spend some time on the Shell plugin. The sample application has been made available in GiutHub by the Cloud Portal team. I have adjusted it according to my requirements and uploaded my version of the shell plugin in Github.

The Help documentation for SAP Cloud Platform Identity Authentication service describes the steps to add a login overlay screen. Its quite easy to add a shell plugin which takes the user to the login screen (by redirecting the browser to /sites/<name>?hc_login). However, I was looking for an option to provide a popup screen (similar to SAP Community login screen) and hence tried to use the login overlay functionality from Identity Authentication service.

<script src="https://<tenant ID>.accounts.ondemand.com/ui/resources/javascripts/jquery-1.8.2.min.js" />
<script src="https://<tenant ID>.accounts.ondemand.com/ui/resources/javascripts/SAP_IDS.js" />
<a href="/login.jspa" rel="IDS_Login">Log in</a>

Since the <a> tag uses the REL attribute, it was not possible to achieve this using sap.m.link control. Hence, a way to achieve this is to insert the HTML tag into the DOM as shown below.

$("#shell").append("<div id=\"hiddenLoginButton\" style=\"display: none;\"><a href=" + href + " rel=\"IDS_login\">Login</a></div>");

In the manifest file, I have hard coded the Identity Authentication tenant details along with the reference to the SAP_IDS javascript which is in the same tenant.

To prevent Click-jacking issues, I need to add “*.hana.ondemand.com” under Tenant Settings > Trusted Domains of the Identity Authentication service.

When I try to access the Fiori Launchpad site, it will straightaway display the Public Group and also load the login icon in the Fiori Launchpad header.

 

Another thing to note is that if you want the users to access the HTML5 apps (in anonymous mode), you would need to add the authenticationMethod in the neo-app.json file of the HTML5 app.

{
  "welcomeFile": "index.html",
   "authenticationMethod": "none",
  "routes": [ ..............

Clicking on the login icon, will display the login screen from the configured Identity Authentication service.

After successful authentication, the site would display additional groups and apps.

 

Freestyle portal sites

The setup in a Freestyle portal site is slightly different. You probably know that there is already a login widget which is provided out of the box.

The use of this widget, will take the user to the login screen of the Identity Provider. If this meets your requirement, you can use this OOTB widget. Since, I wanted to use a login overlay screen, I had to follow the below steps.

In the below freestyle site, I have three pages – Home page, Company Profile and Shop with Us.

The access level for the “Home page” is set to “Guest” from the page settings.

For the remaining two pages, I have set the access level to Role-based “Everyone”.

Under Content Management > Apps, I am including the same Shell plugin and assigning it to the standard catalog “Guest”.

In the menu editor, I have created 3 menu items each pointing to the individual pages. This completes the configuration of the freestyle site.  When I test the portal site, it will display the “Home Page” contents without authenticating me.

When I click on the login icon, it would provide the login overlay screen as shown below

After successful authentication, the Portal sites will display additional menu items and provide access to the authorized pages.

One thing to note is that I have turned on the “SAP Fiori Site Header” option. When designing freestyle sites, you might turn this off as it may not align with your design.

If you turn off the Site Header and still require the login overlay functionality, you can use custom widgets for this. The best way to do this is to build a HTML5 app (with User Interface) and use the wizards in SAP WebIDE to convert it to a “Portal service component“.