SAPUI5 and OData dynamic Login

[Former Member]

can anybody share some standard code that sapui5 and odata dynamic login screen navigation ?

Means User has to pass input Username and Password atrun time and get login.

Thank you in advanced

[naveenraj_a · Accepted solution]

Hi Anil, What i suggest you is to try creating a SAPUI5 starter application, which will help you to generate and understand the Login and other data transfer operations from UI to gateway services.

So use the following links, which will help you.

http://scn.sap.com/community/developer-center/netweaver-gateway/blog/2013/06/20/creating-a-sapui5-st...

After code generation, have a look at Webcontent/Authentication folder, you can find the login JS files created which you can use for login from your application. By default the application will be using Form authentication.

Let me know if you face any issues.

[Former Member · Accepted solution]

I am getting error at validation time but in browser it is working fine.

The error is Unauthorised credential.

I want to pass the credential in the following fields when I enter login ,I want to pass the values to SAP.

I am using the following code:

var oLayout = new sap.ui.commons.layout.AbsoluteLayout({width:"340px",height:"150px"});

oLayout.addStyleClass("CustomStyle"); //Add some additional styling for the border

var oLabel = new sap.ui.commons.Label({text:"User Name"});

var oNameInput = new sap.ui.commons.TextField({width:"190px"});

oLabel.setLabelFor(oNameInput);

oLayout.addContent(oLabel, {right:"248px",top:"20px"});

oLayout.addContent(oNameInput, {left:"110px",top:"20px"});

oLabel = new sap.ui.commons.Label({text:"Password"});

oPWInput = new sap.ui.commons.PasswordField({width:"190px"});

oLabel.setLabelFor(oPWInput);

oLayout.addContent(oLabel, {right:"248px",top:"62px"});

oLayout.addContent(oPWInput, {left:"110px",top:"62px"});

var oLoginButton = new sap.ui.commons.Button({text:"Login",  press :"login", width:"133px"});

//oLoginButton.attachPress(login());

oLayout.addContent(oLoginButton, {left:"110px",top:"104px"});

// Attach the layout to the page

oLayout.placeAt("content");

</script>

  <script>

  login : function(oEvent) {

      jQuery.sap.require("sap.ui.model.odata.datajs");

      var serviceURI = "http://192.168.0.7:8000/sap/opu/odata/sap/YNEW_SRV/";

                var username = sap.ui.getCore().getControl("oNameInput") .getValue();

                var password = sap.ui.getCore().getControl("oPWInput") .getValue();

      var request = {

                headers : {

                                  "X-Requested-With" : "XMLHttpRequest",

                                   "Content-Type" : "application/atom+xml",

                                   "DataServiceVersion" : "2.0",

                                   "X-CSRF-Token" : "Fetch"

                                },

                                                                       requestUri : serviceURI,

                                                                       method : "GET",

                                                                       user : username,

                                                                       password : password

                                                             };

                                                               OData.request(request, function(data) {

                                                                       alert("success");

                                                             }, function(err) {

                                                                       alert('Error Code:'+ err.response.statusCode);

                                                             });

                                                   }

  </script>

Thank you Naveenraj

[naveenraj_a · Accepted solution]

Hi Anil, As i see you were using the ODataModel,

jQuery.sap.require("sap.ui.model.odata.datajs");

Why cant you use the ODataModel, constructor to pass your url with username and password?

For eg.

var serviceURI = "http://192.168.0.7:8000/sap/opu/odata/sap/YNEW_SRV/";

var username = sap.ui.getCore().getControl("oNameInput") .getValue();

var password = sap.ui.getCore().getControl("oPWInput") .getValue();

var OData = new sap.ui.model.odata.ODataModel(serviceURI,true ,username,password);

Please have a look at the below link for other methods of ODataModel,

JsDoc Report - SAP UI development Toolkit for HTML5 - API Reference - sap.ui.model.odata.ODataModel

Also make sure you use the same Library version like the previous link, you can see at the footer of the link for version details.

[Former Member · Accepted solution]

Thank you Naveenraj.

[former_member223387 · Accepted solution]

Hi,

I tried this code above but it's not working. For me, I wanted to pass the Url dynamically and load odata  metadata and get a list of service name. I thought , I just need to change some parts of this code like this:

load: function(oEvent){

   jQuery.sap.require("sap.ui.model.odata.datajs");

  var serviceURI = sap.ui.getControl("oUrlInput").getValue();

  var OData = new sap.ui.model.odata.ODataModel(serviceURI,true);

       var request = {

                 headers : {

                                   "X-Requested-With" : "XMLHttpRequest",

                                    "Content-Type" : "application/atom+xml",

                                    "DataServiceVersion" : "2.0",

                                    "X-CSRF-Token" : "Fetch"

                                 },

                                                                        requestUri : serviceURI,

                                                                        method : "GET",

                                                              };

                                                                OData.request(request, function(data) {

                                                                        alert("success");

                                                              }, function(err) {

                                                                        alert('Error Code:'+ err.response.statusCode);

                                                              });

                                                    }

could you help me please!!

Thanks in advanced

[miguelangel_daz · Accepted solution]

Incredible solution, now How could you do a logout, to clear the caché?

[naveenraj_a]

Hi Anil, Can you explain us your requirement in more details.

What you mean by dynamic login?

What is your development scenario?

[Former Member]

Means in login page when we input Username and Password it will go to SAP Backend and check .after that login successfully.

Thank you Naveenraj for your reply.

[naveenraj_a]

Is yours a Custom SAPUI5 Application? Have you uploaded your application to Gateway system?

[Former Member]

Yes naveenraj

This is a Custom SAPUI5 Application.

I want to use Odata service url and pass the username and password at run time to authenticate .

Thanks

Anil

[Virinchy]

Hi Anil,

If you look the previous example at the loginView.controller.js , the values can be passed dynamically , (values in inpLogin and inpPWD is passed via an ajax call to the backend for validation) .

code:

  var sURL = "/s/login.cshtml?login=" + this.byId("inpLogin").getValue() + 

                    "&password" + this.byId("inpPWD").getValue(); // compile URL to call 

The values are passed dynamically .

[Former Member]

Hello Naveenraj

i am getting the attached error when validating whereas the url and credential is working fine in browser.

[Virinchy]

Please have a look at . and also a tutorial in open.sap.com contains an example using Login authentication .