Technical Articles
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.
Regards
Anmol
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
Hi Marco,
Yes it was me who answered.
Sharing knowledge always makes feel good.
Thanks
Regards
Anmol
Hello, i am getting a 404 error, when implement this exact structure in my webide. Can you help?
Hi Girish Bhat
Have you deployed the App to HCP ?
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
Hi Andrew,
Have you found the solution? I have the same issue using SAP BTP
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 ?
Hi Sujata,
Have you found the solution? I have the same issue.
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
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
Awesome blog! Thanks for documenting this!
Do you know how to handle session timeout for SAPUI5 Application in SAP Cloud Platform?