Allowing an app to use the Trello API stopped working

Trello
21

Hey everyone,

Unfortunately Bentley is out this week (bad timing, I know!). I’ll be trying to resolve this issue in the meantime. Good news is I have been able to reproduce this, so I’ll report back once I have something to share.

I do have questions for everyone:

Which authorization “pattern” are you using when this issue occurs? Either:

  1. calling Trello.authorize(), as shown in this guide.
  2. Or by constructing the authorization url manually and calling t.authorize(), as shown here?

Theoretically it shouldn’t matter, but you can never be too sure :man_shrugging:.

Also, for everyone reporting this issue, are they all for custom apps/power-ups? Is anyone here reporting this issue for a public Power-Up?

1 Like
22

Jireh,

I am using Trello.authorize()

23

I am using Trello.authorize() for my app, the code below:

var authenticationSuccess = function() {
  console.log('Successful authentication');
};

var authenticationFailure = function() {
  console.log('Failed authentication');
};
window.Trello.authorize({
  type: 'popup',
  name: 'Getting Started Application',
  scope: {
    read: 'true',
    write: 'true' },
  expiration: 'never',
  success: authenticationSuccess,
  error: authenticationFailure
});
24

Jireh,

I am using Trello.authorize()

25

Hey everyone, tiny update here:

If you are experiencing this issue with a custom power-up, please try using this t.getRestApi().authorize() pattern instead outlined here: REST API Client

If this resolves your issue PLEASE let us know.

However, I assume most of you are experiencing this issue outside the context of Power-Ups. Could someone please first confirm my assumption, that you are all developing your own apps which integrate with Trello (i.e. NOT Power-Ups?) . If so, I’m still investigating this.

26

@Jireh yes - we are using the API for a web app

27

@Jireh I am also using Trello.authorize() in a web app (NOT power-up) as instructed here client.js Reference

We cannot use the proposed solution…

28

Hey everyone,

Thanks for your patience. I think I have a workaround/solution for everyone.

In your app’s code, I presume you have something like
<script src="https://api.trello.com/1/client.js?key={APIKey}"></script>
to gain access to client.js. Could you try switching it to this instead?

<script src="https://trello.com/1/client.js?key={APIKey}"></script>

The difference is removing the api subdomain from the url. Please let me know if that does or doesn’t fix the issue. Thanks.

29

This does indeed fix it. You mention that this is a workaround, does this mean that it is not the permanent solution?

30

Good question. I think we’d want to make it so either one would work, to avoid confusing situations like this. I’m still working with the team to see how this could be done.

31

Same problem here for the past week — getting bombarded with support requests from the customers. Just getting stuck on the blank screen after approving the token.

20
201732×1792 88.9 KB

Doesn’t seem to be happening this morning though.

32

Also works for me …

33

Hi everyone. Thanks to all who responded to this thread. Even just chiming in to say you are experiencing the issue helps, because it tells us how widespread an issue is.

I’m pleased to say we have pushed out a fix, so whether you grab client.js from “api.trello.com” or “trello.com”, it should work either way. When your users try to auth your app, they should be take to “trello.com/1/authorize…” no matter what. Please let me know if your are still experiencing this issue.

Thanks again everyone!

Jireh

1 Like
35

I am still experiencing the same issue (with and without the api part in the URL).
I am not sending the API key in the url, I’m calling Trello.setKey(api_key) in the code.

It’s not possible for us to switch to passing the API key as a query parameter due to the nature of the project.

Edit:
@Jireh @bentley (not sure which one of you guys took over the issue :slight_smile: )
It apparently doesn’t have anything to do with the way how the API key is passed, I get the blank screen with both ways.

So I guess this is the normal process as anyone else reported, but here it is:
Once I call the Trello.authorize() using the same parameters as e.g. JordanKatz, it opens a popup with this url:
https://trello.com/1/authorize?response_type=token&key={api_key}&return_url=http%3A%2F%2Flocalhost%3A33006&callback_method=postMessage&scope=read%2Cwrite%2Caccount&expiration=never&name={app_name}

Although the returnUrl is set to be http://localhost:33006, I’m calling this from a bit different route, which goes something like http://localhost:33006/one/two/three#four

Once I click the “allow” button, the popup switches to api.trello.com/1/approve, blank screen with this HTML:

<html><head><script>
if(window.opener) {
window.opener.postMessage("{some token that's not my api key}", "http://localhost:33006")
}
</script></head></html>

Nothing else happens, the blank popup just hangs there.

While it seems to be fixed for some people, unfortunately the fix doesn’t work for us.

If you need any other information, I’ll be more than glad to provide it, just to get this over with finally.

1 Like
36

Hello @eimamovic2 did you find a solution?

37

No, I haven’t.

38

@eimamovic2 Hi there, thanks for bringing up your issue, and sorry for not seeing this earlier. I will look into this as much as I can today, but please know it is the Thanksgiving holidays here in the US. I’ll report anything I find at the end of the day, but I won’t be able to pick this up again until next Monday.

Also, I wanted to clarify that the token inside that window.opener.postMessage isn’t meant to be the same as your API key, but rather a token generated specifically based on the token’s user, expiration date, and scope.

@A.Desp are you experiencing the exact same issue? If you are, could you also elaborate on what methods you are calling and what your /1/authorize url looks like?

39

This is expected because we’re using postMessage and postMessage expects an origin (as opposed to a full URI): Window: postMessage() method - Web APIs | MDN

I’ve put together a example project to try to reproduce this. Mind taking a look and seeing how close this is (though stripped down) to what you have?

It is working as expected for me. Perhaps you could remix it and change it such that the problem reproduces for you?

40

Hi @bentley , thanks for your response! However, I’m getting a 404 (“Well, you found a glitch”) message for your Glitch link, mind re-checking that URL so I can see it? Thanks!

41

@eimamovic2 - Does this work?