Embedd App redirection with unified admin

[andrew4real]

Hey All,

I am building an app with Kyon147/laravel-shopify.

The only thing I am struggling with is when I add my app to a store which uses the unified admin. The problem is I can not redirect the app to the billing page because I get the following error:

Uncaught DOMException: Failed to set the 'href' property on 'Location': The current window does not have permission to navigate the target frame to....

Here's what I found so far:

• I am calling the /admin/recurring_application_charges.json endpoint to get the confirmation_url
• I get the same structure for unfified and earlier admins, meaning: SOMESHOP.myshopify.com/admin/charges/.......
• if I click on the link (from console) it works of course BUT:
• in my app, inside the ifrime I get the message above

Do I miss something and/or is there a Content-Security-Policy frame-ancestors I can add, or is there a way to get back the correct confirmation_url, because if I modify the confirmation_url to be the same structure as the unified admin it will work without any issue (meaning: admin.shopify.com/store/SOMESHOP/charges/.....). (Of course then the earlier admin redirection will stop working)...

Thanks in advance

[Henry_Tao]

Hi @andrew4real 

The /admin/charges/* url should work fine in unified-admin store. When redirect to the /admin/charges/* url, are you using App Bridge Remote Redirect action? You need to use this action to perform top frame redirect. 

[andrew4real]

Hey @Henry_Tao,

Many thanks for your help, I updated the code to use the App Bridge Remote Redirect action, but unfortunately still no luck. Now I can not see the error message but also the app doesn't redirect the merchant to the billing page.

The problem still only occurs if my shop has unified admin. Same code with earlier version of the admin redirects the merchant without any problem....

(redirectUrl structure is: https://{STORENAME}.myshopify.com/admin/charges/{ID}/{ID}/RecurringApplicationCharge/confirm_recurring_application_charge?signature={SIGNATURE})

var redirectUrl = "{!! $url !!}";

var AppBridge = window['app-bridge'];
var createApp = AppBridge.default;
var Redirect = AppBridge.actions.Redirect;
var app = createApp({
    apiKey: "{{ $apiKey }}",
    shopOrigin: "{{ $shopOrigin }}",
    host: "{{ $host }}",
});

var redirect = Redirect.create(app);

redirect.dispatch(Redirect.Action.REMOTE,redirectUrl);

Can you please help what am I missing? 

Thanks!

[Henry_Tao · Accepted solution]

Can you remove `shopOrigin` and try again because you already provide the `host` param?

[andrew4real]

Thanks @Henry_Tao now it works without any issue.