ログインページ

Last reviewed: 3 months ago

このチュートリアルでは、Cloudflare Turnstileを統合してログインページを保護する方法を説明します。クライアント側でTurnstileウィジェットを実装し、サーバー側でsiteverify APIを介してTurnstileトークンを検証する方法を学びます。

始める前に

Cloudflareアカウントを持っている必要があります。
ログインまたはサインアップページを持つWebアプリケーションが必要です。
HTMLおよび選択したサーバーサイド言語（Node.jsやPythonなど）の基本的な知識が必要です。

Turnstileのsitekeyとsecret keyを取得する

Cloudflareダッシュボード ↗にログインし、アカウントを選択します。
Turnstileに移動し、新しいTurnstileウィジェットを作成します。
次のステップで使用するためにsitekeyとsecret keyをコピーします。

HTMLフォームにTurnstileウィジェットを追加する

ログインフォームにTurnstileウィジェットを追加します。
YOUR-SITE-KEYをCloudflareからのsitekeyに置き換えます。

<!DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <title>ログインページ</title>
    <script src="https://challenges.cloudflare.com/turnstile/v0/api.js" async defer></script>
</head>
<body>
    <form id="login-form" action="/login" method="POST">
        <input type="text" name="username" placeholder="ユーザー名" required>
        <input type="password" name="password" placeholder="パスワード" required>

        <!-- Turnstileウィジェット -->
        <div class="cf-turnstile" data-sitekey="YOUR-SITE-KEY"></div>

        <button type="submit">ログイン</button>
    </form>
</body>
</html>

サーバー側でTurnstileトークンを検証する

クライアント側から送信されたTurnstileトークンを検証する必要があります。以下はNode.jsの例です。

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

app.use(bodyParser.urlencoded({ extended: true }));

app.post('/login', async (req, res) => {
    const turnstileToken = req.body['cf-turnstile-response'];
    const secretKey = 'your-secret-key';

    try {
        const response = await axios.post('https://challenges.cloudflare.com/turnstile/v0/siteverify', null, {
            params: {
                secret: secretKey,
                response: turnstileToken
            }
        });

        if (response.data.success) {
            // トークンが有効です。ログインを続行します。
            const username = req.body.username;
            const password = req.body.password;
            // ログインロジックをここに記述します
            res.send('ログイン成功');
        } else {
            res.status(400).send('Turnstile検証に失敗しました');
        }
    } catch (error) {
        res.status(500).send('Turnstileトークンの検証中にエラーが発生しました');
    }
});

app.listen(3000, () => {
    console.log('サーバーがポート3000で実行中です');
});

重要な考慮事項

Turnstileトークンの検証を正しく処理することが重要です。このセクションでは、留意すべきいくつかの重要なポイントを説明します。

資格情報入力後にトークンを検証する

ユーザーが資格情報を入力し、あなたのウェブサイトまたはアプリケーションにログインを選択した後にTurnstileトークンを検証することを確認してください。
ユーザーが資格情報を入力する前にトークンを検証すると、悪意のある訪問者がログイン資格情報を再入力することで保護を回避できる可能性があります。

適切なフローの実装

ユーザーがログインフォームを送信するとき、ログイン資格情報とTurnstileトークンの両方をサーバーに送信します。
サーバー側で、最初にTurnstileトークンを検証します。
検証の応答に基づいて、ログイン資格情報の確認を続行するかどうかを決定します。

Cloudflare Dashboard Discord Community Learning Center Support Portal

Cookie Settings