Skip to content
This repository has been archived by the owner on Nov 30, 2022. It is now read-only.

The app not works on https://admin.shopify.com #1248

Open
filipembcruz opened this issue Oct 28, 2022 · 22 comments
Open

The app not works on https://admin.shopify.com #1248

filipembcruz opened this issue Oct 28, 2022 · 22 comments

Comments

@filipembcruz
Copy link

Expected Behavior

That the app works on the new shopify admin route. https://admin.shopify.com/store/store-name/apps/plugin-url

Current Behavior

The app not works. My app doesn't not approved because this "issue". It Shows the message:

app is outdated
Shopify admin has migrated to a new URL, and this app is still pointing to the old URL. To use this app, relaunch it on the old URL.

image

Failure Information

The Shopify team tester sent me the feedback: Ensure your app is configured to handle billing decline charges properly. Merchants should be able to decline a billing charge without it cancelling a previously accepted plan. If the app requires a billing charge to be accepted, the billing modal must prompt the merchant again. See this screencast for additional details.

But actually, the issue is about the admin.shopify.com. Because after billing decline, the app redirect to this route.

Steps to Reproduce

1.To test against their newer rollout of admin.shopify.com URL format open a ticket on (https://help.shopify.com/pt-BR/support/login) with access request and your dev stores.
2. Access the plugin on store dashboard.

Context

  • Package Version: v17.3
  • Laravel Version: v8.54
  • PHP Version: v8.0.11

Failure Logs

Shopify team messages:

  • The full rollout of unified admin (admin.shopify.com) is not set to be completed until January 2023 which means some stores still have the old URL. I had my colleagues try but the same issue occurred for them, see this screencast for](https://shopify.click/18-39-92012-94052.webm)%C2%A0for) an example. It's vital that this issue is fixed to ensure that the app will work for all merchants.
  • I tried again but I'm still being redirected to a blank page after cancelling the charges. See this screencast with the console.

console logs:
7fc3d326933c5a69607cc791205f528d.jpg:1 GET https://cdn.shopify.com/proxy/1ffe9593b7171ce710654568e3c345245cc5f045e5bf7931a554b5713a145133/www.gravatar.com/avatar/7fc3d326933c5a69607cc791205f528d.jpg?s=128&d=404 404
Image (assíncrono)
xl @ vendors-node_modules_shopify_polaris_build_esnext_components_AppProvider_AppProvider_esnext-n-40f15c-ef761ddf01764843878b00626610e74c5aa1e8ecb0b0b0e714803e88ac608ef5.js:2
bl @ vendors-node_modules_shopify_polaris_build_esnext_components_AppProvider_AppProvider_esnext-n-40f15c-ef761ddf01764843878b00626610e74c5aa1e8ecb0b0b0e714803e88ac608ef5.js:2
vl @ vendors-node_modules_shopify_polaris_build_esnext_components_AppProvider_AppProvider_esnext-n-40f15c-ef761ddf01764843878b00626610e74c5aa1e8ecb0b0b0e714803e88ac608ef5.js:2
(anônimo) @ vendors-node_modules_shopify_polaris_build_esnext_components_AppProvider_AppProvider_esnext-n-40f15c-ef761ddf01764843878b00626610e74c5aa1e8ecb0b0b0e714803e88ac608ef5.js:2
_u @ vendors-node_modules_shopify_polaris_build_esnext_components_AppProvider_AppProvider_esnext-n-40f15c-ef761ddf01764843878b00626610e74c5aa1e8ecb0b0b0e714803e88ac608ef5.js:2
ou @ vendors-node_modules_shopify_polaris_build_esnext_components_AppProvider_AppProvider_esnext-n-40f15c-ef761ddf01764843878b00626610e74c5aa1e8ecb0b0b0e714803e88ac608ef5.js:2
w @ vendors-node_modules_shopify_polaris_build_esnext_components_AppProvider_AppProvider_esnext-n-40f15c-ef761ddf01764843878b00626610e74c5aa1e8ecb0b0b0e714803e88ac608ef5.js:2
j @ vendors-node_modules_shopify_polaris_build_esnext_components_AppProvider_AppProvider_esnext-n-40f15c-ef761ddf01764843878b00626610e74c5aa1e8ecb0b0b0e714803e88ac608ef5.js:2
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('') does not match the recipient window's origin ('').
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('') does not match the recipient window's origin ('').
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('') does not match the recipient window's origin ('').
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('') does not match the recipient window's origin ('').
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('') does not match the recipient window's origin ('').
vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://online-store-web.shopifyapps.com') does not match the recipient window's origin ('https://admin.shopify.com').
(anônimo) @ vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1
i.trace @ vendors-node_modules_bugsnag_js_browser_notifier_js-node_modules_shopify_monorail_lib_monorai-2198d9-0f4f8a247413848f43c8d00085b35d3bc1b5d835323d7f93950e3f0213e9af9f.js:2
vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://online-store-web.shopifyapps.com') does not match the recipient window's origin ('https://admin.shopify.com').
(anônimo) @ vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1
i.trace @ vendors-node_modules_bugsnag_js_browser_notifier_js-node_modules_shopify_monorail_lib_monorai-2198d9-0f4f8a247413848f43c8d00085b35d3bc1b5d835323d7f93950e3f0213e9af9f.js:2
vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://online-store-web.shopifyapps.com') does not match the recipient window's origin ('https://admin.shopify.com').
(anônimo) @ vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1
i.trace @ vendors-node_modules_bugsnag_js_browser_notifier_js-node_modules_shopify_monorail_lib_monorai-2198d9-0f4f8a247413848f43c8d00085b35d3bc1b5d835323d7f93950e3f0213e9af9f.js:2
vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://online-store-web.shopifyapps.com') does not match the recipient window's origin ('https://admin.shopify.com').
(anônimo) @ vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1
i.trace @ vendors-node_modules_bugsnag_js_browser_notifier_js-node_modules_shopify_monorail_lib_monorai-2198d9-0f4f8a247413848f43c8d00085b35d3bc1b5d835323d7f93950e3f0213e9af9f.js:2
vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://online-store-web.shopifyapps.com') does not match the recipient window's origin ('https://admin.shopify.com').
(anônimo) @ vendors-node_modules_shopify_app-bridge-host_index_js-9c5e5e9dfd7374201f14953e7771e801dcfb5062aff0f39488ffb721ca04d4ca.js:1
i.trace @ vendors-node_modules_bugsnag_js_browser_notifier_js-node_modules_shopify_monorail_lib_monorai-2198d9-0f4f8a247413848f43c8d00085b35d3bc1b5d835323d7f93950e3f0213e9af9f.js:2
@jhaineymilevis
Copy link

same problem, did you found any solution?

@nikwen nikwen mentioned this issue Nov 1, 2022
Open
@jhaineymilevis
Copy link

@nikwen no solutions in any post

@talktohenryj
Copy link

Yea, I thought this would be a fix for the new URLs but its not for some reason.

        $response->headers->set(
            'Content-Security-Policy',
            "frame-ancestors https://$domain https://admin.shopify.com"
        );

@apurbajnu
Copy link

This line of code works for me now. I have tried.

$shop = Auth::user()->name; return response() ->view('welcome') ->header( 'Content-Security-Policy', "frame-ancestors https://$shop https://admin.shopify.com");

@talktohenryj
Copy link

This line of code works for me now. I have tried.

` $shop = Auth::user()->name;

    return response()

    ->view('welcome')

    ->header( 'Content-Security-Policy',

        "frame-ancestors https://$shop https://admin.shopify.com");`

Thanks for this. I'm going to try this tomorrow.

Do you have a multi page app or single page?

@jhaineymilevis
Copy link

hi @talktohenryj where do you put this code? i used it on default route but dont work

@talktohenryj
Copy link

hi @talktohenryj where do you put this code? i used it on default route but dont work

No, I didn't @apurbajnu said he figured it out. I'm going to try his code tomorrow.

@apurbajnu
Copy link

@jhaineymilevis, you need to use this with a default route. This one is working on my side. Image

@CedricVleminckx
Copy link

The latest version of the package provides the Content security policy header on all routes, but this is not giving us this issue. Shopify says it is an issue with the app bridge configuration and the host parameter.

We also opened multiple support tickets to request a dev store on the new admin.shopify.com domain, but they say they can not help us. So there is no way for us to test this :(

This was the latest response from Shopify:
when we tried to open that last request to your /authenticate/token path in a new browser tab, it takes us to the legacy/store domain and They are getting a 500 error from your app if they don’t remove that host value attached to the target parameter, which is for redirection after authenticating.

@jhaineymilevis
Copy link

@jhaineymilevis, you need to use this with a default route. This one is working on my side. Image

yes i did it, but dont work
image

@CedricVleminckx
Copy link

@jhaineymilevis I tested this issue with a fresh laravel + osiset installation.

When you change the shopOrigin value to the new admin domain ex: admin.shopify.com/store/my-store in the AppBridge config in the vendor/osiset/laravel-shopify/src/resources/views/layouts/default.blade.php file, you will not get the error when the app was already authenticated.

This does not work when installing or reinstalling the app.

@ShirasuGyoza
Copy link

ShirasuGyoza commented Nov 3, 2022 •
edited
Loading

Hi, I have same problem and I also saw the discord of LaravelShopify, and Vicky pointed a solution maybe?
https://discord.com/channels/1027205492155617304/1027205493338427464/1034919275967819957
*this is invitation link to LaravelShopify discord: https://discord.gg/WRRqYgvg

Could any maintainer take a look at this? 😢

@abimwaqas
Copy link

Hi, I have same problem and I also saw the discord of LaravelShopify, and Vicky pointed a solution maybe? https://discord.com/channels/1027205492155617304/1027205493338427464/1034919275967819957 *this is invitation link to LaravelShopify discord: https://discord.gg/WRRqYgvg

Could any maintainer take a look at this? 😢

Yeah my Apps are working fine. Just do not remove shopOrigin from App Bridge initialization

@apurbajnu
Copy link

Hi, I have same problem and I also saw the discord of LaravelShopify, and Vicky pointed a solution maybe? https://discord.com/channels/1027205492155617304/1027205493338427464/1034919275967819957 *this is invitation link to LaravelShopify discord: https://discord.gg/WRRqYgvg
Could any maintainer take a look at this? 😢

Yeah my Apps are working fine. Just do not remove shopOrigin from App Bridge initialization

Thanks a lot. Finally it worked for me after adding shopOrigin.

@ShirasuGyoza
Copy link

@abimwaqas @apurbajnu hihi, I still facing this issue.. Could you tell me which code did you modify?

@talktohenryj
Copy link

talktohenryj commented Nov 9, 2022 via email

@apurbajnu
Copy link

Firstly I use react. So I added SHOPIFY_FRONTEND_ENGINE=REACT. Token router is not needed and config should look like this const config = { apiKey, host, shopOrigin:shopOrigin, forceRedirect: true };

@developertester786
Copy link

$shop = Auth::user()->name; return response() ->view('welcome') ->header( 'Content-Security-Policy', "frame-ancestors https://$shop https://admin.shopify.com");

I am facing the similar issue in laravel app. I tried to use this with a default route as @apurbajnu mentioned in routes/web.php file . But I am still getting This app is outdated and will no longer function after Wednesday, September 6, 2023. Contact the app's developer to update the app. message.

Anyone found the solution for this? Please help!

@abimwaqas
Copy link

@developertester786 frame-ancestors is for clickjacking. It has nothing to do with outdated app. Check shopify documentation for host parameter which shopify implemented. You need to pass host parameter with app-bridge initialization. In short remove shopOrigin from default.blade.php inside vendor folder. It might work.

@filipembcruz
Copy link
Author

I created a quick fix to approve my app (It has been approved). I change some files:

@ShirasuGyoza @developertester786 @jhaineymilevis

vendor\osiset\laravel-shopify\src\Traits\AuthController.php

    /**
     * Get session token for a shop.
     *
     * @return ViewView
     */
    public function token(Request $request)
    {
        $request->session()->reflash();
        $shopDomain = ShopDomain::fromRequest($request);
        $target = $request->query('target');
        $query = parse_url($target, PHP_URL_QUERY);
        $host = $request->query('host');

        $cleanTarget = $target;
        if ($query) {
            // remove "token" from the target's query string
            $params = Util::parseQueryString($query);
            $params['shop'] = $params['shop'] ?? $shopDomain->toNative() ?? '';
            $host = $params['host'];
            unset($params['token']);

            $cleanTarget = trim(explode('?', $target)[0] . '?' . http_build_query($params), '?');
        } else {
            $params = ['shop' => $shopDomain->toNative() ?? ''];
            $cleanTarget = trim(explode('?', $target)[0] . '?' . http_build_query($params), '?');
        }

        $shop_domain = $shopDomain->toNative();

        if (!$request->has('host') && empty($request->get('host'))) {
            if (!empty($host)) {
                $request->merge(['host' => $host]);

                $shop_domain = base64_decode($host);
            }
        }

        return View::make(
            'shopify-app::auth.token',
            [
                'shopDomain' => $shop_domain,
                'target' => $cleanTarget,
            ]
        );
    }

vendor\osiset\laravel-shopify\src\resources\views\layouts\default.blade.php

      var app = createApp({
        apiKey: "{{ \Osiset\ShopifyApp\Util::getShopifyConfig('api_key', base64_decode(\Request::get('host'))) }}",
        shopOrigin: "{{ base64_decode(\Request::get('host')) }}",
        host: "{{ \Request::get('host') }}",
        forceRedirect: true,
      });

vendor\osiset\laravel-shopify\src\Traits\BillingController.php

    /**
     * Processes the response from the customer.
     *
     * @param int $plan The plan's ID.
     * @param Request $request The HTTP request object.
     * @param ShopQuery $shopQuery The shop querier.
     * @param ActivatePlan $activatePlan The action for activating the plan for a shop.
     *
     * @return RedirectResponse
     */
    public function process(
        int          $plan,
        Request      $request,
        ShopQuery    $shopQuery,
        ActivatePlan $activatePlan
    ): RedirectResponse {
        // Get the shop
        $shop = $shopQuery->getByDomain(ShopDomain::fromNative($request->query('shop')));
        if (!$request->has('charge_id')) {
            return Redirect::route(Util::getShopifyConfig('route_names.home'), [
                'shop' => $shop->getDomain()->toNative(),
                'host' => base64_encode($shop->getDomain()->toNative())
            ]);
        }
        // Activate the plan and save
        $result = $activatePlan(
            $shop->getId(),
            PlanId::fromNative($plan),
            ChargeReference::fromNative((int) $request->query('charge_id'))
        );

        // Go to homepage of app
        return Redirect::route(Util::getShopifyConfig('route_names.home'), [
            'shop' => $shop->getDomain()->toNative(),
            'host' => base64_encode($shop->getDomain()->toNative())
        ])->with(
            $result ? 'success' : 'failure',
            'billing'
        );
    }

vendor\osiset\laravel-shopify\src\Http\Middleware\VerifyShopify.php

    /**
     * Undocumented function.
     *
     * @param Request $request The request object.
     * @param Closure $next    The next action.
     *
     * @throws SignatureVerificationException If HMAC verification fails.
     *
     * @return mixed
     */
    public function handle(Request $request, Closure $next)
    {
        // Verify the HMAC (if available)
        $hmacResult = $this->verifyHmac($request);

        // if ($hmacResult === false) {
        //     // Invalid HMAC
        //     throw new SignatureVerificationException('Unable to verify signature.');
        // }
        
       ...

@jhaineymilevis
Copy link

@deepahir do you have an example approach for react use with this library?

@kurakin-oleksandr
Copy link

@filipembcruz with your fix, after /api/authenticate/token, I'm redirected to /admin/admin/apps/API_KEY/api/authenticate/token. Which is not correct. Any help is appreciated

@kurakin-oleksandr kurakin-oleksandr mentioned this issue Dec 1, 2022
Merged
@CodaemonHaroon CodaemonHaroon mentioned this issue Aug 2, 2023
Closed
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
9 participants
@kurakin-oleksandr @jhaineymilevis @apurbajnu @ShirasuGyoza @filipembcruz @abimwaqas @CedricVleminckx @developertester786 @talktohenryj