Skip to Content
Technical Articles
Author's profile photo Anmol Chadha

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.

  1. First Of All, Create a SAPUI5 Project from template. I have created a project with name LogoutApp.
  2. 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>​
  3. 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..

  4. Structure of the project should be like the following:     
  5. Now register the event in controller for the view:
    	onLogout: function () {
    			sap.m.URLHelper.redirect("/logout.html", false);
    		}​
  6. Add the below line in neo-app.json file:
    "logoutPage": "/logout.html",​
  7. 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.
  8. Now deploy the application to SAP Cloud platform and copy the url of the activated version.
  9. Run in another browser to test the application.
  10. 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

Assigned Tags

      11 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Marco Beier
      Marco Beier

      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

      Author's profile photo Anmol Chadha
      Anmol Chadha
      Blog Post Author

      Hi Marco,

      Yes it was me who answered.

      Sharing knowledge always makes feel good.

       

      Thanks

      Regards

      Anmol

      Author's profile photo Girish Bhat
      Girish Bhat

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

      Author's profile photo Anmol Chadha
      Anmol Chadha
      Blog Post Author

      Hi Girish Bhat

      Have you deployed the App to HCP ?

      Author's profile photo Andrew WU
      Andrew WU

      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

       

      Author's profile photo Edwin Erdiansyah
      Edwin Erdiansyah

      Hi Andrew,

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

      Author's profile photo Sujata Jena
      Sujata Jena

      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  ?

      Author's profile photo Edwin Erdiansyah
      Edwin Erdiansyah

      Hi Sujata,

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

      Author's profile photo Sujata Jena
      Sujata Jena

      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

      Author's profile photo Edwin Erdiansyah
      Edwin Erdiansyah

      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

      Author's profile photo Isaac New
      Isaac New

      Awesome blog! Thanks for documenting this!

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