如何使用 Rails 修复 Shopify 应用程序中的“ActionController::InvalidAuthenticityToken”错误？答案

【问题标题】：How to fix 'ActionController::InvalidAuthenticityToken' error in Shopify App with Rails?如何使用 Rails 修复 Shopify 应用程序中的“ActionController::InvalidAuthenticityToken”错误？
【发布时间】：2021-07-13 09:31:20
【问题描述】：

我正在开发模式下运行 Shopify 应用程序，Rails 5.2 托管在远程 ngrok 服务器上。当我尝试发布记录时，我从 Rails 收到“ActionController::InvalidAuthenticityToken”错误。当我禁用 CSRF 令牌时，Shopify 应用程序不起作用并显示错误，所以我不想禁用 CSRF 保护，但不知道如何绕过这个错误而不这样做。任何帮助将不胜感激。

Rails 5 ActionController::InvalidAuthenticityToken error and ActionController::InvalidAuthenticityToken

参考上述两个问题，我将以下代码添加到我的 application_controller.rb

skip_before_action :verify_authenticity_token
protect_from_forgery prepend: true, with: :exception

但是，错误仍然存在。

提交后出现错误的表单

<form action="/create_shipment" method="post">
    <%= token_tag %>
      <div class="form-group">
        <label>Username</label>
        <input type="text" class="form-control" name="username" placeholder="e.g. johnsmith">
        
      </div>
      <div class="form-group">
        <label>Secret Key</label>
        <input type="text" class="form-control" name="key" placeholder="e.g. 34ssdfkje3483jkdj83...">
      </div>

      <button type="submit" name="submit" class="btn btn-primary">Submit</button>
</form>

routes.rb

Rails.application.routes.draw do
  root :to => 'home#index'
  post '/create_shipment', :to => 'add_user#add_shipment_data'
  get '/products', :to => 'products#index'
  
  mount ShopifyApp::Engine, at: '/'
end

add_user_ontroller.rb

class AddUserController < ApplicationController
  def add_shipment_data
    @user = AddUser.new
    @user.username = params[:username]
    @user.secret_key = params[:key]
    @user.save
  end
end

shopify_app.rb

ShopifyApp.configure do |config|
  config.application_name = "Shipment Method"
  config.old_secret = ""
  config.scope = "write_products, read_products, read_customers, read_orders, write_orders" # Consult this page for more scope options:
                                  # https://help.shopify.com/en/api/getting-started/authentication/oauth/scopes
  config.embedded_app = true
  config.after_authenticate_job = false
  config.api_version = "2021-01"
  config.shop_session_repository = 'Shop'
  config.allow_jwt_authentication = true
  config.allow_cookie_authentication = false

  config.api_key = ENV.fetch('SHOPIFY_API_KEY', SHOPIFY_API_KEY).presence
  config.secret = ENV.fetch('SHOPIFY_API_SECRET', SHOPIFY_API_SECRET).presence
  if defined? Rails::Server
    raise('Missing SHOPIFY_API_KEY. See https://github.com/Shopify/shopify_app#api-keys') unless config.api_key
    raise('Missing SHOPIFY_API_SECRET. See https://github.com/Shopify/shopify_app#api-keys') unless config.secret
  end
end

Error Screenshot

【问题讨论】：

标签： ruby-on-rails ruby shopify shopify-app

【解决方案1】：

我花了很多时间试图弄清楚为什么我在使用 ngrok 时会出现 CSRF 错误。事实证明，大多数（所有？）浏览器都有一个域列表，它们不会存储子域可以访问的 cookie，ngrok.io 就在这个列表中。 Firefox 只是告诉你域名无效，chrome 告诉你域名对主机无效，而不是真正的原因。

我的第一个解决方案是 Rails.application.config.session_store :cookie_store, ..., tld_length: 3

然后我就决定了

module ActionDispatch                                                                             
  class Cookies
    class CookieJar                                                                               
      alias handle_options_orig handle_options                                                    
      def handle_options(options)
        if request.host  =~ /ngrok.io/                                                            
          options[:tld_length] = 3                                                                
        end
        handle_options_orig(options)                                                              
      end
    end
  end
end

浏览器将存储 X.ngrok.io 的 cookie，但不存储 .ngrok.io，这似乎是默认设置。

这是为 Rails 5 设计的

【讨论】：