网页登录方式详解：从常规到人脸识别-CSDN博客

本文链接：https://blog.csdn.net/classOurself/article/details/123731105

本文详细介绍了六种网页登录模式：正常登录、委托登录、验证码登录、扫码登录、单点登录以及人脸识别登录。正常登录涉及用户信息收集、校验和token获取；委托登录增加了一层主账号与委托人之间的交互；验证码登录通过第三方发送和验证手机验证码；扫码登录利用二维码状态变化和token认证；单点登录通过特定URL参数实现跨系统身份验证；人脸识别登录结合了媒体设备访问、人脸识别技术和后台比对。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1. 正常登录

收集用户信息、校验、请求接口后台校验得到token

2. 委托登录

初始登录模式相同，中间加了一层，初始登录请求来主账号信息（含token）及委托人数组，再使用委托人信息登录（委托人token）或者跳过（主账号token）。验证码通过transform、rotato实现。

3. 验证码登录

点击发送验证码将对应手机号发送到第三方，第三方会将验证码转发给手机及相应后台，点击登陆验证对应手机号及验证码信息。

4. 扫码登录

二维码登录原理主要基于token的认证机制+二维码状态变化实现
1、二维码状态有三种:待扫描、已扫描待确认、已确认;
2、待扫描:PC端携带设备信息向服务端发送请求,服务端生成二维码ID与设备信息进行绑定,将二维码ID返回给PC端,PC端已二维码的形式显示二维码;
3、PC端通过轮询的方式向服务端查询二维码的状态是否发生变化;
4、移动端扫描PC端二维码,获取到二维码ID,移动端带二维码ID+移动端身份信息(token)发送给服务端,服务端验证身份信息通过后,将二维码ID与身份信息绑定,并生成临时token返回给移动端,二维码状态变为已扫描待确认;
5、移动端确认登录,并携带临时token请求服务端,服务端验证临时token通过后,改变二维码状态为已确认并生成PCtoken,PC端通过轮询知二维码状态.当为已确认状态时,返回PCtoken,后续PC端通过token可以返回API;

5. 单点登录

http://IP:PORT/icore/sso/login?ssou=usercode&ssomd5=md5&ssol=zh_CN&ssourl=MDM功能url

根据用户名当前时间及sshkey经过md5加密及用户名（该用户必须是两个系统公用）、多语言、页面url请求回来一个包含token的html页面，页面中的js执行存储token及跳转页面url，有用户名加token则可以访问主数据页面（无需密码）。

6. 人脸识别登录（tracking.js）

访问用户媒体设备(navigator.mediaDevices.getUserMedia)–>成功则拿到对应流放入video标签的srcObject–>video上的onloadedmetadata播放play及人脸识别(调用tracking及其track监听)–>拍照(refCanvas用来画图：拍照的照片)得到照片信息发送给后台–>后台百度ai比对

<!DOCTYPE html>
<html lang="en" style="font-size: 37.5px">
  <head>
    <meta charset="utf-8" />
    <meta content="IE=edge" http-equiv="X-UA-Compatible" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <title>百度ai</title>
    <script src="./libs/tracking-min.js"></script>
    <script src="./libs/face-min.js"></script>
    <!-- <script src="./libs/jquery-3.6.0.min.js" type="text/javascript"></script> -->
    <script src="./libs/vue.js" type="text/javascript"></script>
  </head>
  <style>
    .face-capture {
     
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      justify-content: space-between;
    }
    .face-capture video,
    .face-capture canvas {
     
      position: fixed;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 2;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .face-capture canvas {
     
      z-index: 2;
    }
    .face-capture .img-cover {
     
      position: absolute;
      height: 10rem;
      width: 10rem;
      z-index: 5;
      margin-top: -2rem;
      border: 1px solid red;
    }
    .face-capture .rect {
     
      border: 2px solid #0aeb08;
      position: fixed;
      z-index: 3;
    }
    .face-capture .control-container {
     
      margin-top: 10rem;
      position: relative;
      width: 100%;
      height: 100%;
      object-fit: cover;
      z-index: 4;
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .face-capture .title {
     
      text-align: center;
      /* color: white; */
      font-size: 18px;
      margin-top: 3rem;
    }
    .face-capture .close {
     
      width: 0.8rem;
      height: 0.8rem;
    }
  </style>
  <body>

几种登录模式