Add on on the file viewer. Error when trying to access it through the API

Bitbucket Development Bitbucket Cloud
, , ,
1

Hi community,

I am new to BB development and I was trying to follow some videos on how to create add ons. However I am having a hard time finding good examples.

I am trying to create a special file viewer for a particular file that we have at our project. So far I have been able to obtain everything but the file content. When I try to get it I obtain an authentication error, and I just don’t know how to send the request with the right oauth parameters.

Let me start with the addon connect.json file

{
  "key": "some key",
  "name": "Some name",
  "description": "some descr",
  "baseUrl": "https://***",
  "authentication": {
    "type": "jwt"
  },
  "modules": {
    "oauthConsumer": {
      "clientId": "xxxx"
    },
    "fileViews": [{
      "key": "fileResults",
      "name": {
        "value": "OMPVV Results"
      },
      "url": "/results.html?repo={repo_uuid}&cset={file_cset}&path={file_path}&name={file_name}",
      "file_matches": {
        "names": ["currentResults.json"]
      }
   }]
  },
  "scopes": ["repository"],
  "contexts": ["account"]
}

This works as I get to see the file viewer when I open the currentResults.json file. However, when my JS code tries to access the api through this function:

var obtainResultElements = function(callbackFunction, callbackError) {
    var uuid = location.search.match(/[\?&]repo=([^\&]*)/)[1];
    var cset = location.search.match(/[\?&]cset=([^\&]*)/)[1];
    var path = location.search.match(/[\?&]path=([^\&]*)/)[1];
    uuid = decodeURIComponent(uuid);
    cset = decodeURIComponent(cset);
    path= decodeURIComponent(path);

    AP.require("request", function(request) {
      var rawUrl = '/1.0/repositories/{}/' + uuid +
                  '/raw/' + cset + '/' + path;
      request({
        url: rawUrl,
        responseType: "text/plain",
        success: function (rawFile) {
           var fileContent = [];
           try {
                fileContent = JSON.parse(rawFile);
                callbackFunction(fileContent);
           }
           catch (e) {
                callbackError("Unable to retrieve file content");
           }
        },
        error: function(err) {
           callbackError("error getting the file with the API request " + JSON.stringify(err));
        }
      })
    });
  }

I obtain this error:

error getting the file with the API request {“code”:“frame_src_consumer_callback_mismatch”,“message”:“Module URL must start with the OAuth consumer callback URL”}

I know what the problem is but I am not sure how to add this information to my request.

Thanks for your help!

2

According to this site I am supposed to get a request to give permission to the add on to use the API for me, but I am not really getting it either.

3

I found the culprit:

In the configuration of the OAuth consumer, I accidentally typed http://… instaed of https:// This was creating a different callback url, which resulted in the error message.

This can be fixed in the settings of the user/project that created the OAuth ticket, changing the callback URL.