SAPUI5 / AJAX, submitting Basic Authentication Details

Question

I'm trying to access a SAP Successfactors API from an AJAX Call in a SAPUI5 application.

I can access the API fine using POSTMAN, and providing the Basic Authentication credentials.

How do I supply these credentials directly in AJAX. I've tried numerous ways from numerous post but no method seems to work.

Response from Google Dev Tools (Console Tab)

Failed to load https://api2.successfactors.eu/odata/v2/PerPerson?$select=personId: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://webidetesting#####-#####.dispatcher.hana.ondemand.com' is therefore not allowed access.

Response from Google Dev Tools (Network Tab)

Authentication credentials are required. Please provide a valid username, password and company id

Ajax.

var aData = jQuery.ajax({
                type: "GET",
                contentType: "application/json",
                crossDomain: true,
                url: "https://api2.successfactors.eu/odata/v2/PerPerson?$select=personId",
                xhrFields: {
                    withCredentials: true
                },
                beforeSend: function (req) {
                    req.setRequestHeader('Authorization', 'Basic ' + btoa('Username:Password'));
                    req.setRequestHeader('Access-Control-Allow-Origin', '*');
                },
                headers: {
                    "Authorization": "Basic " + btoa("Username" + ":" + "Password"),
                    "Access-Control-Allow-Origin": "*"
                },
                username: "Username",
                password: "Password",
                dataType: "json",
                async: false,
                success: function (data, textStatus, jqXHR) {
                    oModel.setData({
                        modelData: data
                    });
                    alert("success to post");
                },
                error: function (oError) {
                    console.log(oError);
                }

            });

Hi Adam, Username has to be USER@COMPANY:PASSWORD, this might be some issue. Otherwise are you using WebIDE? Then using a destination in SAP Cloud Platform helps, because no CORS happens... let me know. Then I can do some research on my end. — dotchuZ, Sep 05 '18 at 06:43

score 2 · Accepted Answer · edited Mar 28 '19 at 18:44

The following issues might be the problem:

1) Is Username of Type: USERNAME@COMPANY:PASSWORD before sent?

2) Endpoint URL should be according to your data center, maybe DC2 is correct, but could also be DC12 ? https://api12.successfactors.eu/odata/v2/PerPerson?$select=personId instead of https://api2.successfactors.eu/odata/v2/PerPerson?$select=personId

3) Pass a reference to your success function

var that = this;

....
success: function (data, textStatus, jqXHR) {
     var oModel = that.getView().getModel(); // get your model, instatiated outside this method
     oModel.setData({
        modelData: data
     });
     alert("success to post");
},
     error: function (oError) {
        console.log(oError);
}
....

4) Working with SAP Cloud Platform the right way to avoid cross-origin problems!

Destination (Connectivity -> Destinations) in SAP CP:

Don't forget to check the connection and receive HTTP status code = 200!

Name: sap_hcmcloud_core_odata, 
Type: HTTP
URL:  https://api12preview.sapsf.eu
Auth: Internet, Basic Authentication
  Your User (Username@Company), 
  Your Password
Properties  
  WebIDEEnabled = true
  WebIDESystem = SFSF
  WebIDEUsage = odata_gen

neo-app.json add a route:

{ "path": "/sf-dest",
    "target": {
        "type": "destination",
        "name": "sap_hcmcloud_core_odata"
    },
    "description": "SFSF Connection"
}

in your controller

sap.ui.define([
"sap/ui/core/mvc/Controller"], function (Controller) {
"use strict";

return Controller.extend("yourNamespace.yourAppName.controller.Main", {
    onInit: function () {
        var oModel = new sap.ui.model.json.JSONModel();
        var sHeaders = {
            "Content-Type": "application/json",
            "Accept": "application/json",
        };

        //sending request
        oModel.loadData("/sf-dest/odata/v2/PerPerson?$select=personId", null, true, "GET", null, false, sHeaders);
        console.log(oModel);

    }
});
});

4) Was the perfect answer. Thanks zYrEx – Adam Harkus Sep 05 '18 at 10:53 — Adam Harkus, Sep 05 '18 at 10:53

score 0 · Answer 2 · answered Sep 05 '18 at 12:47

0

An SCP Destination is the answer in this case, but what if there are 2 calls, one to an authentication API (to retrieve a token) and another to the GET API (using the retrieved token as authentication ?)

answered Sep 05 '18 at 12:47

Adam Harkus

2,050
2
36
64

Well, if you have a simple Token URL you could modify the destination on your own. If you want to achieve OAuth SAML Bearer Authentication for SFSF please checkout my blog, there you find links how to create a secure destination with Neo Command Line Tools for HCP: https://blogs.sap.com/2018/09/05/successfactors-extensions-with-sapui5-and-the-correct-usage-of-sap-cp-destination-services/ – dotchuZ Sep 06 '18 at 06:23

score 0 · Answer 3 · answered Sep 06 '18 at 09:26

0

The answer was simply to create a DESTINATION with NO authentication and apply all the authorization in AJAX

answered Sep 06 '18 at 09:26

Adam Harkus

2,050
2
36
64

1

Which is a security issue because all authorization is sent in clear readable text.... – dotchuZ Sep 06 '18 at 15:07

SAPUI5 / AJAX, submitting Basic Authentication Details

3 Answers3

Linked