Rails는 Turbo 및 Stimulus(Tirbo)를 통해 TCHA를 설계 및 재부팅합니다.

소개하다.

지난달에 나는 나의 Rails 응용 프로그램에 Hotwire(이것은 Turbo와 Stimulus의 조합을 설치하기로 결정했다.나는 업그레이드가 매우 쉽고 빠를 것이라고 생각했지만, 나는 이 임무를 좀 과소평가했다.
자바스크립트에 대해 알고 있다면 학습 자극은 매우 쉽다.터보는 엔진 덮개 아래에서 작동하는 원리를 완전히 이해하기 어려울 정도로 추상적이다.또한 터보는 새로운 모델Turbolinks의 진화판)이기 때문에 2021년 6월까지 좋은 문서 기록이 없다.
내가 직면해야 할 도전은 터보를 Devise와 함께 일하고 ReCaptcha 정책 작업을 유지하는 것이다(먼저 ReCaptcha v3를 검증한 다음에 v3이 실패할 때 ReCaptcha v2를 표시한다).뛰어들어갑시다!
다음 내용에 대해 정상적인 Rails 응용 프로그램이 있다고 가정하면 다음과 같은 Gems:디자인,stimulation Rails,turbo Rails,recaptcha가 설치되어 있습니다.

오류 메시지 처리 및 설계

터보를 성공적으로 설치했다면 로그인 폼을 제출할 때 TURBO_STREAM 형식으로 표시됩니다. (터보가 터보링크와 같은 폼뿐만 아니라 링크에도 적용되기 때문입니다.)

Processing by PagesController#home as TURBO_STREAM

올바른 정보를 포함하는 로그인 폼을 제출했다면, 모든 것이 예상대로 진행되어야 합니다.
문제는 정확한 정보 (알 수 없는 이메일 주소, 잘못된 비밀번호...) 를 입력하지 않았을 때오류 메시지가 더 이상 나타나지 않습니다. 이것은 우리가 원하는 것이 아닙니다.
이 부분을 복원하기 위해 크리스 올리버(Chris Oliver)의 우수한 작품tutorial에서 영감을 얻었다.

1 - 설계 형식으로 터보 스트림 추가

우선, 우리는 터빈 흐름을 디자인 네비게이션 형식 목록에 추가해야 한다.디자인 중에rb 파일, 설명 취소config.navigational_formats 행 및 추가turbo_stream 형식:

# devise.rb

config.navigational_formats = ['*/*', :html, :turbo_stream]

2. 디자인 응답 방법 덮어쓰기

인증에 실패했을 때 사용자에게 오류를 표시하기 위해서, 우리는 자신의 Devise::FailureApp 부분을 다시 쓰기 TurboFailureApp 클래스의respond 방법을 만들어야 합니다.이것은 HTML 요청을 처리하는 것처럼 터보 흐름을 처리하고 실패할 때 로그인 페이지로 되돌려줍니다.이 클래스를 장치의 맨 위에 직접 추가할 수 있습니다.rb 파일 (devise.config 블록 이외) 은 다른 위아래 문장에서 이 새 클래스를 영원히 사용하지 않을 수도 있기 때문입니다.

# devise.rb

class TurboFailureApp < Devise::FailureApp
  def respond
    if request_format == :turbo_stream
      redirect
    else
      super
    end
  end

  def skip_format?
    %w[html turbo_stream */*].include? request_format.to_s
  end
end

3 - 구성 관리자

마지막으로, 우리는 Warden (Desive는 인증에 사용되는 프레임 기반 중간부품) 에서 우리가 새로 만든 클래스를 고장 관리자로 사용해야 한다고 알려야 한다.디자인 중에rb, config.warden 블록에 대한 주석을 취소하고 내부 내용을 다음과 같이 바꿉니다.

# devise.rb

config.warden do |manager|
  manager.failure_app = TurboFailureApp
end

이렇게 하면 검증에 실패했을 때 발생하는 디자인 오류 메시지를 볼 수 있습니다.

터보 부스터 및 자극 장치를 사용한 ReCaptchas 처리

Desive 인증이 터보와 정확하게 협조하여 사용할 수 있는 이상, 우리는 폼에 ReCaptcha 보호를 실시하기를 희망합니다.내가 사용하는 ReCaptcha 정책은 매우 고전적이다. 왜냐하면 먼저 ReCaptcha v3 (보이지 않고 요청 책임 점수에 근거함) 을 보여주기 때문이다. 만약 점수가 예상치보다 낮으면 사용자가 수동으로 검사할 수 있도록 ReCaptcha v2 콤보 상자를 보여줄 것이다.

1-로그인 양식에 ReCaptcha V3 추가

Recaptcha Gem 덕분에 프로세스를 간소화하는 데 도움을 줄 수 있는 방법이 생겼습니다.ReCaptcha v3이 제대로 검증되지 않은 경우 html 교체를 처리하기 위해 터보 프레임워크를 사용합니다.우리 과정/새 과정에서.html.erb 파일은 로그인 양식에 다음 코드를 포함할 수 있습니다.

<!-- devise/sessions/new.html.erb -->

<%= turbo_frame_tag 'recaptchas' do %>
  <%= recaptcha_v3(action: 'login', site_key: ENV['RECAPTCHA_SITE_KEY_V3']) %>
<% end %>

2. ReCaptchas 검증 방법 구현

Sessions controller에서 ReCaptcha API 인증 요청을 허용하는 방법이 필요합니다.우리는create 방법에서 prepend_before_action 리셋을 사용할 것이며 심지어는 디자인 사용자 인증을 하기 전에 ReCaptchas 요청을 검증할 것이다.

# users/sessions_controller.rb

class Users::SessionsController < Devise::SessionsController
  prepend_before_action :validate_recaptchas, only: [:create]

  protected

  def validate_recaptchas
    v3_verify = verify_recaptcha(action: 'login', 
                                 minimum_score: 0.9, 
                                 secret_key: ENV['RECAPTCHA_SECRET_KEY_V3'])
    return if v3_verify

    self.resource = resource_class.new sign_in_params
    respond_with_navigational(resource) { render :new }
  end
end

요청 점수가 0.9 이상이면 위의 코드가 작동하지만, 점수가 낮으면 터보가 turbo_stream 형식의 섹션을 찾기 때문에 오류가 발생합니다.또한 Desive에 양식을 다시 렌더링하라고 했을 뿐 향상된 사항이 없습니다.우리는 ReCaptcha v2를 보여 주기를 희망합니다. 이렇게 하면 사용자가 한 번 또 한 번 같은 표에 갇히지 않고 요청 점수가 매우 낮습니다.

3-ReCaptcha v2의 터보 흐름 뷰 생성하기

그런 다음 양식의 ReCaptcha v2 주입에 대한 뷰를 작성합니다.ReCaptcha v2를 ReCaptcha v3로 교체하기 위해 Turbo Stream helperturbo_stream.replace를 사용하여 주입하려는 코드를 포장합니다.

<!-- sessions/new.turbo_stream.erb -->

<%= turbo_stream.replace :recaptchas do %>
<% end %>

:recaptchas 속성은sessions/new에서 설정한 turbo_frame_tag id와 같습니다.html.erb는 우리의 ReCaptcha v3 패키지입니다.우리는 turbo_frame_tag 'recaptchas'의 내용을 turbo_stream의 내용으로 바꿀 것이다.멋있죠?
현재 까다로운 부분입니다. Recpatchas Gem helper 방법을 사용하여 ReCaptcha v2 콤보 상자를 보여 드리려고 시도할 수도 있습니다. 아래와 같습니다.

<!-- sessions/new.turbo_stream.erb -->
# Do not do that !

<%= turbo_stream.replace :recaptchas do %>
  <div class="mt-4">
    <%= recaptcha_tags(site_key: ENV['RECAPTCHA_SITE_KEY_V2']) %>
  </div>
<% end %>

터빈 증압기 때문에 일을 할 수 없을 것이다.실제로 터보는 페이지 리셋을 피하고 내연 스크립트를 평가하지 않기 때문에 (본고가 추적한 오류: hotwired/turbo#186 ReCaptcha API를 다시 호출하지 않습니다.따라서 우리는 ReCaptcha v2를 현저하게 보여줘야 한다. 이것이 바로 자극의 원천이다!turbo_stream.replace 구역에서 새로워요.터빈 증압기.erb 파일, 미래의 자극 컨트롤러에 연결할 수 있도록 idrecaptchaV2로 필요한 속성을 가진 빈 DIV를 삽입합니다.

<!-- sessions/new.turbo_stream.erb -->

<%= turbo_stream.replace :recaptchas do %>
  <div class='mt-4' id='recaptchaV2' data-controller='load-recaptcha-v2' data-load-recaptcha-v2-site-key-value=<%= ENV['RECAPTCHA_SITE_KEY_V2'] %>></div>
<% end %>

4 - ReCaptcha v2를 자극적인 명시적 표현

load recaptcha v2 컨트롤러라는 자극 컨트롤러를 생성합니다.js (이것은 우리 recaptchaV2 DIV의 데이터 컨트롤러 속성과 동일해야 합니다.이 컨트롤러에서 data-load-recaptcha-v2-site-key-value DIV에서 recaptchaV2 속성에 정의된 ReCaptcha v2 sitekey 값을 가져오고 초기화할 때 ReCaptcha v2를 명확하게 주입합니다.따라서 load recaptcha v2 컨트롤러는 다음과 같습니다.

// load_recaptcha_v2_controller.js

import { Controller } from "stimulus"

export default class extends Controller {
  static values = { siteKey: String }

  initialize() {
    grecaptcha.render("recaptchaV2", { sitekey: this.siteKeyValue } )
  }
}

5 - ReCaptcha v2 인증 추가

이제 세션 컨트롤러에 ReCaptcha v2 인증을 추가해야 합니다.이 점을 간단히 하려면 v2 검증을 포함하여 validate_recaptchas 방법을 수정하면 다음과 같다.

  def validate_recaptchas
    v3_verify = verify_recaptcha(action: 'login', 
                                 minimum_score: 0.9, 
                                 secret_key: ENV['RECAPTCHA_SECRET_KEY_V3'])
    v2_verify = verify_recaptcha(secret_key: ENV['RECAPTCHA_SECRET_KEY_V2'])
    return if v3_verify || v2_verify

    self.resource = resource_class.new sign_in_params
    respond_with_navigational(resource) { render :new }
  end

지금 테스트!ReCaptcha v2가 올바르게 표시되는지 확인하려면 ReCaptcha v3 검증 도우미minimum_score를 1로 설정하면 v3이 매번 실패합니다. 이것은 우리가 테스트하는 데 필요한 것입니다.물론 이후에 이 값을 정상치로 회복하는 것을 잊지 마세요!

6 - Flash 메시지 구성

ReCaptcha v3 검증이 실패하면 사용자가 "ReCaptcha를 확인하여 계속해 주십시오"또는 이와 유사한 플래시 메시지를 표시하여 무슨 일이 일어났는지 알 수 있습니다.
응, 우리는 기본 플래시 메시지 설정을 작은 변경을 해야 한다. 왜냐하면 플래시 메시지는 터보 (다시!) 가 실행될 때 작동하지 않기 때문이다.방향을 바꾸지 마라.
신청하세요.html.erb 파일 및 Turbo 프레임에 Flash 메시지 섹션 패키지:

<!-- application.html.erb -->

<%= turbo_frame_tag :flashes do %>
  <%= render 'shared/flashes' %>
<% end %>

그리고 당신이 해야 할 일은 세션/새 세션에서 터빈 흐름 부분을 통해 Flash 메시지를 업데이트하는 것입니다.터빈 증압기.erb 파일, 이렇게 보입니다.

<%= turbo_stream.replace :recaptchas do %>
  <div class='mt-4' data-controller='load-recaptcha-v2' id='recaptchaV2' data-load-recaptcha-v2-site-key-value=<%= ENV['RECAPTCHA_SITE_KEY_V2'] %>></div>
<% end %>
<%= turbo_stream.update(:flashes, partial: 'shared/flashes', locals: { alert: 'Please check the ReCaptcha to continue' }) %>

드디어 도착했어!너는 반드시 기능 설계 인증표와 터빈을 가지고 있어야 한다.
나는 이것이 도움이 되기를 바란다. 물론, 만약 당신이 약간의 의문이 있다면, 심지어는 더욱 좋다. 만약 당신이 개선하거나 재구성할 건의가 있다면, 언제든지 나에게 연락하십시오.