Add host to query param and consume App Bridge v2

[henrytao-me]

What this PR does

Resolves https://github.com/Shopify/app-bridge/issues/2195

Reviewer's guide to testing

Things to focus on

Test environment:

• Ruby 3.0.3p157
• Rails 6.0.4.6
• Bundler 2.3.5
• Node v17.4.0

1. Clone this branch
2. In a terminal, use Shopify CLI to create and configure a new rails app: shopify app create rails
3. In an editor, open the Gemfile inside the newly created app. Modify the entry to shopify_app to point to this branch in your local environment so that it looks similar to this: gem 'shopify_app', path: '~/src/github.com/Shopify/shopify_app'
4. Run yarn add @rails/webpacker. For some reason, my environment doesn't have rails/webpacker by default
5. Run ./bin/webpack
6. Start your app server with shopify app serve, this will also output a ngrok url
7. You could add below code to app/assets/javascripts/shopify_app/redirect.js to see more output in console

    console.log('eeeeeeeee app-bridge v2', {
      href: location.href,
      'window.top === window.self': window.top === window.self,
    });

Test new installation flow

1. In a browser, follow the ngrok url to install the app on a test store. It should look similar to this: https://82f1-72-141-27-79.ngrok.io/login?shop=greats-clone.myshopify.com
2. Expect the app is installed as normal to the test shop

Test the login page on shop already has the app installed

1. Open the login url again
2. Expect the app is installed as normal to the test shop

Test re-authentication. Ex: cookies is expired

1. Open db/development.sqlite3 with https://kepler.shopifycloud.com/services/db-browser-for-sqlite
2. Find shop table and delete your test shop
3. Open the embedded app from the apps list in your test shop
4. Expect the app is opened as normal

Test AppStore installation flow

• Pressing Add app from the AppStore will redirect to partner application url with hmac, host, shop, and timestamp in the query params.
• To do that follow this docs to generate hmac https://shopify.dev/apps/auth/oauth/getting-started#process-through-the-hash-function.
• Make sure the embedded app is uninstalled from the store as well as in the app database
• Open the link with host param, verify that the app should be installed correctly. Ex: https://82f1-72-141-27-79.ngrok.io/?hmac=4c41ee2d9903526a21b12a810a6dc9d7251c21593d7fa9caa0121c38e9493ee2&host=Z3JlYXRzLWNsb25lLm15c2hvcGlmeS5jb20vYWRtaW4&shop=greats-clone.myshopify.com&timestamp=1646233590
• Open the link without the host param, verify that the app should be failed. Ex: https://82f1-72-141-27-79.ngrok.io/?hmac=72f8af9cca22696a3d67a80a9d991501d1c7dfc14423e59e88b824f1c11a5ac4&shop=greats-clone.myshopify.com&timestamp=1646233590

Test ITP

• Repeat the same tests above on Safari.
• Expect to see following screens in the re-authentication case.

Note: if you click Don't allow in the ITP screen, you will be redirected to the apps list. The ITP screen will show up again every time you open embedded apps.

Checklist

Before submitting the PR, please consider if any of the following are needed:

• Update CHANGELOG.md if the changes would impact users
• Update README.md, if appropriate.
• Update any relevant pages in /docs, if necessary
• For security fixes, the Disclosure Policy must be followed.

[SeanyB]

Given the issue we are experiencing with the @shopify/koa-shopify-auth using AB 2, can we test installing an app using this shopify_app gem using AB 2.0 before we officially release it?

[henrytao-me]

Tested this PR with and without host param

✅ Without host param, expect to see error
https://82f1-72-141-27-79.ngrok.io/?hmac=72f8af9cca22696a3d67a80a9d991501d1c7dfc14423e59e88b824f1c11a5ac4&shop=greats-clone.myshopify.com&timestamp=1646233590

✅ With host param, expect to install the app normally
https://82f1-72-141-27-79.ngrok.io/?hmac=4c41ee2d9903526a21b12a810a6dc9d7251c21593d7fa9caa0121c38e9493ee2&host=Z3JlYXRzLWNsb25lLm15c2hvcGlmeS5jb20vYWRtaW4&shop=greats-clone.myshopify.com&timestamp=1646233590

[hannachen]

Thank you for the fix...! 🎩 w/ Henry demoing the changes 👍

[SeanyB]

If it's tophatted, let's ship it! 🚀 😄