検索
ホームページウェブフロントエンドフロントエンドQ&ANodejs はログイン確認コードを必要としません

インターネットの発展に伴い、検証コードは Web サイトのセキュリティを確保するための重要なツールになりました。多くの Web サイトでは、悪意のあるプログラムやロボット攻撃を防止し、Web サイトのセキュリティと信頼性を確保するために、機密性の高い操作、登録、ログインなどを実行するときに、ユーザーに確認コードの入力を要求しています。しかし、ユーザーエクスペリエンスや操作の利便性を向上させるために、ログインを必要としない検証コードサービスの提供が必要となる場面もあり、その際にJavaScriptが依存するNode.jsの優れた機能を発揮することができます。

Node.js の非同期アーキテクチャと JavaScript 構文の学習の容易さにより、Node.js は検証コード サービスにとって非常に実用的です。 Node.jsの機能により、ログイン不要の検証コードサービスを簡単に実装でき、導入やメンテナンスも非常に簡単です。

まず、検証コードの原理と構成を理解する必要があります。一般に、検証コード サービスには次のコンポーネントがあります。

  1. 検証コード ジェネレーター: 検証コード イメージを生成するために使用されます。
  2. 検証コード認識機能: 検証コード画像内の検証コード文字を識別するために使用されます。
  3. キャッシュ: 生成された検証コード文字と対応する検証結果を一時的に保存するために使用されます。

ユーザーが検証コードが必要なシナリオにある場合、サーバーはいくつかの検証コード文字を含む検証コード イメージのセットをランダムに生成します。後続の操作を続行するには、ユーザーは正しい確認コード文字を入力する必要があります。ユーザーが検証コードを入力すると、サーバーはユーザーが入力した検証コードの文字とキャッシュ内の対応する結果を比較し、ユーザーの入力が正しいかどうかを判断します。

Node.js では、サードパーティのライブラリを使用して検証コード サービスのさまざまなコンポーネントを実装できます。以下は、Canvas ライブラリと nodemailer ライブラリを使用して検証コード サービスを実装する例です。

まず、必要な依存ライブラリをインストールします:

npm install canvas nodemailer

次に、コードを記述します:

const express = require('express');
const Canvas = require('canvas');
const nodemailer = require('nodemailer');

const app = express();
const PORT = process.env.PORT || 3000;
const WIDTH = 100;
const HEIGHT = 50;

// 生成随机字符串
const randomString = () => {
  const CHARACTERS = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
  let result = '';
  for (let i = 0; i < 6; i++) {
    result += CHARACTERS.charAt(Math.floor(Math.random() * CHARACTERS.length));
  }
  return result;
};

// 生成验证码图片
const generateCaptcha = () => {
  const canvas = Canvas.createCanvas(WIDTH, HEIGHT);
  const ctx = canvas.getContext('2d');
  const captcha = randomString();
  ctx.clearRect(0, 0, WIDTH, HEIGHT);
  ctx.font = 'bold 25px sans-serif';
  ctx.fillStyle = '#333';
  ctx.fillText(captcha, 20, 35);
  return { captcha, dataURL: canvas.toDataURL() };
};

// 初始化缓存
const cache = {};

app.use(express.static('public'));

// 根路由返回验证码图片
app.get('/', (req, res) => {
  const captcha = generateCaptcha();
  cache[captcha.captcha] = true;
  res.send(`<img  src="/static/imghwm/default1.png"  data-src="${captcha.dataURL}"  class="lazy" alt="Nodejs はログイン確認コードを必要としません" >`);
});

// 验证码验证路由
app.get('/captcha', (req, res) => {
  const { captcha } = req.query;
  if (captcha && cache[captcha]) {
    delete cache[captcha];
    res.send({ success: true });
  } else {
    res.send({ success: false });
  }
});

// 发送邮件路由
app.get('/email', (req, res) => {
  const { email } = req.query;
  if (email) {
    const captcha = generateCaptcha();
    cache[captcha.captcha] = email;
    const transporter = nodemailer.createTransport({
      host: 'smtp.ethereal.email',
      port: 587,
      secure: false,
      auth: {
        user: testAccount.user,
        pass: testAccount.pass
      }
    });
    const message = {
      from: 'nodejs-captcha@example.com',
      to: email,
      subject: '验证码',
      text: captcha.captcha,
      html: `<img  src="/static/imghwm/default1.png"  data-src="${captcha.dataURL}"  class="lazy" alt="Nodejs はログイン確認コードを必要としません" >`
    };
    transporter.sendMail(message, (err, info) => {
      if (err) {
        console.log(err);
        res.send({ success: false });
      } else {
        console.log(info);
        res.send({ success: true });
      }
    });
  } else {
    res.send({ success: false });
  }
});

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

この例では、Canvas ライブラリを使用してサイズ 100x50 の検証を生成します。コードの写真。そして、nodemailer ライブラリを使用して、指定されたメールボックスに電子メールを送信します。電子メールには、生成された検証コード イメージが含まれます。同時に、サーバー側では、キャッシュ (ここでは JavaScript オブジェクトを使用します) を使用して、検証コードの文字と、対応する電子メール アドレスまたは検証結果を一時的に保存します。検証コード検証ルートでは、サーバーはユーザーが入力した検証コード文字とキャッシュ内の対応する結果を比較します。

ユーザーがルート ルートにアクセスすると、サーバーは新しい検証コード イメージを生成し、検証コード文字をキー名としてキャッシュに保存して、各検証コード文字の一意性を保証します。生成された検証コード イメージは、HTTP 経由でブラウザに直接返されます。ユーザーは、ログインしていなくても、このルートにアクセスして検証コード イメージを取得できます。

ユーザーが認証コードの認証を行う必要がある場合、サーバーは新しい認証コードのイメージを自動的に生成し、認証コードの文字をキー名として保存します。ユーザーは認証コードの文字を入力する必要があります。ユーザーが検証コード文字を入力すると、サーバーはそれをキャッシュ内の対応するキー名と比較して、それらが正しいかどうかを判断します。

検証コード サービスのセキュリティを向上させるために、より複雑な検証コード生成アルゴリズムとより厳密な検証ロジックを使用できます。同時に、実際の運用環境では、キャッシュのクリーニングやインターフェイスのアクセス頻度の制限などの詳細に注意を払う必要があります。

つまり、Node.js の使用は、ログインを必要としない検証コード サービスの実装に非常に適しています。上記の例はほんの一例であり、独自のニーズに応じてカスタマイズされた検証コード サービスを実装できます。

以上がNodejs はログイン確認コードを必要としませんの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
USESTATEの理解():React React Neact State Managementの包括的なガイドUSESTATEの理解():React React Neact State Managementの包括的なガイドApr 25, 2025 am 12:21 AM

usestate()isareacthookusedtomeStateinfunctionalComponents.1)itInitializeSandUpDatestate、2)colledatttheToplevelofComponents、3)canleadto'stalestate'ifnotusedly、and4)cancancancancancanbeoptimizeduptimizeduptimizedususecall -calleSuperesteSteSteSteSteSteSteSteSteStateSupteStateSuptateSuptatedates

Reactを使用することの利点は何ですか?Reactを使用することの利点は何ですか?Apr 25, 2025 am 12:16 AM

ReactisPopularduetoitsComponent Architecture、Virtualdom、Richecosystem、およびdeclarativenature.1)コンポーネントベースのarchitectureallowsforReusable anduipieces、改善様式および測定可能性。

Reactでのデバッグ:一般的な問題の特定と解決Reactでのデバッグ:一般的な問題の特定と解決Apr 25, 2025 am 12:09 AM

debugReactapplicationivivivity、EtheseStrategies:1)AddressPropdrillingWithContextapiorredux.2)HandLeasynchronousoperations withuthutateanduseeffect、Abortcontrollertopreventraceconditions.3)最適化合物を使用して、最適化合物を使用してください

ReactのUseState()とは何ですか?ReactのUseState()とは何ですか?Apr 25, 2025 am 12:08 AM

UseState()inReactallowsstateManagementInFunctionalComponents.1)itsimplifiesstateManagement、makeCodemoreconcise.2)usetheprevcountFunctionToupDateStateBasedTateBasedTateBadeStateValue、AvolidingStalestateSues.3)

useState()vs。usereducer():州のニーズに合った適切なフックを選択するuseState()vs。usereducer():州のニーズに合った適切なフックを選択するApr 24, 2025 pm 05:13 PM

ChooseuseState()forsimple,independentstatevariables;useuseReducer()forcomplexstatelogicorwhenstatedependsonpreviousstate.1)useState()isidealforsimpleupdatesliketogglingabooleanorupdatingacounter.2)useReducer()isbetterformanagingmultiplesub-valuesorac

UseState()を使用して状態を管理する:実用的なチュートリアルUseState()を使用して状態を管理する:実用的なチュートリアルApr 24, 2025 pm 05:05 PM

UseStateは、州の管理を簡素化し、コードをより明確にし、読みやすくし、Reactの宣言的な性質と一致するため、クラスコンポーネントやその他の州管理ソリューションよりも優れています。 1)UseStateを使用すると、状態変数を関数コンポーネントに直接宣言することができます。2)フックメカニズムの再レンダリング中に状態を覚えています。

UseState()を使用する時期と、代替の州管理ソリューションを検討するタイミングUseState()を使用する時期と、代替の州管理ソリューションを検討するタイミングApr 24, 2025 pm 04:49 PM

useUsestate()forlocalcomponentStatemanagement; compleartinative forglogic、orperformanceissues.1)useidealforsimple、localstate.2)useglobalStateSolutionSolutionSuxorContextForSharedState.3)OptForreDuxtormobxobxobxobforexSt

Reactの再利用可能なコンポーネント:コードの維持可能性と効率の向上Reactの再利用可能なコンポーネント:コードの維持可能性と効率の向上Apr 24, 2025 pm 04:45 PM

再利用することは、codecodemaintainabilityを抑制することを再生します

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

Safe Exam Browser

Safe Exam Browser

Safe Exam Browser は、オンライン試験を安全に受験するための安全なブラウザ環境です。このソフトウェアは、あらゆるコンピュータを安全なワークステーションに変えます。あらゆるユーティリティへのアクセスを制御し、学生が無許可のリソースを使用するのを防ぎます。

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール