x

Problem when final destination of oAuth process is dashboard card without a link

I have a welcome card added by my app:

image

I have implemented oAuth process for my Weebly app and in my manifest.json file I added this card as a oauth_final_destination:

...
  "oauth_final_destination": "dashboard_card-welcome",
  "dashboard_cards": [
    {
      "name": "welcome",
      "version": "1.0.1",
     ...

When oAuth is finished, Weebly successfully redirects to the takeover of my card, but, since my card does not have a link defined (I don't need it), it opens empty takeover. Now user has to close the takeover and click on a Connect now! link inside my card and then it works. I would like to have oAuth final destination to open the Connect now! link. This link will open a takeover form for connecting Weebly website with my system and this is needed only once. When user connects, dashboard card is updated and welcome component is replaced with some statistics data.

If I add a card link, it cannot be updated through webhook so this is why I didn't add it in the first place.

So I decided to have 2 cards, one with welcome component and one with statistics data and through dashboard.card.update hook I set hidden for one of the cards depending on a status of integration. Now, welcome, card takeover is displayed correctly and only welcome card is initially visible, but once user connects, welcome card is hidden (updated through the hook) but statistics card is still hidden since update webhook is not invoked by Weebly even when user refreshes the dashboard page.

At the end I added 2 cards, both initially visible. Statistics card displays initially just a text informing user that statistics will be shown once he/she connects the app through the welcome card. Once user connects and welcome card takeover is closed, after couple of seconds welcome card disappears because update hook is setting hidden to true, but statistics card is not refreshed since update hook is not invoked for it. When user refreshes dashboard page, statistics card is updated correctly. So, downside for this is that statistics card is displayed before user connected the app and it is not automatically refreshed until user refreshes dashboard.

Is there a way to have a single card without a link that could open automatically when app is installed as if user clicked on Connect now! button in the card?

Or is there any other way to achieve without having 2 cards that are both visible?

Thanks!

Tags (1)
6,313 Views
Message 1 of 13
Report
12 REPLIES 12

Hey @davidurbansky

Have you tried defining the `link` property on the dashboard card element to use the same URI as your `manage_app_url`?

Then you could perform lookups on that URL to see if you already know about this app being installed on that particular site for that user, and if you do not, you could initiate your new user signup flow in your system.

6,292 Views
Message 2 of 13
Report

Hi devsupport,

Thanks for your reply. Yes, we know we could add a link that would be the same as for manage_app_url, but we don't have this, since we don't need it. Once user connects to our service, only statistics are displayed on dashboard. We could put it and detect whether user already connected, but this seemed needless becase then we can only display a screen with a message, "You are already connected." or similar. User might think something like: Well, why did you put the link here if I shouldn't use it...

We ended up with 2 cards, both displayed at the beginning, where statistics card just says that it will be automatically updated after the connect. User might also say something like "well, why didn't you display this card after I connected", but I guess we have to live with some system limitations.

From our point of view, the best would be from your side to either:

- make link_url of the dashboard card updatable via webhook, or

- send update webhook for hidden cards as well, so we can hide statistics card at the beginning and show it once needed.

Thanks! 

6,289 Views
Message 3 of 13
Report

You should be able to do everything you need with one card. Set up your default card as the welcome card (as I think you've done). When you receive the webhook from the welcome card, you send the data for statistics card, which at first might be just text stating that statistics will be shown once there is something to report. Then on subsequent webhook notifications, you can update the statistcs card (or do that proactively).

But I'm a bit confused by something. You say your welcome card doesn't need a link, but you also say you need the user to click the Connect now button in order to start the process. And you say the webhook can't update the link. Can you be more specific as to the difference between the action_link that you define in the manifest (and that would be used for the takeover) and the link that you want to change it to? I think I'm missing something...

6,268 Views
Message 4 of 13
Report

You should be able to do everything you need with one card. Set up your default card as the welcome card (as I think you've done). When you receive the webhook from the welcome card, you send the data for statistics card, which at first might be just text stating that statistics will be shown once there is something to report. Then on subsequent webhook notifications, you can update the statistcs card (or do that proactively).


But I'm a bit confused by something. You say your welcome card doesn't need a link, but you also say you need the user to click the Connect now button in order to start the process. And you say the webhook can't update the link. Can you be more specific as to the difference between the action_link that you define in the manifest (and that would be used for the takeover) and the link that you want to change it to? I think I'm missing something...

6,267 Views
Message 5 of 13
Report

Hi Robin,

Let me try to explain with image:

imageSo, card content is not a problem, once user is connected we can replace it with statistics, but if we use the same card, the top link cannot be updated and will always be present on the card, although it does nothing once user is connected. Of course, when user clicks on the top link after it is connected, we can just display a page where we can say "You are already connected, nothing to do here" kind of message, but it is not necessary, so we would avoid it.

I hope I explained the problem better now.

Thanks!

6,245 Views
Message 6 of 13
Report

Hi David,

That's right - the content at the top of the card, defined in the root dashboard_cards element, does not ever change for the card. This link should be to content that provides a summary information about the app as a whole. You don't have to provide this link if you don't want. If you omit it, that right-facing arrow won't display.

In your Welcome Component, use that action_link to provide a URL that connects the app. Once the user connects from that URL you can include JavaScript for the user to navigate to the editor or to publish their site. More here: https://dev.weebly.com/pf_apps_dashboard_create.html#add-navigation-in-takeovers

6,240 Views
Message 7 of 13
Report

Hi Robin,

The problem with your proposed solution (I tried it before) is that when authentication process finishes, I have to provide final destination url as explained here. From the options, I needed either to redirect to manage_app_url or to a dashboard card takeover. If I provide manage_app_url and use it to connect user to our services, then when user goes to My Apps on the site where the app is installed, there will be a Manage App button for the app and it will again take to the manage page that we don't need after the user connected. Second option is to redirect to dashboard card takeover which requires link in dashboard card as explained previously (if we don't provide link, takeover will open with blank page). So, both options have the same problem as we don't need any user management after user initially connected. 

So the only option in my opinion was to have two cards with "smaller" downside than the additional "manage" page that does nothing.

A solution for us would be to either make link on dashboard card managable through webhook, or to invoke update event on dashboard cards that are originally hidden.

6,233 Views
Message 8 of 13
Report

Hi David,

I think I might still be missing something.

If you configure OAuth to redirect to your dashboard card, and you haven't added a link attribute to your card definition in the manifest, the user should be directed directly to the dashboard and see your default card that you've configured in the manifest.

If you configure your default Dashboard Card to be a Welcome component, you can provide your connection URL in that card's definition using the card's action_link. Then when you update the card, you replace the Welcome card with the Statistics card.

Is the problem that a takeover is displaying after OAuth, even if you don't define a link for the card?

6,222 Views
Message 9 of 13
Report

Hi Robin, 

What you said at the end is exactly the problem. When link is not provided, takeover is opened and emply page is displayed with a spinner animation (loading icon), so user thinks page is loading, but it's not since there is no link. I saw this behavior in other modules as well when I tried to install them and they have welcome component without the link. 

6,220 Views
Message 10 of 13
Report

Ah - ok. Then there is something wrong - that should not be happening. I am going to open up a support ticket and copy you on it. It will ask that you attach your manifest file. I think there might be something misconfigured there between your OAuth URLs and your dashboard configuration.

1,947 Views
Message 11 of 13
Report

Hi Robin,

Sorry for short delay. Please find attached example manifest file that will produce the problem.

{
  "manifest": "1",
  "client_id": "123456789",
  "version": "1.0.0",
  "scopes": [
    "read:site",
    "write:site"
  ],
  "callback_url": "https://example.com/initAuth",
  "oauth_final_destination": "dashboard_card-welcome",
  "webhooks": {
    "callback_url": "https://example.com/webhooks",
    "events": [
      "app.uninstall",
      "site.delete",
      "dashboard.card.update"
    ]
  },
  "dashboard_cards": [
    {
      "name": "welcome",
      "version": "1.0.0",
      "icon": "files/assets/favicon.svg",
      "default": [
        {
          "type": "welcome",
          "headline": "Welcome to the integration!",
          "text": "To enable this integration on your website, please click below.",
          "action_label": "Connect now!",
          "action_link": "https://example.com/connect/:jwt"
        }
      ]
    }
  ]
}
1,940 Views
Message 12 of 13
Report

Hello @davidurbansky

Yes, if the `link` property for the card is emtpy, we open a blank web page.

When a user installs your app, part of the OAuth2 installation process (after your app has received a valid `access_token` in exchange for the `authorization_code`) is for your app to handle user-setup/auth/configuration for your service/app on your systems. Then, once that is completed, your app must indicate to Weebly that the account setup process is completed by Redirecting to the Final Destination which is when the `oauth_final_destination` location will be loaded by Weebly (the Final Destination for your app).

I know you have stated you don't need to use the `link` location in the header of the dashboard card, but we will not be altering our processes or systems to accommodate your request at this time.

Our recommendation is to implement the same URL in the `link` property as you are using for the `manage_app_url` property, ensure it handles the JWT properly, and when the page has verified the user and loaded, present the user with either:

  • Information about their account with your service (at a minimum) and in cases where there is no additional steps for them to complete
  • Configuration of the dashboard card itself (if needed/or available for customers to perform)
1,936 Views
Message 13 of 13
Report