200 response with HTML fails to render webItems module

[acalantog]

Hi @anon11454250,

I’m not particularly an expert on Laravel as I mainly develop using the Atlassian Connect Express framework but I’ll try to help you out as much as I can. However, should be agnostic wrt to installation and module registration as you only need to provide an app descriptor and a host.

Few comments on the previous post:

@anon11454250

I am testing my Bitbucket Cloud add-on and can see that Bitbucket is trying to load my “webItems” module in the UI as well as in the Chrome console. The Chrome console shows that my URL responded with a 200 success and I can see the HTML content as well. However, the Bitbucket UI never populates my content and continues to try to load it.

It actually points to your webPanel located at org.bitbucket.repository.overview.informationPanel (basing from your attached screenshot of repository overview). Your web-item can be seen in your side bar

@anon11454250

@acalantog - I may have a lead here. It could be that I have not been embedding the JWT token in my iframes since Getting started makes no mention of doing so.

What do you mean by embedding here? JWT should be automatically added in your iframes. When you inspect your network connection or iframe’s name you should see a query parameter jwt being sent to your app for your own processing and usage

@anon11454250

Taking a look at the Atlassian Connect Express docs I learned that Bitbucket is expecting the JWT token to be returned by my server.

I’m sorry I don’t understand what you mean here

@anon11454250

Anyway, it looks like the demo add-on server is building out its own JWT token to respond with. Assuming this is why my iframes are not loading, where can I find documentation regarding what the payload should be?

That is not a sample app but the repository for the Atlassian Connect Express framework used by an Atlassian Connect Express app or the scaffolded project atlassian-connect-express-template mentioned in Getting started . But yes, it already process jwt for you and provides a nifty httpClient and helpers.

Since you’re not using Atlassian Connect Express framework, you might be interested in using the PHP framework and tools indicated here from this community post. I think the missing links between the iframe and your router /web-panels\/{repository.full_name} are the OAuth handshake and storage of client information - clientKey, sharedSecret. Although you should be able to render an HTML without the need to authenticate JWT passed from iframe. You may want to try this first to see if your HTML is rendered properly.

Something like this:

app.get('/connect-example', function (req, res) {
    res.render('connect-example-hbs', {
            title: 'Atlassian Connect',
            displayName: 'Anne Calantog',
            repoPath: req.query.repoPath
        });
    });

compared to when you want secure access to your routes:

// This route will be targeted by iframes rendered by Bitbucket. It renders a simple template
    // with two pieces of data:
    //
    //   1. the repository path (passed in the query string via a context parameter)
    //   2. the user who installed the add-on's display name (retrieved from Bitbucket via REST)

    app.get('/connect-example', addon.authenticate(), function (req, res) {

        // the call to addon.authenticate() above verifies the JWT token provided by Bitbucket
        // in the iframe URL

        var httpClient = addon.httpClient(req);

        httpClient.get('/api/1.0/user/', function (err, resp, data) {
            try {
                data = JSON.parse(data);
                res.render('connect-example', {
                    title: 'Atlassian Connect',
                    displayName: data.user.display_name,
                    repoPath: req.query.repoPath
                });
            } catch (e) {
                console.log(e);
                res.sendStatus(500);
            }
        });
    });

The addon variable here was injected and instanstiated in app.js:

var ac = require('atlassian-connect-express');

var addon = ac(app, {
  config: {
    descriptorTransformer: (descriptor, config) => {
      //descriptor.modules.oauthConsumer.clientId = config.consumerKey();
      return descriptor;
    }
  }
});

// Wire up your routes using the express and `atlassian-connect-express` objects
routes(app, addon);

// Boot the damn thing
http.createServer(app).listen(port, function(){
  console.log('Add-on server running at http://' + os.hostname() + ':' + port);
});

which looks like this:

You may also refer to the sample app I created demonstrating JWT OAuth flow but should have the same concept to what you’re currently trying to achieve.

Let me know if that clarifies it or if you have questions and I’ll be happy to help you out.

Cheers,
Anne