Livewire에서 Google reCaptcha v2를 사용하는 방법

15229 단어 laravellivewire
코드를 작성하기 전에 Google reCaptcha로 설정해야 합니다.

설정을 완료하면 Google reCaptcha API 키와 암호를 프로젝트에 추가하고 싶을 것입니다. 저는 config/services.php에 내 키를 추가했습니다.

'recaptcha' => [
    'key' => env('RECAPTCHA_API_KEY'),
    'secret' => env('RECAPTCHA_SECRET_KEY'),
],


이제 우리는 그것들을 그렇게 참조할 수 있습니다.

config('services.recaptcha.key')
config('services.recaptcha.secret')



Google reCaptcha 초기화



프로젝트에 Google reCaptcha JavaScript 코드를 추가해야 합니다. 레이아웃 내에서 <head> 에 다음을 추가합니다.

<script
  src="https://www.google.com/recaptcha/api.js?onload=handleRecaptchaLoad&render=explicit"
  async
  defer
></script>


여기서 우리는 onload 함수를 트리거하는 handleRecaptchaLoad 이벤트가 있음을 선언합니다.
</body> 태그 앞에 다음을 추가합니다.

<script>
  let captchaIds = ['recaptchaA', 'recaptchaB', 'recaptchaC', 'recaptchaD']

  function handleRecaptchaLoad() {
      captchaIds.forEach((captchaId) => {
          if (!document.getElementById(captchaId)) {
              return
          }

          grecaptcha.render(
              captchaId, {
                  'sitekey': '{{ config('services.recaptcha.key') }}',
                  'callback': `${captchaId}Submit`
              }
          )
      })
  }

  window.addEventListener('reset-google-recaptcha', () => {
      captchaIds.forEach((captchaId) => {
          if (!document.getElementById(captchaId)) {
              return
          }

          grecaptcha.reset(captchaId)
      })
  })
</script>


무슨 일이야?
handleRecaptchaLoad 함수는 captchaIds 배열을 반복하고 다음을 수행합니다.
  • 요소가 존재하는지 확인합니다id.
  • 해당 요소에서 Google reCaptcha를 초기화하고 렌더링합니다
    • .
  • id를 기반으로 함수에 콜백을 추가합니다.

    • 그러면 recaptchaASubmit와 같은 콜백 함수 이름이 생성됩니다.

    왜 이 접근법인가?

    이를 통해 서로 간섭하지 않고 동일한 페이지에서 여러 Google reCaptcha 구성 요소를 사용할 수 있습니다.

    단일 Google reCaptcha 구성 요소에서도 잘 작동하지만 추가 코드를 제거하려면 이렇게 합니다.

    function handleRecaptchaLoad() {
    grecaptcha.render(
        captchaId, {
            'sitekey': '{{ config('services.recaptcha.key') }}',
            'callback': 'recaptchaComponentSubmit'
        }
    )
}

window.addEventListener('reset-google-recaptcha', () => {
    grecaptcha.reset('recaptchaComponentSubmit')
})


    맞춤 이벤트를 수신하는 창에 이벤트 리스너가 있습니다reset-google-recaptcha. 이 리스너가 트리거되면 Google reCaptcha 구성 요소가 재설정됩니다. 페이지가 다시 로드되지 않으므로 Livewire를 사용할 때 필요합니다.

    Google reCaptcha 블레이드 구성 요소



    Google reCaptcha가 연결되도록 마크업을 추가해야 합니다. 저는 이 작업을 Blade 구성요소로 수행했습니다.

    @props(['id'])

@push('scripts')
    <script>
        function {{ $id }}Submit(captchaToken) {
            @this.handleRecaptcha(captchaToken)
        }
    </script>
@endpush

<div>
    <div id="{{ $id }}"
         wire:ignore></div>

    @error('recaptcha')
        {{ $message }}
    @enderror
</div>


    무슨 일이야?

    이 구성 요소는 id의 단일 소품을 허용하고 다음을 수행합니다.
  • id 소품을 통해 고유한 함수 생성
  • 해당 고유 함수를 scripts 스택으로 푸시

    • 이 고유 함수는 handleRecaptchaLoad 함수에 선언된 콜백 함수까지 일치합니다.

    라이브와이어와 대화하기
    @this.handleRecaptcha(captchaToken)를 사용하여 Google reCaptcha(captchaToken)의 응답을 Livewire로 전달합니다.

    아직 레이아웃에 @stack('scripts')를 추가했는지 확인하지 않은 경우.

    Livewire 구성 요소에 연결



    이제 Google reCaptcha 구성 요소를 Livewire에 연결해야 합니다. 이 예에서는 Contact.php 라는 Livewire 구성 요소를 사용합니다.

    먼저 livewire/contact.blade.php 내의 양식에 블레이드 구성 요소를 추가해야 합니다.

    <form>
  <x-form.recaptcha id="contactRecaptcha" />
</form>


    Livewire 구성 요소에서는 Google reCaptcha가 확인되었는지 추적하고 양식 제출을 처리할 수 있도록 상태 및 메서드가 필요합니다.

    class Contact extends Component
{
    use InteractsWithRecaptcha;

    public $recaptcha = false;

    protected $rules = [
        'recaptcha' => 'accepted',
    ];

    protected function messages()
    {
        return [
            'recaptcha.accepted' => 'reCaptcha is required.',
        ];
    }

    public function handleRecaptcha($captchaToken)
    {
        $this->recaptcha = $this->validateRecaptchaRequest($captchaToken);
    }

    public function submitForm()
    {
        $this->validate();

        $this->reset();

        $this->resetRecaptchaComponent();

        session()->flash('contact.success', 'Message sent!');
    }

    public function render()
    {
        return view('livewire.contact');
    }
}


    우리는 InteractsWithRecaptcha라는 사용자 지정 특성을 사용하고 있습니다.

    필수는 아니지만 여러 Google reCaptcha 구성 요소로 작업하는 경우 권장됩니다.

    그 모습은 다음과 같습니다.

    trait InteractsWithRecaptcha
{
    public function validateRecaptchaRequest($captchaToken)
    {
        $captchaResponse = Http::asForm()->post('https://www.google.com/recaptcha/api/siteverify', [
            'secret' => config('services.recaptcha.secret'),
            'response' => $captchaToken,
        ])->json();

        return $captchaResponse['success'];
    }

    public function resetRecaptchaComponent()
    {
        $this->dispatchBrowserEvent('reset-google-recaptcha');
    }
}


    Livewire 구성 요소의 handleRecaptcha 함수에서 Google reCaptcha API 끝점에 도달하여 요청을 확인하고 성공 여부를 반환하는 validateRecaptchaRequest를 호출합니다.

    Livewire 구성 요소에서 API에서 반환된 값은 recaptcha 상태가 됩니다.
    false를 반환하면 양식이 제출될 때 유효성 검사가 실패하고 true이면 양식이 제출됩니다.

    양식이 제출되면 Livewire 기능reset()을 사용하여 Livewire 구성 요소 상태를 재설정하고 LivewireresetRecaptchaComponent 기능을 사용하여 이벤트dispatchBrowserEvent를 DOM으로 내보내는 특성에서 reset-google-recaptcha를 호출합니다. 창문.
    reset-google-recaptcha가 트리거되면 Google reCaptcha 구성 요소가 재설정됩니다.


    Livewire와 함께 작동하는 Google reCaptcha가 있습니다.

    이것이 너무 혼란스럽지 않기를 바랍니다. 여러 파일에 걸쳐 서로 대화하는 부분이 많지만 프로젝트에 논리가 추가되면 따라가기가 훨씬 쉬워집니다.
    Alpine JS를 사용하여 Shopify에서 제품 데이터를 얻는 방법
    경로에서 현지화를 무시하는 Livewire를 수정하는 방법

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage