MFP 8.0 API works in POSTMAN but not from AJAX

Question

I am able to make a successful POSTMAN call to: /mfp/api/az/v1/token and /mfpadmin/management-apis/2.0/runtimes/mfp/applications

I am taking the bearer token i receive from /mfp/api/az/v1/token and add it to the Authorization header for /mfp/applications.

I receive a 200 response from both and get the expected information from each API.

I then choose to copy the ajax code from POSTMAN for each of these working API Calls:

  var getBasic = {
    "async": true,
    "crossDomain": true,
    "url": "https://..../mfp/api/az/v1/token",
    "method": "POST",
    "headers": {
      "authorization": "Basic YXBpYzptZnBhcGlj",
      "grant_type": "client_credentials",
      "cache-control": "no-cache",
      "postman-token": "05a672e5-6141-fd6f-82e2-b282d68dce35",
      "content-type": "application/x-www-form-urlencoded"
    },
    "data": {
      "grant_type": "client_credentials",
      "scope": "settings.read"
    }
  }

  $.ajax(getBasic).done(function (response) {
    console.log(response);
    var accessToken = response.access_token;
    console.log(accessToken);
    var settings = {
      "async": true,
      "crossDomain": true,
      "url": "https://....:8445/mfpadmin/management-apis/2.0/runtimes/mfp/applications",
      "method": "GET",
      "headers": {
        "authorization": "Bearer " + accessToken,
        "cache-control": "no-cache"
        }
      }
    console.log(settings);
    $.ajax(settings).done(function (response) {
      console.log("response: " + response.totalListSize);
    });

  });

However, when i run this in my WebUI I get a 200 response from the /token but i get a 401(Unauthorized) from my /mfp/applications

Why does this work in postman, but not from the Web UI (Chrome)?

I think you're supposed to obtain the access token by code and not simply re-use an existing token. Did you try obtaining it by code? https://mobilefirstplatform.ibmcloud.com/tutorials/en/foundation/8.0/authentication-and-security/confidential-clients/#obtaining-an-access-token — Idan Adar, Feb 08 '17 at 15:33
I am getting the bearer token using the getBasic details. When that call is completed i get the access_token from the response and pass it to the settings variable (/mfp/applications). — K.Van, Feb 08 '17 at 15:36
What did you mean by "I then choose to copy the ajax code from postman"? — Idan Adar, Feb 08 '17 at 15:43
Postman has a 'Code' button where you can choose to have it output the type of call you need. I then choose a JS AJAX call. — K.Van, Feb 08 '17 at 15:51
Also mention Where you are trying to call this code. In an app or elsewhere? — Idan Adar, Feb 08 '17 at 16:11
I am trying to use it from a web UI. I was able to successfully get the token from '/mfp/api/az/v1/token'. I am specifically having an issue with '/mfpadmin/management-apis/2.0/runtimes/mfp/applications' — K.Van, Feb 08 '17 at 16:15
What is "web ui". Where are you calling it from. What is this that you are runing — Idan Adar, Feb 08 '17 at 16:15
From an HTML/JS document running on my localhost in Google Chrome on my MacBook. — K.Van, Feb 08 '17 at 16:16

Idan Adar · Accepted Answer · 2017-02-09T11:15:09.883

The mfpadmin service and its endpoint that you're using (applications) does not require an access token in the way that you have tried to obtain it. It requires the user name and password for the console. As such when you're using the Bearer access-token, it fails with 401 unauthorized because that is not what the server is expecting in order to allow access to the applications endpoint.

I have done the following:

Installed the express and request node packages to create a proxy of sorts. This is required as you can't simply make an AJAX request from the browser to the server (you will get errors from the browser related to cross origin requests):

npm init
npm install --save express
npm install --save request

Created a proxy.js (note that this code is specific to mfpadmin):

var express = require('express');
var http = require('http');
var request = require('request');

var app = express();
var server = http.createServer(app);
var mfpServer = "http://localhost:9080";
var port = 9081;

server.listen(port);
app.use('/', express.static(__dirname + '/'));
console.log('::: server.js ::: Listening on port ' + port);

// Reverse proxy, pipes the requests to/from MobileFirst Server
app.use('/mfpadmin/*', function(req, res) {
     var url = mfpServer + req.originalUrl;
     console.log('::: server.js ::: Passing request to URL: ' + url);
     req.pipe(request[req.method.toLowerCase()](url)).pipe(res);
});

In an HTML file reference an implementation .js file and jQuery:

<html>
    <head>
        <script src="/jquery-3.1.1.min.js"></script>
        <script src="/main.js"></script>
    </head>

    <body>

    </body>
</html>

In main.js file:

$.ajax({
   "crossDomain": true,
   "url": "http://localhost:9081/mfpadmin/management-apis/2.0/runtimes/mfp/applications",
   "method": "GET",
   "headers": {
       "authorization": "Basic YWRtaW46YWRtaW4=",
       "Access-Control-Allow-Origin": "*",
       "cache-control": "no-cache" 
   }      
}).done(function(response) {
    console.log(response);
});

Basic YWRtaW46YWRtaW4= is the representation of Basic Auth with username admin and password admin.

As a response I received the following JSON.
The items array contains the applications that are currently registered in the MobileFirst Server.

Will the node.js proxy need to be set up on our server as well for this to work? — K.Van, Feb 09 '17 at 21:01

MFP 8.0 API works in POSTMAN but not from AJAX

1 Answers1