SvelteKit hCaptcha 연락처: 로봇 멀리하기

📝 hCaptcha는 SvelteKit에서

이 글에서, 우리는 당신의 Svelte 사이트를 위해 SvelteKit hCaptcha 연락처를 볼 것입니다.hCaptcha는 Google reCAPTCHA의 대체 제품입니다.둘 다 사이트 리스트에 있는 스팸메일 제출을 줄일 수 있다.hCaptcha claims to protect user privacy . 사용자가 폼을 제출하기 전에 hCaptcha 도전을 완성하도록 요구함으로써, 당신은 hCaptcha 판결에 따라 답장을 선별하고 그것들을 더욱 심사할 수 있습니다.
hCaptcha 검증은 두 부분으로 나뉜다.첫 번째는 클라이언트(전단)에서 사용자에게 도전을 완성하도록 요구합니다.우리는 hCaptcha에 직접 사용자 질문 응답을 보냅니다.hCaptcha 다음에 응답 코드로 응답합니다.이 응답 코드는 프로세스의 두 번째 부분에서 사용해야 하며, 이 부분은 백엔드에서 완성되어야 한다.정적 SvelteKit 사이트를 구축하려면 Cloudflare workers를 사용하여 백엔드 부분을 실행하는 방법을 볼 수 있습니다.그러나 서버 쪽 렌더링을 더 좋아한다면, SvelteKit에서 이 문제를 처리할 수 있도록 예시 코드를 제공할 것입니다.
만약 이 모든 것이 듣기에 매우 감동적이라면, 우리는 왜 계속하지 않겠는가?
🧱 hCaptcha는 SvelteKit에서

영업 계획은 다음과 같습니다.

클론 SvelteKit blog MDsveX starter, 이렇게 하면 우리는 달리기를 시작할 수 있습니다.

연락처 양식 추가

hCaptcha 클라이언트 코드 추가

은Cloudflare workers가 서버 측 검증에 어떻게 사용되는지 이해합니다.

은 다른 서버에서 구현을 시도합니다.

⚙️ 개시하다

cloning the SvelteKit blog MDsveX starter부터 시작하겠습니다.

git clone https://github.com/rodneylab/sveltekit-blog-mdx.git sveltekit-hcaptcha-form
cd sveltekit-hcaptcha-form
pnpm install
cp .env.EXAMPLE .env
pnpm run dev

SvelteKit 구성 요소 라이브러리의 일부 구성 요소를 사용하여 개발을 가속화할 것입니다.이제 설치를 시작하겠습니다.

pnpm install -D @rodneylab/sveltekit-components

마지막으로, 코드를 테스트하려면 hCaptcha 증빙서류가 필요합니다.setting up a free hCaptcha account in the article on Serverless hCaptcha or just head to the hCaptcha site의 설명을 참조하십시오.자격 증명을 획득한 후 .env 파일에 추가합니다.

VITE_HCAPTCHA_SITEKEY="10000000-ffff-ffff-ffff-000000000001"
VITE_WORKER_URL="http://127.0.0.1:8787"

HCAPTCHA_SECRETKEY="0x0000000000000000000000000000000000000000"

클라이언트는 앞의 두 개의 증빙서류에 접근할 것이기 때문에 VITE_ 접두사가 필요합니다.
마지막 설정으로 dotenv 파일에서 svelte.config.js 패키지를 가져오십시오.

/** @type {import('@sveltejs/kit').Config} */
import 'dotenv/config';
import adapter from '@sveltejs/adapter-static';

그런 다음 src/lib/config/website.js의 클라이언트 구성 요소에 액세스할 수 있습니다.

  wireUsername: import.meta.env ? import.meta.env.VITE_WIRE_USERNAME : '',
  hcaptchaSitekey: import.meta.env ? import.meta.env.VITE_HCAPTCHA_SITEKEY : '',
  workerUrl: import.meta.env ? import.meta.env.VITE_WORKER_URL : '',
};

설정에 따라 초보자를 처음 사용한다면 프로젝트의 파일과 폴더를 훑어보세요.localhost:3030/으로 가셔서 클릭해서 이 사이트를 익히셔도 됩니다.계속할 준비가 됐을 때

⚓️ 연결 구성

우리는 모든 것이 순조롭게 운행될 수 있도록 연결고리의 배치만 조정할 수 있다.프로젝트의 src/hooks.js 파일에는 CSP(Content Security Policy) 헤더가 포함되어 있습니다.이러한 보안 조치는 브라우저만 특정 호스트에 연결할 수 있도록 하는 추가 보안 조치입니다.starter를 사용하여 구축된 모든 사이트에서 이 파일을 조정해야 할 수도 있습니다.이 프로젝트에 대해 hCaptcha와 Cloudflare worker에 연결할 수 있도록 허용해야 합니다.

const directives = {
  'base-uri': ["'self'"],
  'child-src': ["'self'"],
  // 'connect-src': ["'self'", 'ws://localhost:*'],
  'connect-src': [
    "'self'",
    'ws://localhost:*',
    'https://hcaptcha.com',
    'https://*.hcaptcha.com',
    process.env['VITE_WORKER_URL'],
  ],
  'img-src': ["'self'", 'data:'],
  'font-src': ["'self'", 'data:'],
  'form-action': ["'self'"],
  'frame-ancestors': ["'self'"],
  'frame-src': [
    "'self'",
    // "https://*.stripe.com",
    // "https://*.facebook.com",
    // "https://*.facebook.net",
    'https://hcaptcha.com',
    'https://*.hcaptcha.com',
  ],
  'manifest-src': ["'self'"],
  'media-src': ["'self'", 'data:'],
  'object-src': ["'none'"],
  // 'style-src': ["'self'", "'unsafe-inline'"],
  'style-src': ["'self'", "'unsafe-inline'", 'https://hcaptcha.com', 'https://*.hcaptcha.com'],
  'default-src': [
    "'self'",
    rootDomain,
    `ws://${rootDomain}`,
    // 'https://*.google.com',
    // 'https://*.googleapis.com',
    // 'https://*.firebase.com',
    // 'https://*.gstatic.com',
    // 'https://*.cloudfunctions.net',
    // 'https://*.algolia.net',
    // 'https://*.facebook.com',
    // 'https://*.facebook.net',
    // 'https://*.stripe.com',
    // 'https://*.sentry.io',
  ],
  'script-src': [
    "'self'",
    "'unsafe-inline'",
    // 'https://*.stripe.com',
    // 'https://*.facebook.com',
    // 'https://*.facebook.net',
    'https://hcaptcha.com',
    'https://*.hcaptcha.com',
    // 'https://*.sentry.io',
    // 'https://polyfill.io',
  ],
  'worker-src': ["'self'"],
  // remove report-to & report-uri if you do not want to use Sentry reporting
  'report-to': ["'csp-endpoint'"],
  'report-uri': [
    `https://sentry.io/api/${import.meta.env.VITE_SENTRY_PROJECT_ID}/security/?sentry_key=${
      import.meta.env.VITE_SENTRY_KEY
    }`,
  ],
};

정적 사이트를 만들든 서버 사이드 구현 사이트를 만들든 개발 과정에서 변경해야 한다.정적 프로덕션 사이트에서는 이 파일을 사용하지 않습니다.같은 효과를 위해 HTTP 헤더를 추가할 수 있습니다.당신의 위탁 관리 플랫폼에서 어떻게 이 점을 실현할 수 있는지 검사하세요.

🧑🏽 연락처

이것은 기본 연락처의 코드다.우리는 폼에 접근할 수 있는 모든 보일러판을 입력하는 데 필요한 시간을 절약하기 위해 구성 요소 라이브러리를 사용하고 있습니다.너는 how to create you own SvelteKit component library in a recent video post을 볼 수 있다.src/lib/components/ContactForm.svelte의 새 파일에 코드를 붙여넣습니다.

<script>
  import { EmailInputField, TextArea, TextInputField } from '@rodneylab/sveltekit-components';
  import website from '$lib/config/website';
  import { onMount, onDestroy } from 'svelte';
  import { browser } from '$app/env';

  const { hcaptchaSitekey, workerUrl } = website;

  onMount(() => {

  });

  onDestroy(() => {

  });

  let name = '';
  let email = '';
  let message = '';
  let errors: {
    name?: string;
    email?: string;
    message?: string;
  };
  $: errors = {};
  $: submitting = false;

  function clearFormFields() {
    name = '';
    email = '';
    message = '';
  }

<form class="form" on:submit|preventDefault={handleSubmit}>
  <h2>Drop me a message</h2>
  <TextInputField
    id="form-name"
    value={name}
    placeholder="Your name"
    title="Name"
    error={errors?.name ?? null}
    on:update={(event) => {
      name = event.detail;
    }}
    style="padding-bottom:1rem"
  />
  <EmailInputField
    id="form-email"
    value={email}
    placeholder="[email protected]"
    title="Email"
    error={errors?.email ?? null}
    on:update={(event) => {
      email = event.detail;
    }}
    style="width:100%;padding-bottom:1rem"
  />
  <TextArea
    id="form-message"
    value={message}
    placeholder="Enter your message here"
    title="Message"
    error={errors?.message ?? null}
    on:update={(event) => {
      message = event.detail;
    }}
    style="padding-bottom:1rem"
  />
  <button type="submit" disabled={submitting}>Submit form</button>
</form>

<style lang="scss">
  .form {
    display: flex;
    flex-direction: column;
    width: 80%;
    margin: $spacing-6 auto;
  }
  button {
    cursor: pointer;
    padding: $spacing-2 $spacing-0;
  }
</style>

EmailInputField, TextArea, TextInputField 구성 요소는 구성 요소 라이브러리에서 나온다.make use of Svelte's component events으로 표시되는 값이 해당 구성 요소의 email, message 및 name 변수와 동기화됩니다.이 API에 익숙하지 않은 경우 앞의 링크에 따라 Svelte 자습서를 읽으십시오.
이 글이 너무 길지 않도록, 우리는 여기서 표 코드의 나머지 부분을 상세하게 소개하지 않는다.날씬한 폼과 폼 필드를 변수에 연결하는 게시물을 단독으로 발표하고 싶다면 알려주세요.

🤖 hCaptcha 추가

클라이언트 hCaptcha 스크립트를 DOM에 직접 추가합니다.만약 이전에 추적이나 분석 코드를 보았다면, 아마도 이러한 모델을 보았을 것입니다.SvelteKit에서 이 점을 실현하기 위해 추가 패키지를 추가할 필요가 없다는 것을 볼 수 있습니다.그 전에 구성 요소 onMount 함수에 스크립트를 실제로 로드합니다.

  let hcaptcha = { execute: async (_a, _b) => ({ response: '' }), render: (_a, _b) => {} };
  let hcaptchaWidgetID;

  onMount(() => {
    if (browser) {
      hcaptcha = window.hcaptcha;
      if (hcaptcha.render) {
        hcaptchaWidgetID = hcaptcha.render('hcaptcha', {
          sitekey: hcaptchaSitekey,
          size: 'invisible',
          theme: 'dark',
        });
      }
    }
  });

  onDestroy(() => {
    if (browser) {
      hcaptcha = { execute: async () => ({ response: '' }), render: () => {} };
    }
  });

보이지 않는 hCaptcha를 추가하고 있기 때문에 hcaptchaWidgetID 변수를 사용하여 식별할 것입니다.첫 번째 줄은 형식의 일치성을 유지하기 위해서이며, 구성 요소를 만들고 제거하는 동안 hCaptcha 스크립트를 국부 변수에 연결하고 링크를 취소할 수 있습니다.우리는 onMount 내의 hCaptcha 초기화에 우리의 hCaptcha 사이트 키를 추가했습니다.
다음은 handleSubmit 함수가 필요합니다.

  async function handleSubmit() {
    try {
      const { response: hCaptchaResponse } = await hcaptcha.execute(hcaptchaWidgetID, {
        async: true,
      });
      /* for a static site, you can use a Cloudflare worker to manage the server part of the
       * hCaptcha and send your site admin an email with the contact details
       *
       * in this case, use:
       *
       * fetch(`${workerUrl}/verify`, {
       *
       * for a server side rendered app, use the verify endpoint to do the processing:
       *
       * fetch('/verify.json', {
       */
      fetch(`${workerUrl}/verify`, {
        method: 'POST',
        credentials: 'omit',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({
          name,
          email,
          message,
          response: hCaptchaResponse,
        }),
      });
      console.log('Details: ', { name, email, message });
      clearFormFields();
    } catch (error) {
      console.error('Error in contact form submission');
    }
  }
</script>

이 함수는 hcaptcha.execute 함수로 호출되기 시작한다.인증 코드를 표시하고 사용자가 완료할 때까지 기다립니다.그리고 hCaptcha에 연락해서 response을 받습니다. 이것은 저희가 두 번째 부분에서 필요로 하는 것입니다.흥미로운 것은 execute이 도전과 사용자 답변을 해결할 때 마우스 이동 정보를 수집한다는 점이다.
이 함수의 나머지 부분은 두 가지 가능성을 포함한다.만약 정적 사이트가 있다면, 우리는 폼 데이터와 hCaptcha 응답을 클라우드flare worker에 보내서 처리할 수 있습니다.SvelteKit 순수주의자이고 서버에서 보이는 사이트를 선택하면 요청을 SvelteKit 노드로 보낼 수 있습니다.잠시 후에 이 두 가지 방법을 더욱 상세하게 이해합시다.
앞에서 설명한 대로 HCaptcha 스크립트를 DOM에 추가할 수 있습니다.

<svelte:head>
  <script src="https://js.hcaptcha.com/1/api.js?render=explicit" async defer></script>
</svelte:head>

그런 다음 다음과 같은 자리 표시자div가 필요합니다.

  <button type="submit" disabled={submitting}>Submit form</button>
  <div
    id="hcaptcha"
    class="h-captcha"
    data-sitekey={hcaptchaSitekey}
    data-size="invisible"
    data-theme="dark"
  />
</form>

🔗 SvelteKit hCaptcha 연락처: 모든 정보를 연결

중요한 것은 연락처 페이지에 ContactForm 구성 요소를 가져와서 다음과 같이 보여야 한다는 것입니다.

  import ContactForm from '$lib/components/ContactForm.svelte';

  </div></Card
>
<ContactForm />

<style lang="scss"

🤖 hCaptcha 추가: Rust Cloudflare Worker Style

Cloudflare workers는 WASM(Web Assembly) 환경에서 실행됩니다. 즉, JavaScript 대신 Rust 또는 C++로 코드를 작성할 수 있습니다.SvelteKit와 다른 프레임워크에서 클라이언트 사이트를 구축하려면 백엔드의 일부분을 위한 코드 라이브러리만 유지해야 하기 때문에 해결 방안으로 삼는 것을 좋아합니다.SvelteKit와Next 응용 프로그램에서 같은 코드를 사용하여 연락처 폼을 제출할 수 있습니다.Rust는 또한 코드 최적화의 기회를 제공합니다.최근 글에서 hCaptcha를 처리하기 위해 Rust Cloudflare 서비스 인원을 설정하는 방법을 볼 수 있습니다.로컬 테스트에 대해 워크맨을 http://127.0.0.1:8787에서 실행할 수 있습니다. 이것은 우리가 .env 파일에서 정의한 값입니다.POST 루트의 /verify 요청으로 설정하기만 하면 됩니다.

🔥 hCaptcha 추가:SvelteKit 서버 사이드 라우팅 스타일

마지막으로 hCaptcha 서버에서 일하는 SvelteKit 방법을 검사해 보겠습니다.src/routes/verify.json.js에 새 파일을 만들고 다음 코드를 붙여넣습니다.

export async function post(request) {
  try {
    const { name, email, message, response: hCaptchaClientResponse } = request.body;

    const secret = process.env['HCAPTCHA_SECRETKEY'];
    const sitekey = process.env['VITE_HCAPTCHA_SITEKEY'];
    const body = new URLSearchParams({ response: hCaptchaClientResponse, secret, sitekey });

    const response = await fetch('https://hcaptcha.com/siteverify', {
      method: 'POST',
      credentials: 'omit',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded',
      },
      body: body.toString(),
    });

    const data = await response.json();
    const { success } = data;
    console.log('data: ', data);
    if (success) {
      console.log('hCaptcha says yes!');
    } else {
      console.log('hCaptcha says no!');
    }

    // process name, email and message here e.g. email site admin with message details
    console.log({ name, email, message });

    return {
      status: 200,
    };
  } catch (err) {
    const error = `Error in /verify.json.js: ${err}\
`;
    console.error(error);
    return {
      status: 500,
      error,
    };
  }
}

hCaptcha 요청은 JSON으로 응답하는 양식 데이터로 제출해야 합니다.응답의 successful 필드는 hCaptcha가 사용자를 로봇으로 간주하는지 여부를 표시합니다.자세한 내용은 hCaptcha 문서를 참조하십시오.

⛔️ SvelteKit hCaptcha 연락처: CORS 오류

만약 웹 사이트를 테스트할 때 CORS 오류가 발생하면 DNS 설정을 조정해 보아야 합니다.이것은 127.0.0.1(localhost)의 호스트 이름 에이전트를 만드는 것과 관련이 있다.MacOS에서는 다음 행을 /private/etc/hosts 파일에 추가할 수 있습니다.

  127.0.0.1 test.localhost.com

그리고 브라우저에서 http://localhost:3030을 사용하지 http://test.localhost.com:3030을 통해 사이트를 방문하지 않습니다.이것은 맥OS에서 나에게 매우 효과적이다.이것은 일반적인 Linux 및 Unix 시스템에도 적용되지만, 변경한 파일은 /etc/hosts입니다.DNSCryprt Proxy 또는 Unbound를 사용하는 경우 관련 구성 파일에서 이와 유사하게 변경할 수 있습니다.만약 당신이 윈도우즈를 사용하고 어떻게 조작하는지 알고 있다면, 다음에 다른 윈도우즈 사용자를 돕기 위해 평론을 발표하십시오.

🙌🏽 SvelteKit hCaptcha 연락처: 우리가 무엇을 배웠는지

우리는 방금 이곳에서 기본 지식을 소개했다.현실 세계의 응용 프로그램에서 최소한 서버에서 검증을 추가해야 한다.클라이언트의 피드백도 사용자 체험을 개선하는 좋은 생각이다.
이 게시물에서 우리는 다음과 같은 것을 알게 되었다.

hCaptcha와 SvelteKit를 어떻게 결합시켜,

Rust Cloudflare workers를 정적 사이트에 통합하는 방법으로 서로 다른 프레임워크에 걸쳐 코드를 쉽게 공유할 수 있습니다.

은 hooks.js 파일을 통해 외부 호스트에 연결할 수 있도록 컨텐츠 보안 정책을 조정합니다.

나는 정말 이 문장에서 적어도 한 가지는 네가 너의 일이나 보조 프로젝트에 쓸 수 있기를 바란다.여느 때와 마찬가지로 만약에 제가 어떤 기교를 놓쳤다면 피드백에 연락하세요!
너는 full code for this SvelteKit hCaptcha Contact Form project on the Rodney Lab Git Hub repo을 볼 수 있다.

🙏🏽 SvelteKit hCaptcha 연락처: 피드백

너는 이 댓글이 유용하다고 생각하니?당신은 스스로 이 문제를 해결할 방법이 있습니까?너의 해결 방안을 나에게 알려줘.다른 주제의 댓글을 보고 싶으세요?새 게시물에 연락할 생각.그 밖에 만약에 제 작문 스타일을 좋아하신다면 저에게 연락을 주십시오. 만약에 제가 상담을 바탕으로 귀사 사이트를 위해 댓글을 쓸 수 있다면.계속 읽고 연락할 방법을 찾으세요. 자세한 것은 아래 문장을 보십시오.유사한 게시물을 지원하고 달러, 유로화, 파운드를 절약할 수 있다면 consider supporting me through Buy me a Coffee을 클릭하십시오.
마지막으로, 당신의 소셜 미디어 계정에 이 글을 마음대로 공유해서, 당신의 모든 관심자들이 이 글을 매우 유용하게 생각하도록 하세요.아래에 댓글을 남기는 것 외에 트위터를 통해 askRodney on Telegram과 연락할 수 있다.further ways to get in touch with Rodney Lab도 참조하십시오.제가 항상 SvelteKit as well as other topics. Also subscribe to the newsletter to keep up-to-date with our latest projects.에 글을 올려요.