# Cloudflare Turnstileを使った非表示CAPTCHAの実装例

## 1-1. 目次

1. はじめに
   - 1-2. CAPTCHAの重要性
   - 1-3. Cloudflare Turnstileとは
2. 1-4. 準備事項
   - 1-5. 必要なアカウントと設定
   - 1-6. 必要なツールとライブラリ
3. 1-7. Cloudflare Turnstileのセットアップ
   - 1-8. サイトキーとシークレットキーの取得
4. 1-9. フロントエンドへの実装
   - 1-10. HTMLとJavaScriptの設定例
5. 1-11. バックエンドへの実装
   - 1-12. サーバーサイドでの検証
6. 1-13. まとめ

## 1-2. はじめに

CAPTCHAは、不正な自動アクセスを防ぎ、セキュリティを強化するための重要なツールです。特にボットからの攻撃に対する防御手段として、多くのWebサイトで導入されています。しかし、ユーザー体験を損ないかねない煩わしい手続きが難点でもあります。ここで、Cloudflareという人気のCDN（コンテンツ配信ネットワーク）提供会社が提供する非表示CAPTCHA「Turnstile」が頼りになります。

### 1-3. CAPTCHAの重要性

オンラインセキュリティの観点から、不正アクセスやスパムメール、ボットによる自動攻撃を防ぐためにCAPTCHAは欠かせません。特に、Webフォームにおける情報収集や認証手続きの場面では、CAPTCHAがあることで安全性を一層高めることができます。

### 1-4. Cloudflare Turnstileとは

Cloudflare Turnstileは、ユーザーの介入を必要としない非表示CAPTCHAソリューションです。ユーザーの体験を損ねることなく、ボットからの攻撃を防ぎ、セキュリティを強化することができます。Turnstileは自動的にユーザーの行動を評価し、必要に応じてCAPTCHAを発動させるインテリジェントな機能を有しています。視覚的な要素が少なく、バックグラウンドで動作するためユーザー体験を損ねることもありません。

## 1-5. 準備事項

### 1-6. 必要なアカウントと設定

1. **Cloudflareアカウント** - Cloudflare Turnstileを使用するには、まずCloudflareのアカウントを作成し、サイトに追加しておく必要があります。
2. **APIキーの取得** - CloudflareのダッシュボードからTurnstileのAPIキーを取得します。これには、サイトキーとシークレットキーがあります。

### 1-7. 必要なツールとライブラリ

- **プログラミング言語** - HTML、JavaScript、サーバーサイドスクリプト（例：Node.js、Python、PHP）
- **Cloudflareライブラリ** - Cloudflareの提供するライブラリとAPIを活用します。

## 1-8. Cloudflare Turnstileのセットアップ

### 1-9. サイトキーとシークレットキーの取得

1. Cloudflareダッシュボードでターゲットサイトを選択します。
2. 「Turnstile」セクションから、「新しいサイト」を追加します。
3. サイトキーとシークレットキーを表示し、フロントエンドとバックエンドの設定に使用します。

## 1-10. フロントエンドへの実装

非表示のバッジを表示し、ユーザーの操作を必要としない設定を行います。

### 1-11. HTMLとJavaScriptの設定例

まず、HTMLファイルにTurnstileのスクリプトを読み込みます。

![img](/mosaic-code.jpg)

次に、HTMLフォームに`div`要素を追加し、Turnstileを設定します。

![img](/mosaic-code.jpg)

このスクリプトを追加することで、Cloudflareが提供するAPIにアクセスし、適切なトークンを自動的に作成します。

## 1-12. バックエンドへの実装

サーバーサイドでのトークン検証も忘れてはいけません。この検証によって、本当に人間が操作しているかどうかをサーバー側で判別します。

### 1-13. サーバーサイドでの検証

以下に、Node.jsによる実装例を示します。特にExpressフレームワークを使用しています。

![img](/mosaic-code.jpg)

ここでは、CloudflareのAPIを使用して返されたトークンを検証します。この検証を通過すれば、CAPTCHAとして認識でき、ユーザーが人間であることが確認できます。

## 1-14. まとめ

Cloudflare Turnstileは、ユーザーの操作を必要としない次世代の非表示CAPTCHAソリューションです。エンジニアが引き続き優れたユーザー体験を提供しつつ、セキュリティを強化するための有効なツールとなります。バックエンドでのトークンの検証をしっかり行い、信頼性の高いサイト運営を目指しましょう。 [cv:issue_marketplace_engineer]

# Cloudflare Turnstileを使った非表示CAPTCHAの実装例

## 1-1. 目次

1. はじめに
   - 1-2. CAPTCHAの重要性
   - 1-3. Cloudflare Turnstileとは
2. 1-4. 準備事項
   - 1-5. 必要なアカウントと設定
   - 1-6. 必要なツールとライブラリ
3. 1-7. Cloudflare Turnstileのセットアップ
   - 1-8. サイトキーとシークレットキーの取得
4. 1-9. フロントエンドへの実装
   - 1-10. HTMLとJavaScriptの設定例
5. 1-11. バックエンドへの実装
   - 1-12. サーバーサイドでの検証
6. 1-13. まとめ

## 1-2. はじめに

CAPTCHAは、不正な自動アクセスを防ぎ、セキュリティを強化するための重要なツールです。特にボットからの攻撃に対する防御手段として、多くのWebサイトで導入されています。しかし、ユーザー体験を損ないかねない煩わしい手続きが難点でもあります。ここで、Cloudflareという人気のCDN（コンテンツ配信ネットワーク）提供会社が提供する非表示CAPTCHA「Turnstile」が頼りになります。

### 1-3. CAPTCHAの重要性

オンラインセキュリティの観点から、不正アクセスやスパムメール、ボットによる自動攻撃を防ぐためにCAPTCHAは欠かせません。特に、Webフォームにおける情報収集や認証手続きの場面では、CAPTCHAがあることで安全性を一層高めることができます。

### 1-4. Cloudflare Turnstileとは

Cloudflare Turnstileは、ユーザーの介入を必要としない非表示CAPTCHAソリューションです。ユーザーの体験を損ねることなく、ボットからの攻撃を防ぎ、セキュリティを強化することができます。Turnstileは自動的にユーザーの行動を評価し、必要に応じてCAPTCHAを発動させるインテリジェントな機能を有しています。視覚的な要素が少なく、バックグラウンドで動作するためユーザー体験を損ねることもありません。

## 1-5. 準備事項

### 1-6. 必要なアカウントと設定

1. **Cloudflareアカウント** - Cloudflare Turnstileを使用するには、まずCloudflareのアカウントを作成し、サイトに追加しておく必要があります。
2. **APIキーの取得** - CloudflareのダッシュボードからTurnstileのAPIキーを取得します。これには、サイトキーとシークレットキーがあります。

### 1-7. 必要なツールとライブラリ

- **プログラミング言語** - HTML、JavaScript、サーバーサイドスクリプト（例：Node.js、Python、PHP）
- **Cloudflareライブラリ** - Cloudflareの提供するライブラリとAPIを活用します。

## 1-8. Cloudflare Turnstileのセットアップ

### 1-9. サイトキーとシークレットキーの取得

1. Cloudflareダッシュボードでターゲットサイトを選択します。
2. 「Turnstile」セクションから、「新しいサイト」を追加します。
3. サイトキーとシークレットキーを表示し、フロントエンドとバックエンドの設定に使用します。

## 1-10. フロントエンドへの実装

非表示のバッジを表示し、ユーザーの操作を必要としない設定を行います。

### 1-11. HTMLとJavaScriptの設定例

まず、HTMLファイルにTurnstileのスクリプトを読み込みます。

```html

<script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
```

次に、HTMLフォームに`div`要素を追加し、Turnstileを設定します。

```html

<form id="example-form" action="/submit-form" method="POST">
  <div class="cf-turnstile" data-sitekey="YourSiteKey"></div>
  <button type="submit">送信</button>
</form>
```

このスクリプトを追加することで、Cloudflareが提供するAPIにアクセスし、適切なトークンを自動的に作成します。

## 1-12. バックエンドへの実装

サーバーサイドでのトークン検証も忘れてはいけません。この検証によって、本当に人間が操作しているかどうかをサーバー側で判別します。

### 1-13. サーバーサイドでの検証

以下に、Node.jsによる実装例を示します。特にExpressフレームワークを使用しています。

```javascript
const express = require('express');
const bodyParser = require('body-parser');
const axios = require('axios');

const app = express();
app.use(bodyParser.json());

const SECRET_KEY = 'YourSecretKey';

app.post('/submit-form', async (req, res) => {
  const token = req.body['cf-turnstile-response'];

  // CloudflareのTurnstile APIでトークンを検証
  const response = await axios.post('https://challenges.cloudflare.com/turnstile/v0/siteverify', null, {
    params: {
      secret: SECRET_KEY,
      response: token,
    }
  });

  if (response.data.success) {
    res.send('Captcha passed, you are human!');
  } else {
    res.status(400).send('Captcha failed, you are a bot!');
  }
});

app.listen(3000, () => {
  console.log('Server is running on port 3000');
});
```

ここでは、CloudflareのAPIを使用して返されたトークンを検証します。この検証を通過すれば、CAPTCHAとして認識でき、ユーザーが人間であることが確認できます。

## 1-14. まとめ

Cloudflare Turnstileは、ユーザーの操作を必要としない次世代の非表示CAPTCHAソリューションです。エンジニアが引き続き優れたユーザー体験を提供しつつ、セキュリティを強化するための有効なツールとなります。バックエンドでのトークンの検証をしっかり行い、信頼性の高いサイト運営を目指しましょう。

Cloudflare Turnstileを使った非表示CAPTCHAの実装例

1-1. 目次

続きを読むには単価診断を受けてください（30秒）