How to access Atlassian Connect Express backend end points from frontend JS

Atlassian Developer Tools
,
1

Hi all,

I am developing a JIRA cloud add-on, based on ACE. I am following the tutorial, and my add-on file tree looks like the attached snapshot.

Question: how to invoke an add-on back-end endpoint front a frontend JS?

In routes/index.js, I have:

app.get('/deeper-load-project',

        // Require a valid token to access this resource
        addon.checkValidToken(),

        function(req, res) {
			console.log("Function: deeper-load-project");
			console.log("req: " + req);
          res.status(200);
        }
    );

In public/js/my.js, I have:

AP.require('request', function(request)
    	{
      		request(
      		{
        		url: '/deeper-load-project',
        		success: function(response)
        			{
        				console.log("success, response:");
        				console.log(response)
        			},
        		error: function(response)
        			{
        				console.log("error, response:");
        				console.log(response);
        			}
      		});
    	});

But when this last method, I get a 403 error.

I guess my URL to access endpoint is maybe not OK, but I can’t figure out exactly…

Thank you for help!

image2016-1-27 17-43-54.png469Ă—516 75.5 KB

2

AP.request is for making calls to the Atlassian application. To call yourself - you can use whatever you want. How you want to secure the call - that’s up to you as well. :slight_smile:

What I do is to use jQuery (yes I haven’t switched to react yet) and use a jwt token that I sent down in the initial html page as the authentication token. Then I can verify the jwt token was sent from me on my call (using add-on.checkValidToken() ). For more details - see “How to send a signed HTTP request from the iframe back to the add-on service” at Bitbucket .

3

Thanks a lot Daniel!

OK it’s getting more clear now. I am also using jQuery… One last question: how do you build the HTTP request with jQuery from frontend side?

4

Just plain jQuery using ajax (so I can get the json content type). The key is to set the authorization header before hand:


$.ajaxSetup({
    headers: { 'Authorization': 'JWT {{token}}'
});

is what we do.

1 Like
5

Hey hey Daniel,

It works like a charm! Thanks a lot for your help,

Fred

6

Hi @frederictardieu @daniel

In our connect add-on, have added the same code. But cannot access the data, as 401 error code is thrown when using addon.checkValidToken(). Here is my server side code,

app.get('/test', addon.checkValidToken(), function(req, res){
	....
});

and client side code,

$.ajax({
	type: "GET",
	url: "/test",
	dataType: "json",
	beforeSend: function (xhr) {
		xhr.setRequestHeader("Authorization", "JWT {{token}}");
	},
	success: function(data){
		alert("success");
	}
});

Already, I have posted a question here. What changes has to be done here? Or how can I check jwt token using checkValidToken(). Thanks in advance.