交互门槛演示(弹窗 / 激励读秒 / 认证码 / 人机校验) v1.4.3

0 0 2 2026-06-10
PHP Simplified Chinese (3/5)
Author:PHPDisk Team

Overview

这是一个PHP单页演示项目,集成了进入页自动弹窗、激励式读秒、认证码门槛以及七种人机校验(滑动、转正、单字点选顺序、拼图缺口、计算题、图标点选、语序词组)。每项能力采用卡片布局,校验结果通过顶部Tips反馈,并在弹窗内与页底JSON调试区同步显示。适用于下载站、活动领奖页等需要轻量防刷的场景,无外部人机SaaS依赖,使用PHP Session + JSON API演示多类门槛的出题、校验与业务回调流程。

Source details

交互门槛演示(弹窗 / 激励读秒 / 认证码 / 人机校验)

PHP 5.6~8.x 单页演示:在同一页面内体验 进入页自动弹窗激励式读秒认证码门槛,以及 七种人机校验(滑动、转正、单字点选顺序、拼图缺口、计算题、图标点选、语序词组)。每项能力采用「操作区 + 说明区」卡片布局;校验与业务回调结果通过 顶部 Tips 轻提示 反馈,并在对应弹窗内与页底 JSON 调试区 同步展示最近一次接口响应,便于联调。页脚展示 IAG_APP_VERSION

程序版本号:常量 IAG_APP_VERSION(默认 1.4.3,定义于 inc/iag_version.php)。复制 config.example.phpconfig.php 后可在其中 define('IAG_APP_VERSION', 'x.y.z') 覆盖;iag_common.php 先加载 config.php,再加载 iag_version.php(未定义时才使用默认值)。

应用场景

  • 下载站、活动领奖页、公开表单提交前,需要 轻量防刷 / 防机器人合规或活动文案曝光(用户已阅读规则、公告等)。
  • 产品或运营需要 并排对比多种交互式验证码形态,在转化率与风控强度之间选型。
  • 后端/前端联调时,需要 可复制的 challenge / verify 契约 与 Session 存答案的参考实现,再接入自有业务网关。

用户痛点

  • 仅依赖传统图形验证码易被 OCR;纯读秒无服务端确认又无法阻挡脚本批量请求。
  • 第三方人机 SaaS 有成本、合规与地域策略限制;自研若缺少完整示例,出题与校验接口容易不一致。
  • 多种门槛(弹窗、激励、口令、滑动/拼图等)分散在各处,难以在一页内评估 UX 与对接成本。

本项目解决的问题

  • 无外部人机 SaaS 依赖 的前提下,用 PHP Session + JSON API 演示多类门槛的出题、校验与业务回调流程(演示级,生产需加固随机源、限流、HTTPS、防重放与风控)。
  • 单页集成十种交互模式,附 浮动本页导航(可拖动、可收起)与各功能的整合说明,降低从演示到业务页的迁移成本。
  • 激励读秒与认证码提供独立 api/ 入口,人机类统一 *_challenge.php / *_verify.php 配对,响应体含 version 字段与演示页一致。

项目价值说明

  • 作为 UX 与风控方案选型沙盘:可只抽取某一类挑战接入真实下载/领奖网关。
  • 作为 接口契约样板:Session 存答案、前端只提交用户操作量(坐标、角度、点选序列、token 等),便于对照改造。
  • 演示配置集中在 config.php,默认认证码、读秒时长、跳转 URL、点选字串等均可改,避免改散在多处源码。

功能一览

序号 页面锚点 能力 主要接口 / 说明
#sec-welcome 进入页自动弹窗 纯前端 Bootstrap 模态 + 倒计时;IAG_AUTO_MODAL_SECONDS
#sec-reward 激励式读秒 归零后 POST api/reward_gate_complete.php;取消有二次确认与「无法获得奖励」提示
#sec-auth 认证码门槛 POST api/verify_code.php;成功跳转 IAG_PROTECTED_TARGET_URL
#sec-slide 滑动认证 GET slide_challenge.php · POST slide_verify.php
#sec-rotate 转正认证 GET rotate_challenge.php · POST rotate_verify.php
#sec-click 单字点选顺序 GET click_challenge.php · POST click_verify.php
#sec-jigsaw 拼图缺口 GET jigsaw_challenge.php · POST jigsaw_verify.php(目标偏移仅存 Session)
#sec-math 计算题 GET math_challenge.php · POST math_verify.php
#sec-icon 图标点选 GET icon_challenge.php · POST icon_verify.php
#sec-word 语序词组点选 GET word_challenge.php · POST word_verify.php

人机校验依赖 PHP Session(IAG_SESSION_NAME,默认 IAGCAPSESS),浏览器须允许本站 Cookie。

快速开始

  1. 将本目录部署到 Web 可访问路径(强烈建议 HTTPS)。
  2. 复制 config.example.phpconfig.php,按需修改读秒秒数、认证码、跳转 URL、Session 名、滑动/拼图尺寸、点选字串等(详见文件内注释)。
  3. 浏览器打开 index.php;使用右侧 本页导航 跳转到各功能块,点击操作区按钮打开对应弹窗体验。
  4. 联调时查看:页面顶部 Tips、各弹窗内深色 JSON 调试块、激励读秒区块与 #sec-captcha-api 页底汇总。

目录结构

interaction-gate-php-cn-sample/
├── index.php              # 演示首页(布局、弹窗、前端逻辑)
├── config.example.php     # 配置项说明与示例(复制为 config.php)
├── config.php             # 本地配置(可按需加入仓库 .gitignore)
├── inc/
│   ├── iag_common.php     # 加载配置、默认常量、iag_h() 转义
│   ├── iag_version.php    # IAG_APP_VERSION 默认值
│   └── iag_session.php    # Session 启动(人机 API 使用)
└── api/
    ├── reward_gate_complete.php   # 激励读秒完成(仅 POST)
    ├── verify_code.php            # 认证码校验
    ├── slide_challenge.php / slide_verify.php
    ├── rotate_challenge.php / rotate_verify.php
    ├── click_challenge.php / click_verify.php
    ├── jigsaw_challenge.php / jigsaw_verify.php
    ├── math_challenge.php / math_verify.php
    ├── icon_challenge.php / icon_verify.php
    └── word_challenge.php / word_verify.php

配置项摘要

常量 含义 默认(未在 config.php 定义时)
IAG_APP_VERSION 程序版本 1.4.3inc/iag_version.php
IAG_AUTO_MODAL_SECONDS 自动弹窗倒计时(秒) 5
IAG_REWARD_GATE_SECONDS 激励读秒时长(秒) 8
IAG_REWARD_TARGET_URL 读秒完成后「前往目标页」地址 https://www.phpdisk.com/
IAG_PROTECTED_CODE 认证码(演示静态比对) 8888
IAG_PROTECTED_TARGET_URL 认证成功跳转地址 iag_common.php
IAG_SESSION_NAME Session 名称 IAGCAPSESS
IAG_SLIDE_TRACK_PX / IAG_SLIDE_KNOB_PX / IAG_SLIDE_TOLERANCE_PX 滑动/拼图轨道与容差 280 / 44 / 10
IAG_ROTATE_TOLERANCE_DEG 转正角度容差(度) 12
IAG_CLICK_CHAR_ORDER 单字点选顺序(竖线分隔) 云|验|证|码
IAG_WORD_ORDER 语序词组(竖线分隔) 私有云|安全|存储
IAG_MATH_MAX_OPERAND 计算题操作数上界 12

接入与生产注意

  • 认证码:演示为服务端静态比对 IAG_PROTECTED_CODE;生产请改为 OTP、登录态、一次性 Token 等,并避免由前端任意指定跳转 URL。
  • 滑动认证:演示接口返回 slot_left 便于渲染凹槽;生产应改为拼图缺口或 Canvas,勿明文下发目标像素
  • 拼图缺口:目标水平偏移仅存 Session,挑战接口返回 SVG 背景,不返回 slot_left
  • 激励读秒reward_gate_complete.php 返回演示用 reward_grant_token;生产在此实现发奖、记账,并可对 gate_seconds 做严格校验或签名校验。
  • 人机共性:答案存 Session,校验后应销毁或轮换;需配合 HTTPS、限流、IP/设备风控与防重放。

技术栈

  • 后端:PHP 5.6~8.x,json_encode JSON API,inc/iag_session.php 管理 Session。
  • 前端:Bootstrap 5.3、Boxicons、jQuery(CDN);无构建步骤。

Project: PHPDisk - 私有云存储解决方案
This is NOT a freeware, use is subject to license terms.
Website: https://www.phpdisk.com
Author: PHPDisk Team ( admin@phpdisk.com )
Copyright (C) 2008-2083 PHPDisk Team. All Rights Reserved.

如需定制功能,或查看更多示例与源码索引,请访问:https://code.phpdisk.com/?utm_source=interaction-gate-php-cn-sample

Archive contents

Loading file tree…
No files to display in this archive.
    Too many files to show. Displaying a partial listing.

    Comments

    No comments yet—be the first!