Logoff/Logout function for a UI5 Apllication

Though I have been working on UI5 for sometime, I had never explored Logoff functionality. I always thought that it would be as simple as calling an API and redirecting to a logoff page. Once I started, there were so many hurdles and I got to learn a great deal about cookies and authentication. I am sharing this experience in implementing a “Logoff” functionality for a UI5 application. My aim of writing this blog is to share the learning as well as to explore if there are better approaches. Source: Numerous posts on stackoverflow.com

Set Up: UI5 application hosted in a Basis 740 SP5 system as NW Gateway server. 

Loging off a user involves two steps

1. Invalidating the SSO cookies.

2. Deleting the Authentication cache stored by the browsers

Step 1. Invalidating the SSO cookies.

I learned that SAP provides a logoff service which can clear the SSO cookie in the browser. This is a service stored under ‘public’ node. When called as a GET request, this service returns set-cookie headers as response headers with an expiration date in the past. Browser, on receiving the set-cookie, sets these values with the current SSO cookies, thus invalidating them. If you are using a different server to host your UI application, check the documentation to find a similar logoff service.

Step 2. Deleting the Authentication cache stored by the browsers

This step differs from browser to browser. Always abused IE 🙂 does a better job by providing a javascript API to this task. For other browsers, you need to make a call to the server with dummy credentials so that browser receives a “401-Unauthorized” which forces the browser to delete the stored authorization headers. Again ever useful jQuery provides a call back function to handle 401 error so that user is not shown an awkward authorization credentials pop-up.

Below is the code I arrived at. I have only tested on latest versions of Mozilla, Chrome and IE. Also only Basic Authentication scenarios has been tested. Let me know your ideas and suggestions to improve this.

function logoff(){
       $.ajax({
           type: "GET",
           url: "/sap/public/bc/icf/logoff",  //Clear SSO cookies: SAP Provided service to do that
        }).done(function(data){ //Now clear the authentication header stored in the browser
                            if (!document.execCommand("ClearAuthenticationCache")) {
                                 //"ClearAuthenticationCache" will work only for IE. Below code for other browsers
                                 $.ajax({
                                               type: "GET",
                                               url: "/sap/opu/odata/SOME/SERVICE", //any URL to a Gateway service
                                               username: 'dummy', //dummy credentials: when request fails, will clear the authentication header
                                               password: 'dummy',
                                               statusCode: { 401: function() {
                                                         //This empty handler function will prevent authentication pop-up in chrome/firefox
                                               } },
                                               error: function() {
                                                    //alert('reached error of wrong username password')
                                               }
                                });
                            }
        })
}