Technical Articles

Anmol Chadha

March 12, 2020 4 minute read

How To Logout From Identity Provider in SAPUI5 Application in SAP Cloud Platform

Introduction:

SAP provides the flexibility to create our own custom SAPUI5 applications to implement the custom functionality. We can create the custom UI5 apps using SAP WEB IDE Full Stack and deploy it in SAP Cloud Platform and then use it in Portal site. But sometimes we also need to use the application deployed at Cloud Platform as standalone application. We have the option to logout from the Portal site but not from the Standalone application.

In this blogppost, we will see, how we can implement the custom logout page functionality to logout from the standalone application.

Content:

To Implement the logout functionality, we will use the Userapi Logout functionality provided by SAP. I will create a dummy project to create the logout Functionality. You can use it as per the requirement.

First Of All, Create a SAPUI5 Project from template. I have created a project with name LogoutApp.

In the View, Give a button which will perform the logout functionality:

<mvc:View controllerName="com.sap.LogoutApp.controller.View1" xmlns:mvc="sap.ui.core.mvc" displayBlock="true" xmlns="sap.m">
	<Shell id="shell">
		<App id="app">
			<pages>
				<Page id="page" title="{i18n>title}">
					<content>
						<Button text="Logout" press="onLogout"/>
					</content>
				</Page>
			</pages>
		</App>
	</Shell>
</mvc:View>

Create a logout.html page in the Webapp Directory with the following content:

<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
  <title>Log Out</title>

  <style>
  body, button{
    font-family: 'Segoe UI Light', arial, sans-serif;
  }
  .logoutContent{
      width:577px;
      height:300px;
      margin:auto;
      margin-top:100px;
      text-align:center;
  }
  
 h1,h3{
 	text-align:center;
 	width:577px;
 	margin: 0px;
 	color:#333;
 }
 h1{
 	font-size:36px;
 	margin-top:30px;
 }
  .logoutContent .link{
 	margin-top:30px;
 }
 .logoutContent a{
 	color:#0f6daa;
 	font-size:18px;
 	font-weight:bold;
 }
 
  </style>
</head>
  <body>
      <div class="logoutContent">
          <svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 272.03" width="500" height="300">
              <defs>
                  <style>
                      .cls-1{fill:#939598;}
                      .cls-1,.cls-2,.cls-3{stroke:#fff;}
                      .cls-1,.cls-7{stroke-miterlimit:10;stroke-width:3px;}
                      .cls-2,.cls-3{fill:#d1d3d4;stroke-linecap:round;stroke-linejoin:round;}
                      .cls-2{stroke-width:6.9px;}
                      .cls-3{stroke-width:2px;}
                      .cls-4{opacity:0.91;}
                      .cls-5{fill:#076da4;}
                      .cls-6{fill:#0b7dc1;}
                      .cls-7{fill:none;stroke:#bcbec0;}</style>
              </defs>
              <path class="cls-1" d="M94.51,277.56a70.46,70.46,0,1,1,99.65-.54A70.54,70.54,0,0,1,94.51,277.56Zm90.09-91.08A57.65,57.65,0,1,0,185,268,57.71,57.71,0,0,0,184.6,186.47Z" transform="translate(-15.18 -27.36)"></path><path class="cls-2" d="M21.86,232a9.5,9.5,0,0,1-3.23-6.73c-.07-6.65,5.34-15.08,48.24-21.43l1.7,11.51c-25.58,3.79-34.45,8-37.31,9.86,8.72,5.92,51.38,13.21,115.12,12.46s106.23-9.05,114.8-15.17c-2.94-1.85-12.09-5.89-38.51-9.09l1.4-11.54c43.93,5.31,49.66,13.69,49.73,20.42.29,24.29-106,26.77-127.28,27C127.4,249.51,39.83,249.55,21.86,232Z" transform="translate(-15.18 -27.36)"></path><path class="cls-3" d="M21.86,232a9.5,9.5,0,0,1-3.23-6.73c-.07-6.65,5.34-15.08,48.24-21.43l1.7,11.51c-25.58,3.79-34.45,8-37.31,9.86,8.72,5.92,51.38,13.21,115.12,12.46s106.23-9.05,114.8-15.17c-2.94-1.85-12.09-5.89-38.51-9.09l1.4-11.54c43.93,5.31,49.66,13.69,49.73,20.42.29,24.29-106,26.77-127.28,27C127.4,249.51,39.83,249.55,21.86,232Z" transform="translate(-15.18 -27.36)"></path><g class="cls-4"><polygon class="cls-5" points="322.4 50.18 308.82 35.67 340.73 5.79 343.44 8.69 314.44 35.86 322.59 44.56 351.6 17.39 354.31 20.29 322.4 50.18"></polygon><polygon class="cls-6" points="339.07 56.35 330.92 47.65 333.82 44.93 339.25 50.73 344.59 45.74 349.36 28.16 353.19 29.2 348.13 47.87 339.07 56.35"></polygon><polygon class="cls-6" points="311.9 27.34 303.75 18.64 312.81 10.15 331.77 6.32 332.56 10.22 314.7 13.83 309.37 18.82 314.8 24.62 311.9 27.34"></polygon><rect class="cls-6" x="332.84" y="53.36" width="27.82" height="3.97" transform="translate(40.64 224.61) rotate(-43.12)"></rect><polygon class="cls-6" points="355.34 14.48 356.8 4.35 346.59 5.15 346.28 1.18 361.44 0 359.27 15.05 355.34 14.48"></polygon></g><line class="cls-7" x1="311.54" y1="63.16" x2="293.69" y2="81.02"></line><line class="cls-7" x1="295.05" y1="61.8" x2="277.2" y2="79.65"></line><line class="cls-7" x1="294.17" y1="46.81" x2="275.09" y2="64.66"></line>
          </svg>
    	<h1>Goodbye</h1>
    	<h3>You have logged out</h3>
    	<div class="link">
    	 	<a href="#" onclick="logBack();return false;">Click here to log back on</a>
    	 </div>
      </div>
      <script>
         function logBack(){
             window.location.href = "./index.html";
         }
      </script>
  
</body></html>

I Have copied the page content from the standard Logout page from SAP and modified it..

Structure of the project should be like the following:

Now register the event in controller for the view:

	onLogout: function () {
			sap.m.URLHelper.redirect("/logout.html", false);
		}

Add the below line in neo-app.json file:
```
"logoutPage": "/logout.html",
```
The above line in neo-app.json file will tell the application that whenever the logout.html file is called, it needs to logout from the application, which we are doing from controller part.
Now deploy the application to SAP Cloud platform and copy the url of the activated version.
Run in another browser to test the application.
Click on the logout button and it will log out from the Application.

Conclusion:

The user can use the above procedure to logout from the custom standalone application. It invalidates the current session by setting the cookie validation to back dated.

NOTE: When testing this it will only log you out of the application when it is deployed to HCP and in the active state. When testing within Web IDE it will just perform the redirect without logging you out.

GITHUB SOURCE CODE

Regards

Anmol

11 Comments

You must be Logged on to comment or reply to a post.

Marco Beier

March 12, 2020 at 7:51 pm

Hey,

at first I thought I remember your name from a question I read earlier today.

Turns out, it actually was you providing the answer! Nice!

Thanks for the effort and sharing, great Blog.

Best Regards,

Marco

Anmol Chadha

Blog Post Author

March 13, 2020 at 1:14 am

Hi Marco,

Yes it was me who answered.

Sharing knowledge always makes feel good.

Thanks

Regards

Anmol

Girish Bhat

May 13, 2020 at 10:49 am

Hello, i am getting a 404 error, when implement this exact structure in my webide. Can you help?

Anmol Chadha

Blog Post Author

May 14, 2020 at 6:25 am

Hi Girish Bhat

Have you deployed the App to HCP ?

Andrew WU

June 18, 2020 at 1:22 am

Hi Anmol

Thank you for this blog post. I’m trying to get the logout to work. What I achieved so far is that when clicking on logout buttons, it’ll redirect to logout.html page, but it didn’t seem it’s signing out from IdP. No request sending to IdP to initiate sign out process. Could there be some configuration issue with neo-app.json file?

I checked your github repo and find in neo-app.json, the path of welcomeFile is set to “/webapp/index.html”, and “logoutPage” is set to “/logout.html”, but these two files are under the same folder. Is this on purpose?

Another thing I would like to check is, will this solution work for apps deployed under Neo environment only, or it works for CF as well?

Cheer
Andrew

Edwin Erdiansyah

May 24, 2021 at 12:56 am

Hi Andrew,

Have you found the solution? I have the same issue using SAP BTP

Sujata Jena

July 29, 2020 at 2:30 pm

Hi Anmol,
I am trying to do it in CF but in CF even after deployed to HCP it is only redirecting the file not logged ou from the application . this is my xs-json.app.

{
"welcomeFile": "/App_logout/index.html",
"authenticationMethod": "route",
"logout": {
"logoutEndpoint": "/do/logout",
"logoutPage": "/logout.html"
},
"routes": [
{
"source": "^/App_logout/(.*)$",
"target": "$1",
"localDir": "webapp"
}
]
}

if I am doing any mistake here because in neo it's working fine . can you please help ?

Edwin Erdiansyah

May 24, 2021 at 12:55 am

Hi Sujata,

Have you found the solution? I have the same issue.

Sujata Jena

May 25, 2021 at 11:28 am

Hi Edwin,

I got the solution but it wont work for sap web ide trial account.

in controller you just need to write

onPressLogout: function (oEvent) {
sap.m.URLHelper.redirect("/my/logout", false);

}

the function onPressLogout will be called on press of logout button.

And in xsapp.json you need to write

{
"welcomeFile": "/index.html",
"authenticationMethod": "route",
"logout": {
"logoutEndpoint": "/my/logout"
},

Regards,

Sujata

Edwin Erdiansyah

June 4, 2021 at 10:43 pm

Hi Sujata,

what is the different with your previous code? I have tried with non trial sap btp. no luck.

Could you also share your xs-app.json?

Thanks

Isaac New

August 6, 2020 at 8:36 am

Awesome blog! Thanks for documenting this!

Do you know how to handle session timeout for SAPUI5 Application in SAP Cloud Platform?

Technical Articles

How To Logout From Identity Provider in SAPUI5 Application in SAP Cloud Platform

Introduction:

Content:

Conclusion:

Assigned Tags