cancel
Showing results for 
Search instead for 
Did you mean: 

SAPUI5 OData authentication problem

former_member268206
Discoverer
0 Kudos

Dear Colleagues,

We are running IdM v7.2 SP8. Recently we put our focus on UI development with SAPUI5 library. Everything seems to be pretty straightforward except the authentication while creating OData model. Generally, there is no problem to access REST2 services through web browser. By entering the following URL:

http://<host>:<port>/idmrestapi/v2/service/ET_MX_PERSON%28ID=<id>,TASK_GUID=guid%27<guid>%27%29

I'm first redirected to login page. After entering login credentials, I get a valid response from a server.

In my SAPUI5 script, I create model in the following way:

var oModel = new sap.ui.model.odata.ODataModel("proxy/http/<host>:<port>/idmrestapi/v2/service", false, "<user>", "<pass>");

Then, I bind the action to a control:

oLabel.bindElement("/ET_MX_PERSON%28ID=<id>,TASK_GUID=guid%<guid>%27%29");

oLabel.bindProperty("text", "MX_LASTNAME");

The problem is, that when I run application in the browser, I can see that, while creating the model, server returns the login page in response. It looks as if the login credentials provided in model constructor are ommited.

URL created by application looks as follows:

http://<user>:<pass>@localhost:60551/UI5FirstApp/proxy/http/<host>:<port>/idmrestapi/v2/service/ET_M...

And here is the response:

2013-09-11 16:30:41 The following problem occurred: no handler for data200,OK,<script>
  var inPortalScript = false
  var webpath = "/logon_ui_resources/"
</script>

<html>
<head>
<BASE target="_self">
<link rel=stylesheet href="https://answers.sap.com/logon_ui_resources/css/ur/ur_nn6.css">
<title>User Management, SAP AG</title>
<script language="javascript">
var originWindowName=window.name;
window.name="logonAppPage";
function restoreWindow() {
try{
window.name=originWindowName;
} catch(ex){}
}
</script>
<script language="JavaScript">
function putFocus(formInst, elementInst) {
  if (document.forms.length > 0) {
    document.forms[formInst].elements[elementInst].focus();
  }
}

function setValuesAutoCreation() {
var form = document.getElementById('logonForm');
form.j_username.value="";
form.j_password.value="";
form.automaticAccountCreation.value="true";
}
function submitForm() {
var form = document.getElementById('logonForm');
form.submit();
}
function clearEntries() {
  document.logonForm.longUid.value="";
  document.logonForm.password.value="";
}
function setFocusToFirstField() {
myform = document.logonForm;
try{
   for (i=0; i<myform.length; i++) {
    elem = myform.elements[i];
    if (!elem.disabled) {
      elemType = elem.type;
      if (elemType=="text" || elemType=="password") {
       if (!elem.readOnly) {
          elem.focus();
          break;
       }
      }
      if (elemType=="select-one" || elemType=="select-multiple" || elemType=="checkbox" || elemType=="radio") {
        elem.focus();
        break;
      }
    }
   }
} catch(ex){
}
}
function addTenantPrefix() {
  return true;
}
</script>
</head>
<body class="urBdyStd" bgcolor="#F7F9FB" onLoad="setFocusToFirstField()" onUnload="restoreWindow()">

<script language="JavaScript">
var blockPage = false;
</script>

<script language="JavaScript">
function writeMessage() {
document.write("<h2>A possible Cross-Frame Scripting attack has been prevented. Please contact your system administrator or refer to SAP Note 1651004 for more information.</h2>");
}

if (blockPage) {
var browserName = navigator.appName;
// According to the tests IE works with document.execCommand(), but Firefox and Chrome do not
if (browserName.indexOf("Explorer") > -1) {
  writeMessage();
  document.execCommand("Stop");
} else {
  writeMessage();
  window.stop();
}
}
</script>


<table id="tblFrmUI" width="790px" valign="middle" dir="ltr" align="center" cellPadding="0" cellSpacing="0" style="background-color:#ffffff;margin-top:50px;">
 
<tr>
  <td><img src="/logon_ui_resources/layout/lf_tl.png" width="29" height="32"></td>
  <td background="/logon_ui_resources/layout/lf_st.png"></td>
  <td><img src="/logon_ui_resources/layout/lf_tr.png" width="27" height="32"></td>
</tr>

<tr>
  
  <td background="/logon_ui_resources/layout/lf_sl.png"></td>
 
  <td width="100%"> 
 
      <table id="tblInnerCnt" dir="ltr" cellpadding="0" cellspacing="0">
   
    <tr>    
     <td valign="top"><div class="urBrandImage"><img src="/logon_ui_resources/layout/branding-image.jpg" alt="Branding Image" border="0"></div></td>
     <td width="100%"></td>
     <td>    
      <table height="360px" cellPadding="0" cellSpacing="0">    
       <tr>       
        <td valign="top"><div class="urProductName"><img src="/logon_ui_resources/layout/branding-text.gif" alt="" border="0"></div></td>
       </tr>      
       <tr>
        <td valign="top" align="left">      
          <div class="urLogonData">         
           <!-- data table starts after this line -->
           <FORM  AUTOCOMPLETE="off"  id="logonForm" name="logonForm" target="logonAppPage" method="post" action="j_security_check" >
<input name="no_cert_storing" type="hidden" value="on"><input type="hidden" name="j_salt" value="eOTb+TaKklOljGy1WZz1DinjqP4=" />

          
           <table class="urLogonTable" cellSpacing="3px" cellPadding="0" valign="top">                        
            <tr><td colspan="3">
             <div class="urMessageArea">
              <!-- Federation Error Message    -->
                           
                           
             </div>
            </td></tr>           
               
            <!-- userid -->
            <tr><td>
             <label class="urLblStdNew"><nobr>Użytkownik<span class="urLblReq"> *</span></nobr></label>

            </td>
            <td>
             <input type="text" id="logonuidfield"  name="j_username" value="" title="Użytkownik *" class="urEdfTxtEnbl" style="width:170px">
            </td>
            <td width="100%"> </td></tr>
            <!-- password -->
            <tr><td>
             <label class="urLblStdNew" for="logonpassfield"><nobr>Hasło<span class="urLblReq"> *</span></nobr></label>

            </td>
            <td>
             <input type="password" id="logonpassfield"  name="j_password" class="urEdfTxtEnbl" style="width:170px">
            </td>
            <td> </td></tr>
            <!-- create certificate -->
           
            <!-- Federate User checkbox -->
           
            <tr><td width="100%" colspan="3"> </td></tr>
            <tr><td>                           
            </td><td align="right">
             <!-- logon button -->
             <input class="urBtnStdNew" type="submit" name="uidPasswordLogon" value="Logowanie" >

            
            </td>
            <td> </td></tr>           
            <!-- link to certificate logon -->
           
            <!-- logon help -->
           
           </table>
           </form>

          <!-- data table ends before this line -->
          </div>                
        </td>
       </tr>
       <tr>
        <td valign="bottom">        
         <div class="urCopyrightFrame">         
          <div class="urCopyrightText">Prawa autorskie &copy; SAP AG. Wszelkie prawa zastrzeżone.</div>    
          <div class="urCopyrightImage"><img src="/logon_ui_resources/layout/sap_logo.png" alt="SAP AG" title="SAP AG" width="55" height="27"></div>
         </div>   
        </td>
       </tr>
      </table>
     </td>
    </tr>
   </table>  
  </td> 
 
  <td background="/logon_ui_resources/layout/lf_sr.png"></td>
 
</tr>

<tr>
  <td><img src="/logon_ui_resources/layout/lf_bl.png" width="29" height="32"></td>
  <td align="center" background="/logon_ui_resources/layout/lf_sb.png"><span class="clip"><img src="/logon_ui_resources/layout/lf_clip.png" width="298" height="32"></span></td>
  <td><img src="/logon_ui_resources/layout/lf_br.png" width="27" height="32"></td>
</tr>

</table>

<script type="text/javascript">
<!-- 
  var docDir = document.dir;   
  if(docDir=="rtl" || docDir=="RTL"){  
     var elTableCnt = document.getElementById("tblInnerCnt");
     if(elTableCnt!=undefined){
       elTableCnt.style.direction="rtl";       
     }    
  } 
  var isFormSubmitted = false;
  if( document.forms ) { 
    document.forms[0].onsubmit=function(){
      if( isFormSubmitted ) {
        return false;
      } else {
        isFormSubmitted = true;
        return true;
      }
    }
  }     
-->
</script>
</body>
</html>

http://localhost:60551/UI5FirstApp/resources/sap-ui-core.js
Line 41

I doublechecked, and login credentials provided in the model are correct.

Has anybody of You faced the same problem? I was trying to look through the web for possible solutions, also fighting with the issue myself, unfortunately without success. I would highly appreciate any hint which could help in solving this problem.

Thank You in advance.

Jakub.

Accepted Solutions (0)

Answers (1)

Answers (1)

former_member2987
Active Contributor
0 Kudos

Jakub,

I'm assuming this is a custom REST form and not one of the ones that comes with SP8, correct?

Matt

former_member268206
Discoverer
0 Kudos

Hello Matt,

That's correct, this is a custom form. It's really simple, only one label to which I tried to bind the model, just to check if I'm able to communicate with REST service. Whole project is created in Eclipse using SAP UI5 Tools and Javascript based MVC concept.

Best Regards

Jakub.

former_member2987
Active Contributor
0 Kudos

Hmmm... Don't know too much about this but I'm looking forward to learning @ TechEd.  In the meantime.  , can you help?

Matt

former_member268206
Discoverer
0 Kudos

Hello,

Maybe it will be helpfull if I post the code:

File InitialView.view.js:

sap.ui.jsview("ui5firstapp.InitialView", {

/** Specifies the Controller belonging to this View.
* In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
* @memberOf ui5firstapp.InitialView
*/
getControllerName : function() {
  return "ui5firstapp.InitialView";
},

/** Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed.
* Since the Controller is given to this method, its event handlers can be attached right away.
* @memberOf ui5firstapp.InitialView
*/
createContent : function(oController) {
  var aControls = [];
 
  var oModel = new sap.ui.model.odata.ODataModel("proxy/http/<host>:<port>/idmrestapi/v2/service", false, "user", "secret");
 
  sap.ui.getCore().setModel(oModel);

  var oLabel = new sap.ui.commons.Label("aLabel");
  oLabel.setModel(oModel);
  oLabel.bindElement("/ET_MX_PERSON%28ID=186,TASK_GUID=guid%27DCC0550A-9BD3-44F5-81AF-9144E7FA7DDD%27%29");
  oLabel.bindProperty("text", "MX_LASTNAME");
 

  var oPanel = new sap.ui.commons.Panel({
   width : "400px"
  });
  oPanel.setText("This is a panel.");
  oPanel.addContent(oLabel);
 
  aControls.push(oPanel);
 
  var oLayout = new sap.ui.commons.layout.VerticalLayout({
   content: aControls
  });
 
  return oLayout;
}

});

File InitialView.controller.js

sap.ui.controller("ui5firstapp.InitialView", {

/**
* Called when a controller is instantiated and its View controls (if available) are already created.
* Can be used to modify the View before it is displayed, to bind event handlers and do other one-time initialization.
* @memberOf ui5firstapp.InitialView
*/
// onInit: function() {
//
// },

/**
* Similar to onAfterRendering, but this hook is invoked before the controller's View is re-rendered
* (NOT before the first rendering! onInit() is used for that one!).
* @memberOf ui5firstapp.InitialView
*/
// onBeforeRendering: function() {
//
// },

/**
* Called when the View has been rendered (so its HTML is part of the document). Post-rendering manipulations of the HTML could be done here.
* This hook is the same one that SAPUI5 controls get after being rendered.
* @memberOf ui5firstapp.InitialView
*/
// onAfterRendering: function() {
//
// },

/**
* Called when the Controller is destroyed. Use this one to free resources and finalize activities.
* @memberOf ui5firstapp.InitialView
*/
// onExit: function() {
//
// }

});

File Index.html

<!DOCTYPE HTML>
<html>
<head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">

  <script src="resources/sap-ui-core.js"
    id="sap-ui-bootstrap"
    data-sap-ui-libs="sap.ui.commons"
    data-sap-ui-theme="sap_goldreflection">
  </script>
  <!-- add sap.ui.table,sap.ui.ux3 and/or other libraries to 'data-sap-ui-libs' if required -->

  <script>
    sap.ui.localResources("ui5firstapp");
    var view = sap.ui.view({id:"idInitialView1", viewName:"ui5firstapp.InitialView", type:sap.ui.core.mvc.ViewType.JS});
    view.placeAt("content");
  </script>
 
</head>
<body class="sapUiBody" role="application">
  <div id="content"></div>
</body>
</html>

I hope this will help to get closer to the solution.

Thanks and Best Regards

Jakub.

Former Member
0 Kudos

Check that the deployed IdM REST and IdM UI 5 applications are configured to use tickets:

http://scn.sap.com/community/security/blog/2012/10/26/use-logon-ticket-authentication-for-web-applic...

Cheers, Jannis