Rails / Google SSO - всплывающее окно с аутентификацией: заблокирован фрейм с источником

Question

У меня есть приложение Rails, которое использует Google SSO для входа / регистрации пользователей. В Safari он работает нормально, но в Chrome я получаю эту ошибку:

Blocked a frame with origin "[domain]" from accessing a frame with origin "https://accounts.google.com". Protocols, domains, and ports must match.

Ранее я использовал это "решение" для его решения: https://github.com/zquestz/omniauth-google-oauth2/issues/122

Но недавно я заметил, что он неожиданно перестал работать для Safari с вышеуказанным решением.

Моя текущая реализация выглядит так (сценарий кофе):

$(document).ready ->
  $.ajax
    url: 'https://apis.google.com/js/client:plus.js?onload=gpAsyncInit'
    dataType: 'script'
    cache: false

window.gpAsyncInit = ->

  $('.googleplus-login').click (e) ->
  e.preventDefault()

  gapi.auth.authorize {
    immediate: false
    response_type: 'code'
    cookie_policy: 'single_host_origin'
    client_id: '[id]'
    scope: 'email profile'
  }, (response) ->
    if response and !response.error
      # google authentication succeed, now post data to server and handle data  securely
      jQuery.ajax
        type: 'POST'
        url: '/auth/google_oauth2/callback'
        dataType: 'json'
        data: response
        success: (json) ->
          # response from server
          [this doesn't happen]

          return
    else
      # google authentication failed

Я не видел ни одной ошибки, описанной в документации Google, поэтому не совсем уверен, как ее исправить.

Я уверен, что у меня такой же протокол httpsтак что должно быть что то другое. Я угадал домен.

Я видел, что другие сайты (например, переполнение стека) используют другой поток, где всплывающее окно не отображается, но пользователь вместо этого перенаправляется на другую страницу. Интересно, может ли это быть решением (и / или) рекомендуемым способом сделать это, чтобы избежать моей ошибки.

В таком случае, где я могу найти документацию для этого в джунглях документации Google?

Обновить

Это соответствующие части моего кода контроллера.

def google_authentication

  respond_to do |format|

    code = params[:code]

    unless code.blank?

      [..]

      load = { code: code, client_id: client_id, client_secret: client_secret, grant_type: grant_type, redirect_uri: redirect_uri }
      url = "https://www.googleapis.com/oauth2/v3/token/"
      response = HTTParty.post(url, :query => load, headers: { "content-type" => "application/x-www-form-urlencoded"})
      json = JSON.parse(response.body)

      unless json.nil?

        unless json["error"].present?

          [..]

          email = decoded_hash["email"]
          user = User.find_by_email(email)

          if user
            sign_in_existing_user(user)
            format.json { render :json => {:status => "Success", user_id: "# {user.id}"} }
          else
            # Create user
            [..]
            format.html { redirect_to current_user, notice: "Welcome #{current_user.name}!" }
            format.json { render :json => {:status => "Success", user_id: "#{current_user.id}"} }

          end
        else
          #format.html { redirect_to root_path, error: "Could not sign up / in" }
          format.json { head :no_content }
        end
      end
    end
  end
end

Я обновил свой JS на основе ответа ниже @EugZol, чтобы:

data: {access_token: response['access_token'], error: response['error'], expires_in: response['expires_in']}

И в настоящее время я получаю следующую ошибку:

Started POST "/auth/google_oauth2/callback" [..]
Processing by UsersController#google_authentication as JSON
Parameters: {"expires_in"=>"86400", "provider"=>"google_oauth2"}
Completed 406 Not Acceptable in 1ms (ActiveRecord: 0.0ms)

ActionController::UnknownFormat (ActionController::UnknownFormat):
app/controllers/users_controller.rb:237:in `google_authentication'

Answer 1

Единственное, что я мог предположить, это здесь, когда вы пытаетесь сделать запрос на свой сервер:

data: response

... ваш код косвенным образом обращается к фрейму, созданному GAPI. То есть, response ссылки на объекты в одном из его внутренних полей, которые обрамляют, и jQuery пытается сериализовать это.

Решение состоит в том, чтобы выбрать обязательные поля вручную:

data: {
  state: response['state'],
  code: response['code'],
  scope: response['scope'],
  client_id: response['client_id'],
  g_user_cookie_policy: response['g_user_cookie_policy']
}