shopify_app 7.2.0 → 8.5.0

data/README.md

@@ -8,14 +8,16 @@ Shopify App
 
 Shopify Application Rails engine and generator
 
+#### NOTE : Versions 8.0.0 through 8.2.3 contained a CSRF vulnerability that was addressed in version 8.2.4. Please update to version 8.2.4 if you're using an old version.
 
 Table of Contents
 -----------------
 * [**Description**](#description)
 * [**Quickstart**](#quickstart)
 * [**Becoming a Shopify App Developer**](#becoming-a-shopify-app-developer)
+* [**App Tunneling**](#app-tunneling)
 * [**Installation**](#installation)
-  * [Rails 5](#rails-5)
+  * [Rails Compatibility](#rails-compatibility)
 * [**Generators**](#generators)
  * [Default Generator](#default-generator)
  * [Install Generator](#install-generator)
@@ -27,6 +29,7 @@ Table of Contents
 * [**Managing Api Keys**](#managing-api-keys)
 * [**WebhooksManager**](#webhooksmanager)
 * [**ScripttagsManager**](#scripttagsmanager)
+* [**AfterAuthenticate Job**](#afterauthenticate-job)
 * [**ShopifyApp::SessionRepository**](#shopifyappsessionrepository)
 * [**AuthenticatedController**](#authenticatedcontroller)
 * [**AppProxyVerification**](#appproxyverification)
@@ -34,7 +37,6 @@ Table of Contents
 * [**Troubleshooting**](#troubleshooting)
  * [Generator shopify_app:install hangs](#generator-shopify_appinstall-hangs)
 * [**Testing an embedded app outside the Shopify admin**](#testing-an-embedded-app-outside-the-shopify-admin)
-* [**App Tunneling**](#app-tunneling)
 * [**Questions or problems?**](#questions-or-problems)
 
 
@@ -52,30 +54,26 @@ Quickstart
 
 Check out this screencast on how to create and deploy a new Shopify App to Heroku in 5 minutes:
 
-[https://vimeo.com/130247240](https://vimeo.com/130247240)
+[https://www.youtube.com/watch?v=yGxeoAHlQOg](https://www.youtube.com/watch?v=yGxeoAHlQOg)
 
-Or if you prefer text instructions the steps in the video are written out [here](https://github.com/Shopify/shopify_app/blob/master/QUICKSTART.md)
+Or if you prefer text instructions the steps in the video are written out [here](https://github.com/Shopify/shopify_app/blob/master/docs/Quickstart.md)
 
-Becoming a Shopify App Developer
---------------------------------
-If you don't have a Shopify Partner account yet head over to http://shopify.com/partners to create one, you'll need it before you can start developing apps.
-
-Once you have a Partner account create a new application to get an Api key and other Api credentials. To create a development application set the Application Callback URL to
+App Tunneling
+-------------
 
-```
-http://localhost:3000/
-```
+Your local app needs to be accessible from the public Internet in order to install it on a shop, use the [App Proxy Controller](#app-proxy-controller-generator) or receive Webhooks. Use a tunneling service like [ngrok](https://ngrok.com/), [Forward](https://forwardhq.com/), [Beeceptor](https://beeceptor.com/), [Mockbin](http://mockbin.org/), [Hookbin](https://hookbin.com/), etc.
 
-and the `redirect_uri` to
+For example with [ngrok](https://ngrok.com/), run this command to set up proxying to Rails' default port:
 
+```sh
+ngrok http 3000
 ```
-http://localhost:3000/auth/shopify/callback
-```
-
-This way you'll be able to run the app on your local machine.
 
-Also note, ShopifyApp creates embedded apps by default, so remember to check `enabled` for the embedded settings.
+Becoming a Shopify App Developer
+--------------------------------
+If you don't have a Shopify Partner account yet head over to http://shopify.com/partners to create one, you'll need it before you can start developing apps.
 
+Once you have a Partner account create a new application to get an API key and other API credentials. To create a development application set the `App URL` to the URL provided by [your tunnel](#app-tunneling) or `http://localhost:3000/` if you are not embeddeding your app inside the admin or receiving webhooks and the `Whitelisted redirection URL(s)` to contain `<App URL>/auth/shopify/callback`. Ensure you are using `https://` URLs if you are using tunneling.
 
 Installation
 ------------
@@ -94,14 +92,9 @@ $ bundle install
 Now we are ready to run any of the shopify_app generators. The following section explains the generators and what they can do.
 
 
-#### Rails 5
+#### Rails Compatibility
 
-shopify_app is compatible with Rails 5 but since the latest ActiveResource release (4.1) is locked on Rails 4.x, you'll need to use the unreleased master version:
-
-```ruby
-gem 'shopify_app'
-gem 'activeresource', github: 'rails/activeresource'
-```
+The lastest version of shopify_app is compatible with Rails `>= 5`. Use version `<= v7.2.8` if you need to work with Rails 4.
 
 
 Generators
@@ -115,6 +108,7 @@ The default generator will run the `install`, `shop`, and `home_controller` gene
 $ rails generate shopify_app --api_key <your_api_key> --secret <your_app_secret>
 ```
 
+After running the generator, you will need to run `rake db:migrate` to add tables to your database. You can start your app with `bundle exec rails server` and install your app by visiting localhost.
 
 ### Install Generator
 
@@ -127,8 +121,10 @@ $ rails generate shopify_app:install --api_key <your_api_key> --secret <your_app
 ```
 
 Other options include:
-* `application_name` - the name of your app
-* `scope` - the Oauth access scope required for your app, eg 'read_products, write_orders'. For more information read the [docs](http://docs.shopify.com/api/tutorials/oauth)
+* `application_name` - the name of your app, it can be supplied with or without double-quotes if a whitespace is present. (e.g. `--application_name Example App` or `--application_name "Example App"`)
+* `scope` - the Oauth access scope required for your app, eg **read_products, write_orders**. *Multiple options* need to be delimited by a comma-space, and can be supplied with or without double-quotes
+(e.g. `--scope read_products, write_orders, write_products` or `--scope "read_products, write_orders, write_products"`)
+For more information, refer the [docs](http://docs.shopify.com/api/tutorials/oauth).
 * `embedded` - the default is to generate an [embedded app](http://docs.shopify.com/embedded-app-sdk), if you want a legacy non-embedded app then set this to false, `--embedded false`
 
 You can update any of these settings later on easily, the arguments are simply for convenience.
@@ -144,7 +140,7 @@ After running the `install` generator, you can start your app with `bundle exec
 $ rails generate shopify_app:shop_model
 ```
 
-The install generator doesn't create any database models for you and if you are starting a new app its quite likely that you will want one (most of our internally developed apps do!). This generator creates a simple shop model and a migration. It also creates a model called `SessionStorage` which interacts with `ShopifyApp::SessionRepository`. Check out the later section to learn more about `ShopifyApp::SessionRepository`
+The `install` generator doesn't create any database tables or models for you. If you are starting a new app its quite likely that you will want a shops table and model to store the tokens when your app is installed (most of our internally developed apps do!). This generator creates a shop model and a migration. This model includes the `ShopifyApp::SessionStorage` concern which adds two methods to make it compatible as a `SessionRepository`. After running this generator you'll notice the `session_repository` in your `config/initializers/shopify_app.rb` will be set to the `Shop` model. This means that internally ShopifyApp will try and load tokens from this model.
 
 *Note that you will need to run rake db:migrate after this generator*
 
@@ -174,7 +170,7 @@ The last group of generators are for your convenience if you want to start overr
 Mounting the Engine
 -------------------
 
-Mounting the Engine will provide the basic routes to authenticating a shop with your custom application. It will provide:
+Mounting the Engine will provide the basic routes to authenticating a shop with your application. By default it will provide:
 
 | Verb   | Route                         | Action                       |
 |--------|-------------------------------|------------------------------|
@@ -184,23 +180,58 @@ Mounting the Engine will provide the basic routes to authenticating a shop with
 |GET     |'/logout'                      |Logout                        |
 |POST    |'/webhooks/:type'              |Webhook Callback              |
 
+### Nested Routes
 
-The default routes of the Shopify rails engine, which is mounted to the root, can be altered to mount on a different route. The `config/routes.rb` can be modified to put these under a nested route (say `/app-name`) as:
+The engine may also be mounted at a nested route, for example:
 
 ```ruby
-mount ShopifyApp::Engine, at: '/app-name'
+mount ShopifyApp::Engine, at: '/nested'
 ```
 
-This will create the Shopify engine routes under the specified Subdirectory, as a result it will redirect new consumers to `/app-name/login` and following a similar format for the other engine routes.
+This will create the Shopify engine routes under the specified subpath. You'll also need to make some updates to your `shopify_app.rb` and `omniauth.rb` initializers. First update the shopify_app initializer to include a custom `root_url` e.g.:
 
-To use named routes with the engine so that it can route between the application and the engine's routes it should be prefixed with `main_app` or `shopify_app`.
+```ruby
+ShopifyApp.configure do |config|
+  config.root_url = '/nested'
+end
+```
+
+then update the omniauth initializer to include a custom `callback_path` e.g.:
 
 ```ruby
-main_app.login_path # For a named login route on the rails app.
+provider :shopify,
+  ShopifyApp.configuration.api_key,
+  ShopifyApp.configuration.secret,
+  scope: ShopifyApp.configuration.scope,
+  callback_path: '/nested/auth/shopify/callback'
+```
+
+### Custom login URL
 
-shopify_app.login_path # For the shopify app store login route.
+While you can customize the login view by creating a `/app/views/shopify_app/sessions/new.html.erb` file, you may also want to customize the URL entirely. You can modify your `shopify_app.rb` initializer to provide a custom `login_url` e.g.:
+
+```ruby
+ShopifyApp.configure do |config|
+  config.login_url = 'https://my.domain.com/nested/login'
+end
 ```
 
+Per User Authentication
+-----------------------
+To enable per user authentication you need to update the `omniauth.rb` initializer:
+
+```ruby
+provider :shopify,
+  ShopifyApp.configuration.api_key,
+  ShopifyApp.configuration.secret,
+  scope: ShopifyApp.configuration.scope,
+  per_user_permissions: true
+```
+
+The current Shopify user will be stored in the rails session at `session[:shopify_user]`
+
+This will change the type of token that Shopify returns and it will only be valid for a short time. Read more about `Online access` [here](https://help.shopify.com/api/getting-started/authentication/oauth). Note that this means you won't be able to use this token to respond to Webhooks.
+
 Managing Api Keys
 -----------------
 
@@ -211,7 +242,7 @@ ShopifyApp.configure do |config|
   config.application_name = 'Your app name' # Optional
   config.api_key = ENV['SHOPIFY_CLIENT_API_KEY']
   config.secret = ENV['SHOPIFY_CLIENT_API_SECRET']
-  config.scope = 'read_customers, read_orders, write_products'
+  config.scope = 'read_customers, write_products'
   config.embedded_app = true
 end
 ```
@@ -220,34 +251,59 @@ end
 WebhooksManager
 ---------------
 
-ShopifyApp can manage your app's webhooks for you by setting which webhooks you require in the initializer:
+ShopifyApp can manage your app's webhooks for you if you set which webhooks you require in the initializer:
 
 ```ruby
 ShopifyApp.configure do |config|
   config.webhooks = [
-    {topic: 'carts/update', address: 'example-app.com/webhooks/carts_update'}
+    {topic: 'carts/update', address: 'https://example-app.com/webhooks/carts_update'}
   ]
 end
 ```
 
 When the oauth callback is completed successfully ShopifyApp will queue a background job which will ensure all the specified webhooks exist for that shop. Because this runs on every oauth callback it means your app will always have the webhooks it needs even if the user uninstalls and re-installs the app.
 
-ShopifyApp also provides a WebhooksController that receives webhooks and queues a job based on the webhook url. For example if you register the webhook from above then all you need to do is create a job called `CartsUpdateJob`. The job will be queued with 2 params `shop_domain` and `webhook` which is the webhook body.
+ShopifyApp also provides a WebhooksController that receives webhooks and queues a job based on the received topic. For example if you register the webhook from above then all you need to do is create a job called `CartsUpdateJob`. The job will be queued with 2 params: `shop_domain` and `webhook` (which is the webhook body).
+
+If you would like to namespace your jobs you may set `webhook_jobs_namespace` in the config. For example if your app handles webhooks from other ecommerce applications as well, and you want Shopify cart update webhooks to be processed by a job living in `jobs/shopify/webhooks/carts_update_job.rb` rather than `jobs/carts_update_job.rb`):
+
+```ruby
+ShopifyApp.configure do |config|
+  config.webhook_jobs_namespace = 'shopify/webhooks'
+end
+```
+
+If you are only interested in particular fields, you can optionally filter the data sent by Shopify by specifying the `fields` parameter in `config/webhooks`. Note that you will still receive a webhook request from Shopify every time the resource is updated, but only the specified fields will be sent.
+
+```ruby
+ShopifyApp.configure do |config|
+  config.webhooks = [
+    {topic: 'products/update', address: 'https://example-app.com/webhooks/products_update', fields: ['title', 'vendor']}
+  ]
+end
+```
 
-If you'd rather implement your own controller then you'll want to use the WebhookVerfication module to verify your webhooks:
+If you'd rather implement your own controller then you'll want to use the WebhookVerfication module to verify your webhooks, example:
 
 ```ruby
 class CustomWebhooksController < ApplicationController
   include ShopifyApp::WebhookVerification
 
   def carts_update
-    SomeJob.perform_later(shopify_domain: shop_domain, webhook: params)
-    head :ok
+    params.permit!
+    SomeJob.perform_later(shop_domain: shop_domain, webhook: webhook_params.to_h)
+    head :no_content
+  end
+
+  private
+
+  def webhook_params
+    params.except(:controller, :action, :type)
   end
 end
 ```
 
-The module skips the `verify_authenticity_token` before_action and adds an action to verify that the webhook came from Shopify.
+The module skips the `verify_authenticity_token` before_action and adds an action to verify that the webhook came from Shopify. You can now add a post route to your application pointing to the controller and action to accept the webhook data from Shopify.
 
 The WebhooksManager uses ActiveJob, if ActiveJob is not configured then by default Rails will run the jobs inline. However it is highly recommended to configure a proper background processing queue like sidekiq or resque in production.
 
@@ -267,24 +323,84 @@ As with webhooks, ShopifyApp can manage your app's scripttags for you by setting
 ```ruby
 ShopifyApp.configure do |config|
   config.scripttags = [
-    {event:'onload', src: 'https://my-shopifyapp.herokuapp.com/fancy.js'}
+    {event:'onload', src: 'https://my-shopifyapp.herokuapp.com/fancy.js'},
+    {event:'onload', src: ->(domain) { dynamic_tag_url(domain) } }
   ]
 end
 ```
 
+You also need to have write_script_tags permission in the config scope in order to add script tags automatically:
+
+```ruby
+ config.scope = '... , write_script_tags'
+```
+
 Scripttags are created in the same way as the Webhooks, with a background job which will create the required scripttags.
 
+If `src` responds to `call` its return value will be used as the scripttag's source. It will be called on scripttag creation and deletion.
+
+AfterAuthenticate Job
+---------------------
+
+If your app needs to perform specific actions after it is installed ShopifyApp can queue or run a job of your choosing (note that we already provide support for automatically creating Webhooks and Scripttags). To configure the after authenticate job update your initializer as follows:
+
+```ruby
+ShopifyApp.configure do |config|
+  config.after_authenticate_job = { job: Shopify::AfterAuthenticateJob }
+end
+```
+
+If you need the job to run synchronously add the `inline` flag:
+
+```ruby
+ShopifyApp.configure do |config|
+  config.after_authenticate_job = { job: Shopify::AfterAuthenticateJob, inline: true }
+end
+```
+
+We've also provided a generator which creates a skeleton job and updates the initializer for you:
+
+```
+bin/rails g shopify_app:add_after_authenticate_job
+```
+
+RotateShopifyTokenJob
+---------------------
+
+If your Shopify secret key is leaked, you can use the RotateShopifyTokenJob to perform [API Credential Rotation](https://help.shopify.com/en/api/getting-started/authentication/oauth/api-credential-rotation).
+
+Before running the job, you'll need to generate a new secret key from your Shopify Partner dashboard, and update the `/config/initializers/shopify_app.rb` to hold your new and old secret keys:
+
+```ruby
+config.secret = Rails.application.secrets.shopify_secret
+config.old_secret = Rails.application.secrets.old_shopify_secret
+```
+
+We've provided a generator which creates the job and an example rake task:
+
+```sh
+bin/rails g shopify_app:rotate_shopify_token_job
+```
+
+The generated rake task will be found at `lib/tasks/shopify/rotate_shopify_token.rake` and is provided strictly for example purposes. It might not work with your application out of the box without some configuration.
+
+⚠️ Note: if you are updating `shopify_app` from a version prior to 8.4.2 (and do not wish to run the default/install generator again), you will need to add [the following line](https://github.com/Shopify/shopify_app/blob/4f7e6cca2a472d8f7af44b938bd0fcafe4d8e88a/lib/generators/shopify_app/install/templates/shopify_provider.rb#L18) to `config/intializers/omniauth.rb`:
+
+```ruby
+strategy.options[:old_client_secret] = ShopifyApp.configuration.old_secret
+```
+
 ShopifyApp::SessionRepository
 -----------------------------
 
-`ShopifyApp::SessionRepository` allows you as a developer to define how your sessions are retrieved and stored for a shop. The `SessionRepository` is configured using the `config/initializers/shopify_session_repository.rb` file and can be set to any object that implements `self.store(shopify_session)` which stores the session and returns a unique identifier and `self.retrieve(id)` which returns a `ShopifyAPI::Session` for the passed id. See either the `InMemorySessionStore` or the `SessionStorage` module for examples.
+`ShopifyApp::SessionRepository` allows you as a developer to define how your sessions are retrieved and stored for shops. The `SessionRepository` is configured in the `config/initializers/shopify_app.rb` file and can be set to any object that implements `self.store(shopify_session)` which stores the session and returns a unique identifier and `self.retrieve(id)` which returns a `ShopifyAPI::Session` for the passed id. See either the `ShopifyApp::InMemorySessionStore` class or the `ShopifyApp::SessionStorage` concern for examples.
 
-If you only run the install generator then by default you will have an in memory store but it **won't work** on multi-server environments including Heroku. If you ran all the generators including the shop_model generator then the Shop model itself will be the `SessionRepository`. If you look at the implementation of the generated shop model you'll see that this gem provides an activerecord mixin for the `SessionRepository`. You can use this mixin on any model that responds to `shopify_domain` and `shopify_token`.
+If you only run the install generator then by default you will have an in memory store but it **won't work** on multi-server environments including Heroku. If you ran all the generators including the shop_model generator then the `Shop` model itself will be the `SessionRepository`. If you look at the implementation of the generated shop model you'll see that this gem provides a concern for the `SessionRepository`. You can use this concern on any model that responds to `shopify_domain` and `shopify_token`.
 
 AuthenticatedController
 -----------------------
 
-The engine includes a controller called `ShopifyApp::AuthenticatedController` which inherits from `ApplicationController`. It adds some before_filters which ensure the user is authenticated and will redirect to the login page if not. It is best practice to have all controllers that belong to the Shopify part of your app inherit from this controller. The HomeController that is generated already inherits from AuthenticatedController.
+The engine includes a controller called `ShopifyApp::AuthenticatedController` which inherits from `ActionController::Base`. It adds some before_filters which ensure the user is authenticated and will redirect to the login page if not. It is best practice to have all controllers that belong to the Shopify part of your app inherit from this controller. The HomeController that is generated already inherits from AuthenticatedController.
 
 AppProxyVerification
 --------------------
@@ -310,36 +426,19 @@ Create your app proxy url in the [Shopify Partners' Dashboard](https://app.shopi
 Troubleshooting
 ---------------
 
-### Generator shopify_app:install hangs
-
-Rails uses spring by default to speed up development. To run the generator, spring has to be stopped:
-
-```sh
-$ bundle exec spring stop
-```
-
-Run shopify_app generator again.
+see [TROUBLESHOOTING.md](https://github.com/Shopify/shopify_app/blob/master/docs/Troubleshooting.md)
 
 Testing an embedded app outside the Shopify admin
 -------------------------------------------------
 
-By default, loading your embedded app will redirect to the Shopify admin, with the app view loaded in an `iframe`. If you need to load your app outside of the Shopify admin (e.g., for performance testing), you can change `forceRedirect: false` to `true` in `ShopifyApp.init` block in the `embedded_app` view. To keep the redirect on in production but off in your `development` and `test` environments, you can use:
+By default, loading your embedded app will redirect to the Shopify admin, with the app view loaded in an `iframe`. If you need to load your app outside of the Shopify admin (e.g., for performance testing), you can change `forceRedirect: true` to `false` in `ShopifyApp.init` block in the `embedded_app` view. To keep the redirect on in production but off in your `development` and `test` environments, you can use:
 
 ```javascript
 forceRedirect: <%= Rails.env.development? || Rails.env.test? ? 'false' : 'true' %>
 ```
 
-App Tunneling
--------------
-
-For certain features like Application Proxy or Webhooks to receive requests from Shopify, your app needs to be on a publicly visible URL. This can be a hurdle during development or testing on a local machine. Fortunately, this can be overcome by employing a tunneling service like [Forward](https://forwardhq.com/), [RequestBin](requestb.in/), [ngrok](https://ngrok.com/) etc. These tools allow you to create a secure tunnel from the public Internet to your local machine.
-
-Tunneling is also useful for working the the embedded app sdk to solve mixed content issues since most tunnles provide ssl.
-
 Questions or problems?
 ----------------------
-http://api.shopify.com <= Read up on the possible API calls!
-
-http://ecommerce.shopify.com/c/shopify-apis-and-technology <= Ask questions!
 
-http://docs.shopify.com/api/the-basics/getting-started <= Read the docs!
+- [Ask questions!](https://ecommerce.shopify.com/c/shopify-apis-and-technology)
+- [Read the docs!](https://help.shopify.com/api/guides)

data/app/assets/images/storage_access.svg

@@ -0,0 +1,2 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg enable-background="new 0 0 1920 1080" version="1.1" viewBox="0 0 1920 1080" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><polygon points="1345 330.75 1345 437.24 1224.7 437.24 1224.7 676.56 873.52 676.56 874.04 643.85 1203.2 330.23" fill="#fff"/><path d="m1095.7 677.54c-18.553 0.074-37.107 0.163-55.66 0.126-18.553 0.056-37.107-0.188-55.66-0.233l-13.915-0.063-13.915 0.044-27.83 0.094c-18.553 0.128-37.107-5e-3 -55.66-0.056l-1.266-3e-3 3e-3 -1.259 0.047-22.532-0.093-22.532-0.068-11.266 6e-3 -11.266 0.019-22.532h2.703l0.111 22.532c0.053 7.511 0.06 15.022 0.038 22.532l-0.094 45.065-1.407-1.407c18.553 7e-3 37.107-0.041 55.66 0.086l27.83 0.131 13.915 0.066 13.915-0.028c18.553-8e-3 37.107-0.151 55.66-0.019 18.553 0.099 37.107 0.049 55.66-0.181v2.701z" fill="#0C1238"/><path d="m1225 677.54c-9.24 0.123-18.48 0.187-27.72 0.077l-13.86-0.213c-2.31-0.051-4.62-0.023-6.93 1e-3l-6.93 0.062c-9.24 0.156-18.48 0.076-27.72-0.054-2.31-0.034-4.62 1e-3 -6.93 2e-3l-6.93 0.121c-4.62 0.062-9.24-2e-3 -13.86 3e-3v-2.703c4.62-0.048 9.24-0.165 13.86-0.157l6.93 0.025c2.31 0.027 4.62 0.088 6.93 0.076 9.24-0.024 18.48-0.031 27.72 0.145 4.62 0.038 9.24 0.163 13.86 0.126l13.86-0.081c4.62-0.04 9.24 0.088 13.86 0.101 2.31 0.047 4.62-0.048 6.93-0.065 2.31-0.026 4.62-0.07 6.93-0.169v2.703z" fill="#0C1238"/><path d="m871.68 561.78l-0.13-115.72 0.07-115.72 1e-3 -1.414 1.411 3e-3 117.9 0.228 117.9-0.138 58.951-0.061 58.951 0.072 117.9 0.09 1.218 1e-3 4e-3 1.221 0.156 53.426-0.026 53.426h-2.703l-0.154-53.426 0.04-53.426 1.466 1.466-235.8-0.148-117.9-0.193-117.9 0.087 1.212-1.212-0.084 115.72c-0.058 19.286 0.032 38.573 0.074 57.859l0.15 57.859h-2.705z" fill="#0C1238"/><g fill="#E6E8F0"><circle cx="891.37" cy="344.49" r="6.812"/><circle cx="912.86" cy="345.01" r="6.812"/><circle cx="934.34" cy="345.54" r="6.812"/><path d="m1202.7 352.87h-186.64c-0.552 0-1-0.448-1-1v-11.624c0-0.552 0.448-1 1-1h186.64c0.552 0 1 0.448 1 1v11.624c0 0.552-0.448 1-1 1z" stroke="#F0F3F5" stroke-miterlimit="10"/><rect x="1288.6" y="339.25" width="17.816" height="13.624"/><path d="m1327.4 352.87h-15.816c-0.552 0-1-0.448-1-1v-11.624c0-0.552 0.448-1 1-1h15.816c0.552 0 1 0.448 1 1v11.624c0 0.552-0.447 1-1 1z"/></g><g fill="none" stroke="#8891EA" stroke-miterlimit="10" stroke-width="8"><path d="m1098.3 576.8c-24.295 0-43.99-19.695-43.99-43.99v-29.485c0-2.209 1.791-4 4-4h79.98c2.209 0 4 1.791 4 4v29.485c0 24.295-19.695 43.99-43.99 43.99z"/><path d="m1066 499.33v-12.41c0-17.804 14.433-32.237 32.237-32.237s32.237 14.433 32.237 32.237v12.41"/></g><circle cx="1098.3" cy="529.08" r="8.966" fill="#8891EA"/><line x1="1098.3" x2="1098.3" y1="529.08" y2="546.68" fill="#fff" stroke="#8891EA" stroke-linecap="round" stroke-miterlimit="10" stroke-width="8"/><polygon points="1416.1 676.19 1358 748.57 1416.1 749.77 1225 749.77 1225 659.42 1416.1 437.19" fill="#fff"/><path d="m1415.2 497.07l-0.12-59.83 1.472 1.472-95.89-0.052-47.945-0.135c-15.982-0.023-31.963-0.14-47.945-0.085l1.2-1.2 0.139 78.077c0.086 26.026 4e-3 52.052-0.039 78.077l-0.076 78.077c0.056 26.026 0.201 52.052 0.145 78.077l-1.368-1.368 38.25 0.017v2.703l-38.251 0.1-1.444 4e-3 -6e-3 -1.454c-0.102-26.026-0.045-52.052-0.026-78.077l0.068-78.077 0.067-78.077 0.191-78.077 3e-3 -1.15h1.147l47.945-0.013 47.945-0.051 95.89 0.089 1.121 1e-3 4e-3 1.125 0.226 59.83h-2.703z" fill="#0C1238"/><path d="m1417.9 518.33c0.051 19.268 0.165 38.536 0.128 57.804l-0.022 28.902-0.134 28.902-0.134 28.902 0.061 28.902 0.087 28.902 0.046 14.451-0.034 14.451-3e-3 1.353-1.347-3e-3c-22.64-0.042-45.28-0.192-67.919-0.118l-33.96 0.144-33.96-0.025v-2.703l33.96-0.143 33.96 0.01c11.32 0.049 22.64 0.1 33.96 0.078l33.96-2e-3 -1.409 1.409c-0.03-19.268 0.125-38.536 0.178-57.804l0.103-28.902-0.051-28.902-0.051-28.902 0.081-28.902c0.128-19.268-0.116-38.536-0.204-57.804h2.704z" fill="#0C1238"/><path d="m1400.3 458.72h-160.44c-0.552 0-1-0.448-1-1v-11.624c0-0.552 0.448-1 1-1h160.44c0.552 0 1 0.448 1 1v11.624c0 0.552-0.448 1-1 1z" fill="#E6E8F0" stroke="#F0F3F5" stroke-miterlimit="10"/><path d="m1238.5 467.44c13.587-0.084 27.173-0.121 40.76-0.055l20.38 0.141c6.793 0.061 13.587-0.03 20.38-0.038 13.587-0.116 27.173-0.022 40.76 0.038 6.793 0.029 13.587-0.022 20.38-0.082 6.793-0.046 13.587 0 20.38-5e-3v1.802c-13.587 0.111-27.173 0.144-40.76 0.036-13.587 2e-3 -27.173 0.027-40.76-0.09-6.793-0.025-13.587-0.117-20.38-0.088l-20.38 0.054c-6.793 0.022-13.587-0.048-20.38-0.067-6.793-7e-3 -13.587 0.107-20.38 0.154v-1.8z" fill="#E6E8F0"/><path d="m891.69 362.56c36.392-0.084 72.784-0.121 109.18-0.055l54.588 0.141c18.196 0.062 36.392-0.034 54.588-0.043l218.35-0.043v1.802c-36.392 0.111-72.784 0.144-109.18 0.036l-109.18-0.09-54.588-0.088-54.588 0.054-54.588-0.067-54.588 0.154v-1.801z" fill="#E6E8F0"/><g fill="none" stroke="#8891EA" stroke-miterlimit="10" stroke-width="6"><path d="m1320.6 638.41c-17.878 0-32.371-14.493-32.371-32.371v-21.697c0-1.626 1.318-2.943 2.943-2.943h58.854c1.626 0 2.943 1.318 2.943 2.943v21.697c1e-3 17.878-14.491 32.371-32.369 32.371z"/><path d="m1296.9 581.4v-9.132c0-13.101 10.62-23.722 23.722-23.722 13.101 0 23.722 10.621 23.722 23.722v9.132"/></g><circle cx="1320.6" cy="604.5" r="5.88" fill="#8891EA"/><line x1="1320.6" x2="1320.6" y1="603.3" y2="616.25" fill="#fff" stroke="#8891EA" stroke-linecap="round" stroke-miterlimit="10" stroke-width="6"/><path d="m966.35 697.36l-0.029 13.745c-0.01 1.145 0.011 2.291-0.023 3.436l-0.124 3.436c-0.103 2.291 0.022 4.582 0.121 6.872l-1.912-1.912c10.168-0.857 20.337-0.478 30.505-0.36 5.084 0.104 10.168 0.133 15.252 0.178 5.084 6e-3 10.168 0.199 15.252 0.287l7.626 0.168 7.626 0.264c2.542 0.09 5.084 0.032 7.626 0.023 2.542-0.035 5.084 0.047 7.626 0.065 10.168 0.377 20.337-0.052 30.505 0.201l7.626 0.04c2.542 6e-3 5.084-0.283 7.626-0.394 5.084-0.14 10.168-0.184 15.252-0.268 5.084-0.072 10.168-0.071 15.252-0.204 2.542-0.07 5.084-0.088 7.626-0.118 2.542-0.019 5.084 0.1 7.626 0.143 10.168 0.462 20.337-0.303 30.505 0.192 2.542 0.145 5.084 0.163 7.626 0.139 2.542 0 5.084-0.038 7.626-0.099l15.252-0.314v3.936l-15.252 0.106c-5.084 0.024-10.168 0.012-15.252 0.3-10.168 0.483-20.337-0.281-30.505-0.213-20.337-1.165-40.673 0.704-61.01-0.137-2.542 0.117-5.084 0.33-7.626 0.382-2.542 0.092-5.084 0.173-7.626-0.018s-5.084-0.219-7.626-0.183c-2.542-2e-3 -5.084 0.099-7.626 0.081-2.542-0.027-5.084 0.026-7.626-0.066-1.271-0.039-2.542-0.079-3.813-0.09-1.271-0.022-2.542-0.05-3.813 0.018-2.542 0.097-5.084 0.355-7.626 0.327-1.271-0.037-2.542-0.06-3.813-0.12l-3.813-0.238c-2.542-0.162-5.084-0.324-7.626-0.268-2.542 0.109-5.084-0.092-7.626-0.222-2.542-0.112-5.084-0.326-7.626-0.371-2.542-0.094-5.084-0.061-7.626-0.038-5.084 0.101-10.168 0.266-15.252 0.414-2.542 0.071-5.084 0.122-7.626 0.123l-7.626-0.19-1.598-0.04 0.032-1.527c0.047-2.291 0.153-4.582 9e-3 -6.872l-0.162-3.436c-0.047-1.145-0.04-2.291-0.062-3.436l-0.186-13.745h3.934z" fill="#E6E8F0"/><path d="m1434.8 722.88l16.096 0.019 8.048 0.01c2.683 0.018 5.365-0.029 8.048 0.05l-1.89 1.89c0.07-3.44 0.218-6.88 0.086-10.32l-0.312-10.32c-0.261-6.88-0.364-13.76-0.339-20.639l0.314-41.279c0.052-6.88 0.033-13.76 0.144-20.639l0.275-20.639c0.057-6.88 0.274-13.76 0.375-20.639 0.058-6.88-0.069-13.76 0.033-20.639l0.226-20.639-0.071-10.32-0.046-5.16 0.032-5.16 0.11-20.639c0.012-3.44 0.045-6.88-0.068-10.32-0.149-3.44-0.261-6.88-0.361-10.32l-0.328-41.279c-0.074-6.88-0.188-13.76-0.211-20.639 0.028-6.88 0.177-13.76 0.261-20.639l1.77 1.77c-4.37-0.095-8.74 1e-3 -13.111 1e-3l-13.111 0.063c-4.37 1e-3 -8.74 0.084-13.111 0.016l-13.111-0.231c-4.37-0.118-8.74-0.058-13.111-0.055-4.37-4e-3 -8.74 0.077-13.111 0.113l-26.221 0.29v-3.936l26.221-0.107 13.111-0.052c4.37-0.026 8.74 2e-3 13.111-0.14l13.111-0.262c4.37-0.066 8.74 0.04 13.111 0.051l26.221 0.283 2.211 0.024-0.016 2.172c-0.049 6.88-0.045 13.76-0.139 20.639-0.152 6.88-0.325 13.76-0.304 20.639l0.499 41.279c-0.024 1.72-0.037 3.44-0.138 5.16l-0.297 5.16c-0.137 3.44-0.045 6.88 0.01 10.32 0.12 6.88 0.479 13.76 0.59 20.639 0.273 6.88-0.127 13.76-0.227 20.639-0.014 6.88 0.146 13.76 0.091 20.639 0.051 6.88-0.202 13.76-0.162 20.639 0.04 3.44 0.226 6.88 0.324 10.32 0.061 3.44 4e-3 6.88-0.082 10.32l-0.356 10.32c-0.047 1.72-0.141 3.44-0.149 5.16l2e-3 5.16c-0.012 1.72 0.032 3.44-0.026 5.16l-0.164 5.16-0.335 10.32c-0.306 13.76 0.065 27.519 0.289 41.279 0.074 3.44 0.091 6.88 0.13 10.32 0.059 3.44-0.071 6.88-0.098 10.32l-0.153 10.32c-0.053 1.72 0.021 3.44 0.049 5.16l0.139 5.16 0.044 1.627-1.73 0.06c-2.683 0.093-5.365 0.065-8.048 0.1l-8.048 0.061-16.096 0.121v-3.941z" fill="#E6E8F0"/></svg>

data/app/assets/javascripts/shopify_app/enable_cookies.js

@@ -0,0 +1,3 @@
+//= require ./itp_helper.js
+//= require ./storage_access.js
+//= require ./partition_cookies.js

data/app/assets/javascripts/shopify_app/itp_helper.js

@@ -0,0 +1,40 @@
+(function() {
+  function ITPHelper(opts) {
+    this.itpContent = document.getElementById('TopLevelInteractionContent');
+    this.itpAction = document.getElementById('TopLevelInteractionButton');
+    this.redirectUrl = opts.redirectUrl;
+  }
+  
+  ITPHelper.prototype.redirect = function() {
+    sessionStorage.setItem('shopify.top_level_interaction', true);
+    window.location.href = this.redirectUrl;
+  }
+  
+  ITPHelper.prototype.userAgentIsAffected = function() {
+    return Boolean(document.hasStorageAccess);
+  }
+  
+  ITPHelper.prototype.canPartitionCookies = function() {
+    var versionRegEx = /Version\/12\.0\.?\d? Safari/;
+    return versionRegEx.test(navigator.userAgent);
+  }
+  
+  ITPHelper.prototype.setUpContent = function(onClick) {
+    this.itpContent.style.display = 'block';
+    this.itpAction.addEventListener('click', this.redirect.bind(this));
+  }
+  
+  ITPHelper.prototype.execute = function() {
+    if (!this.itpContent) {
+      return;
+    }
+  
+    if (this.userAgentIsAffected()) {
+      this.setUpContent();
+    } else {
+      this.redirect();
+    }
+  }
+
+  this.ITPHelper = ITPHelper;
+})(window);

data/app/assets/javascripts/shopify_app/partition_cookies.js

@@ -0,0 +1,7 @@
+(function() {
+  document.addEventListener("DOMContentLoaded", function() {
+    var storageAccessHelper = new StorageAccessHelper();
+    storageAccessHelper.execute();
+  });
+})();
+

data/app/assets/javascripts/shopify_app/redirect.js

@@ -0,0 +1,33 @@
+(function() {
+  function redirect() {
+    var redirectTargetElement = document.getElementById("redirection-target");
+
+    if (!redirectTargetElement) {
+      return;
+    }
+
+    var targetInfo = JSON.parse(redirectTargetElement.dataset.target)
+
+    if (window.top == window.self) {
+      // If the current window is the 'parent', change the URL by setting location.href
+      window.top.location.href = targetInfo.url;
+    } else {
+      // If the current window is the 'child', change the parent's URL with postMessage
+      normalizedLink = document.createElement('a');
+      normalizedLink.href = targetInfo.url;
+
+      data = JSON.stringify({
+        message: 'Shopify.API.remoteRedirect',
+        data: {location: normalizedLink.href}
+      });
+      window.parent.postMessage(data, targetInfo.myshopifyUrl);
+    }
+  }
+
+  document.addEventListener("DOMContentLoaded", redirect);
+
+  // In the turbolinks context, neither DOMContentLoaded nor turbolinks:load
+  // consistently fires. This ensures that we at least attempt to fire in the
+  // turbolinks situation as well.
+  redirect();
+})();

data/app/assets/javascripts/shopify_app/request_storage_access.js

@@ -0,0 +1,3 @@
+//= require ./itp_helper.js
+//= require ./storage_access.js
+//= require ./storage_access_redirect.js

data/app/assets/javascripts/shopify_app/storage_access.js

@@ -0,0 +1,121 @@
+(function() {
+  var ACCESS_GRANTED_STATUS = 'storage_access_granted';
+  var ACCESS_DENIED_STATUS = 'storage_access_denied';
+
+  function StorageAccessHelper(redirectData) {
+    this.redirectData = redirectData;
+  }
+
+  StorageAccessHelper.prototype.setNormalizedLink = function(storageAccessStatus) {
+    return storageAccessStatus === ACCESS_GRANTED_STATUS ? this.redirectData.hasStorageAccessUrl : this.redirectData.doesNotHaveStorageAccessUrl;
+  }
+
+  StorageAccessHelper.prototype.redirectToAppTLD = function(storageAccessStatus) {
+    var normalizedLink = document.createElement('a');
+
+    normalizedLink.href = this.setNormalizedLink(storageAccessStatus);
+
+    data = JSON.stringify({
+      message: 'Shopify.API.remoteRedirect',
+      data: {
+        location: normalizedLink.href,
+      }
+    });
+    window.parent.postMessage(data, this.redirectData.myshopifyUrl);
+  }
+
+  StorageAccessHelper.prototype.redirectToAppsIndex = function() {
+    window.parent.location.href = this.redirectData.myshopifyUrl + '/admin/apps';
+  }
+
+  StorageAccessHelper.prototype.redirectToAppHome = function() {
+    window.location.href = this.redirectData.appHomeUrl;
+  }
+
+  StorageAccessHelper.prototype.grantedStorageAccess = function() {
+    try {
+      sessionStorage.setItem('shopify.granted_storage_access', true);
+      document.cookie = 'shopify.granted_storage_access=true';
+      this.redirectToAppHome();
+    } catch (error) {
+      console.warn('Third party cookies may be blocked.', error);
+      this.redirectToAppTLD(ACCESS_DENIED_STATUS);
+    }
+  }
+
+  StorageAccessHelper.prototype.handleRequestStorageAccess = function() {
+    return document.requestStorageAccess().then(this.grantedStorageAccess.bind(this), this.redirectToAppsIndex.bind(this, ACCESS_DENIED_STATUS));
+  }
+
+  StorageAccessHelper.prototype.setupRequestStorageAccess = function() {
+    var requestContent = document.getElementById('RequestStorageAccess');
+    var requestButton = document.getElementById('TriggerAllowCookiesPrompt');
+
+    requestButton.addEventListener('click', this.handleRequestStorageAccess.bind(this));
+    requestContent.style.display = 'block';
+  }
+
+  StorageAccessHelper.prototype.handleHasStorageAccess = function() {
+    if (sessionStorage.getItem('shopify.granted_storage_access')) {
+      // If app was classified by ITP and used Storage Access API to acquire access
+      this.redirectToAppHome();
+    } else {
+      // If app has not been classified by ITP and still has storage access
+      this.redirectToAppTLD(ACCESS_GRANTED_STATUS);
+    }
+  }
+
+  StorageAccessHelper.prototype.handleGetStorageAccess = function() {
+    if (sessionStorage.getItem('shopify.top_level_interaction')) {
+      // If merchant has been redirected to interact with TLD (requirement for prompting request to gain storage access)
+      this.setupRequestStorageAccess();
+    } else {
+      // If merchant has not been redirected to interact with TLD (requirement for prompting request to gain storage access)
+      this.redirectToAppTLD(ACCESS_DENIED_STATUS);
+    }
+  }
+
+  StorageAccessHelper.prototype.manageStorageAccess = function() {
+    return document.hasStorageAccess().then(function(hasAccess) {
+      if (hasAccess) {
+        this.handleHasStorageAccess();
+      } else {
+        this.handleGetStorageAccess();
+      }
+    }.bind(this));
+  }
+
+  StorageAccessHelper.prototype.execute = function() {
+    if (ITPHelper.prototype.canPartitionCookies()) {
+      this.setUpCookiePartitioning();
+      return;
+    }
+
+    if (ITPHelper.prototype.userAgentIsAffected()) {
+      this.manageStorageAccess();
+    } else {
+      this.grantedStorageAccess();
+    }
+  }
+
+  /* ITP 2.0 solution: handles cookie partitioning */
+  StorageAccessHelper.prototype.setUpHelper = function() {
+    return new ITPHelper({redirectUrl: window.shopOrigin + "/admin/apps/" + window.apiKey});
+  }
+
+  StorageAccessHelper.prototype.setCookieAndRedirect = function() {
+    document.cookie = "shopify.cookies_persist=true";
+    var helper = this.setUpHelper();
+    helper.redirect();
+  }
+
+  StorageAccessHelper.prototype.setUpCookiePartitioning = function() {
+    var itpContent = document.getElementById('CookiePartitionPrompt');
+    itpContent.style.display = 'block';
+
+    var button = document.getElementById('AcceptCookies');
+    button.addEventListener('click', this.setCookieAndRedirect.bind(this));
+  }
+
+  this.StorageAccessHelper = StorageAccessHelper;
+})(window);