在 devise_token_auth 中 Oauth2 授权成功后,如何将登录信息发送到前端?

How to send sign in info to frontend after successful Oauth2 authorization in devise_token_auth?

我使用 devise_token_auth 进行电子邮件和 Google 基于 Oauth2 的身份验证(为此使用 omniauth-google-oauth2 gem)。我已经成功地存储了通过 Google Oauth2 流程签署 up/in 的用户的登录信息。信息包括:

{"auth_token"=>"token here", "client_id"=>"client id here", "uid"=>"uid here", "expiry"=>1620492005, "config"=>nil, "oauth_registration"=>true}

上述信息的流程是

  1. 访问 http://localhost:3000/auth/google_oauth2。这会将您重定向到 Google 身份验证屏幕
  2. 用户选择帐户并授予权限。
  3. 我的应用程序的 Oauth 成功回调在 http://localhost:3000/auth/google_oauth2/callback
  4. 执行

第一步执行的代码是

module DeviseTokenAuth
  class OmniauthCallbacksController < DeviseTokenAuth::ApplicationController
    attr_reader :auth_params

    before_action :validate_auth_origin_url_param
    
    def omniauth_success
      get_resource_from_auth_hash
      set_token_on_resource
      create_auth_params

      if confirmable_enabled?
        # don't send confirmation email!!!
        @resource.skip_confirmation!
      end

      sign_in(:user, @resource, store: false, bypass: false)

      @resource.save!

      yield @resource if block_given?

      render_data_or_redirect('deliverCredentials', @auth_params.as_json, @resource.as_json)
    end
  end
end

我面临的问题:

  1. sign_in 方法调用不会设置 @current_user 尽管 @resource@auth_params 中包含所有必要的信息。
  2. 如何将登录信息(令牌,client_id,uid)通知我的前端应用程序?
render_data_or_redirect('deliverCredentials', @auth_params.as_json, @resource.as_json)

此调用不会重定向或呈现任何内容,而是停留在同一页面上 URL 它显示的是 http://localhost:3000/auth/google_oauth2/callback#

我现在主要有三个问题:

  1. 如何使用devise_token_auth根据传入的身份验证headers设置current_user? 我已将以下行添加到我的控制器,但仍然无法设置 @current_user
include DeviseTokenAuth::Concerns::SetUserByToken

可能是因为我发送的 auth headers 不正确?请参阅下面我的第 3 点。

  1. 我应该如何将登录信息发送到我的前端应用程序? 我是否以某种方式修改上述方法以将登录信息发送到我的前端应用程序?

  2. 为了发出经过身份验证的请求,我应该把身份验证 headers 放在什么地方?

我已经使用邮递员测试了以下两项,但由于未授权错误而失败

  1. 已在 headers
  2. 中发送 access-tokenclient_iduid
  3. 已发送 Bearer my_token 授权 headers。

为了让它工作,我们必须覆盖 DeviseTokenAuthOmniAuthCallbacks 控制器并更新它的 render_data_or_redirect method.

render_data_or_redirect的默认定义是

def render_data_or_redirect(message, data, user_data = {})
  if ['inAppBrowser', 'newWindow'].include?(omniauth_window_type)
    render_data(message, user_data.merge(data))
  elsif auth_origin_url

    redirect_to DeviseTokenAuth::Url.generate(auth_origin_url, data.merge(blank: true))
  else
    fallback_render data[:error] || 'An error occurred'
  end
end

以下 routes.rbcustom_omniauth_callbacks_controller.rb 需要进行更改才能使其与 j-toker 库一起使用。

在路由文件中

# config/routes.rb

mount_devise_token_auth_for 'User', at: 'auth', controllers: {
  omniauth_callbacks: "devise_token_auth/custom_omniauth_callbacks"
}

CustomOmniAuthCallbacksController 的定义是

# app/controllers/devise_token_auth/custom_omniauth_callbacks_controller.rb

module DeviseTokenAuth
  class CustomOmniauthCallbacksController < DeviseTokenAuth::OmniauthCallbacksController
    protected

    def render_data_or_redirect(message, data, user_data = {})
      if (['inAppBrowser', 'newWindow'].include?(omniauth_window_type) || auth_origin_url)

        redirect_to DeviseTokenAuth::Url.generate(auth_origin_url, data.merge(blank: true))
      else
        fallback_render data[:error] || 'An error occurred'
      end
    end
  end
end

现在在前端需要配置j-toker

首先,安装j-toker包,yarn package or npm package

yarn add j-toker

npm i j-toker

然后在您的 javascript 应用程序中,配置 j-toker

import $ from "jquery";

$.auth.configure({
    apiUrl: "https://your-api-domain.com",
    emailSignInPath: "/auth/sign_in",
    signOutPath: "/auth/sign_out",
    emailRegistrationPath: "/auth",
    tokenValidationPath: "/auth/validate_token"

    authProviderPaths: {
      facebook: "/auth/facebook",
      google: "/auth/google_oauth2"
    }
  });