How can I send request from dialog?

Confluence Development Confluence Cloud
#1

Hi there,

I’m creating confluence-cloud add-on.
It works, create dialog from web item, insert email text in dialog, send POST request to other site.
but when send POST request to other site, server shows below error and not work.
How can I fix these? I need your help. Thanks.

{ ctx: {} } Authentication verification error (401):  Could not find authentication data on request
GET /add-new-customer?email=&companyName= 401 12.300 ms - 787

my atlassian-connect.json

...
    "webItems": [
            {
                "location": "system.content.action/modify",
                "weight": 200,
                "context": "addon",
                "target": {
                    "type": "dialogmodule",
                    "options": {
                        "key": "newCustomer"
                    }
                },
                "tooltip": {
                    "value": "Example tooltip"
                },
                "name": {
                    "value": "test"
                },
                "key": "web-item-example"
            }
        ],
        "dialogs": [
            {
                "key": "newCustomer",
                "url": "/add-new-customer?spaceKey={space.key}",
                "options": {
                    "chrome": false,
                    "height": "420px",
                    "width": "600px",
                    "header": {
                    "value": "Add a new customer"
                    }
                }
            }
        ]

new-customer.hbs

{{!< layout}}
<div>
  <div class="aui-dialog2-content">
    <form id="add-customer-dialog" class="aui top-label new-customer-dialog">
      <div class="field-group top-label">
        <label for="email">Email</label>
        <input class="text long-field" type="text" id="email" name="email" placeholder="hogehoge@huga.com" />
      </div>
      <div class="field-group top-label">
        <label for="companyName">Company Name</label>
        <input class="text long-field" type="text" id="companyName" name="companyName" placeholder="Atlassian" />
      </div>
      <button id="dialog-submit-button" class="aui-button aui-button-primary">Submit</button>
      <button id="dialog-close-button" class="aui-button aui-button-link">Close</button>
    </form>
  </div>
</div>

<script>
$(function(){
    $("#dialog-submit-button").on("click", function(){
      require('date-utils');
      let now = new Date();
      const request = require('request')
      const options = {
          uri: "https://test/api/customer_set",
          headers: {
            "Content-type": "application/json",
          },
          json: {
            "mail_address": $("#email").val(),
            "companyName":  $("#companyName").val()
          }
      }
      request.post(options, function(error, response, body) {
      });
      AP.dialog.close()
    })

    $("#dialog-close-button").on("click", function(){
      AP.dialog.close()
    })
})
</script>

logs. some info hidden
Why dialog call the same route?

GET /add-new-customer?spaceKey=SpaceKey&xdm_e=xdm_e&xdm_c=xdm_c&cp=cp&xdm_deprecated_addon_key_do_not_use=my-app&lic=none&cv=1.870.0&jwt=jwt 200 14.847 ms - -
GET /css/addon.css 304 0.894 ms - -
GET /js/addon.js 304 0.369 ms - -
GET /css/addon.css 304 0.448 ms - -
{ ctx: {} } Authentication verification error (401):  Could not find authentication data on request
GET /add-new-customer?email=&companyName= 401 12.300 ms - 787
#2

Hi @eita_ishida,

You’re almost there! Your request towards your own backend needs to be authenticated with a JWT token. You can get one from AP.context.getToken(). You then need to include this token in your Authorization header:

AP.context.getToken(function(token) {
    const request = require('request')
    const options = {
        uri: "...",
        headers: {
            "Content-type": "application/json",
            "Authorization": "JWT " + token
        }
    };
    ...
});

Alternatively, you could render a JWT token into your document and use that. You can find an example of that here: https://bitbucket.org/atlassian/atlassian-connect-spring-boot-samples/src/master/atlassian-connect-spring-boot-sample-ajax/src/main/resources/templates/iframe.html

Hope this helps!

Cheers,
Sven

#3

Great! Thank you @sven.schatter .
I was able to send request to own backend.
But, backend server shows below error yet. And dialog not close with the error.

{ ctx: {} } Authentication verification error (401):  Could not find authentication data on request
GET /add-new-customer?email=eita_ishida%40hoge.com&companyName=testcompany 401 26.994 ms - 787

Why dialog send request to own url? And is there any way to avoid the error?

#4

Hi @eita_ishida,

That’s weird. In your code you are doing a POST request but the error you’re seeing is about a GET request. Are you sure you are executing the right code (i.e. aren’t inadvertently loading another file?).

Since you are using jQuery anyway, have you tried going with $.ajax instead of request?

AP.context.getToken(function(token) {
	$.ajax('...', {
		type: 'POST',
		contentType: 'application/json',
		beforeSend: function(request) {
			request.setRequestHeader('Authorization', 'JWT ' + token);
		}
	});
});

Cheers,
Sven

#5

Hi Sven.
Ah, this is my mistake.
I changed POST request to GET request.
The new GET request was sent my backend server.

Below log is new one.
in /send-server, I put console.log(req.query).
At line 5, /add-new-cutomer called but I didn’t call. Why?

GET /add-new-customer?spaceKey=SpaceKey&xdm_e=xdm_e&xdm_c=xdm_c&cp=cp&xdm_deprecated_addon_key_do_not_use=my-app&lic=none&cv=1.870.0&jwt=jwt 200 33.417 ms - -
GET /css/addon.css 200 2.882 ms - 278
GET /js/addon.js 200 1.515 ms - 26
{ ctx: {} } Authentication verification error (401):  Could not find authentication data on request
GET /add-new-customer?email=eita_ishida%40irep.co.jp&companyName=testcompany 401 43.786 ms - 787
GET /send-server?email=eita_ishida@irep.co.jp&companyName=testcompany 200 25.645 ms - -
{ email: 'eita_ishida@hoge.com', companyName: 'testcompany' }

new-customer.hbs 's script part

<script>
$(function(){
    $("#dialog-submit-button").on("click", function(){
      AP.context.getToken(function(token) {
        $.ajax({
          url: "send-server?email=" + $("#email").val() + "&companyName=" + $("#companyName").val(),
          beforeSend: function (request) {
              request.setRequestHeader("Authorization", "JWT " + token);
          }
        }).done(function(data) {
            alert(JSON.stringify(data, null, '\t'));
        });
        AP.dialog.close();
      });
    });

    $("#dialog-close-button").on("click", function(){
      AP.dialog.close();
    });
})
</script>
#6

As you are using a <form> this might just be the default behaviour of the submit button. Have you tried disabling the default behaviour?

$("#dialog-submit-button").on("click", function(e){
    e.preventDefault();
    ...

Cheers,
Sven

1 Like
#7

@sven.schatter!! That’s just my problem!!
I could avoid all error, and could sent to my other backend!
Thank you!!

1 Like