H5 网页如何实现人脸核身？无需原生开发的方案

前端 → 业务服务端 → 慧眼服务端
  ↓        ↓           ↓
请求核身  获取ticket   返回h5faceId
  ↓        ↓           ↓
计算签名 ← 返回签名参数
  ↓
跳转核身页面
  ↓
用户完成活体检测
  ↓
回调业务页面（带token）
  ↓
服务端拉取结果

1. 生成一个32位的随机字符串 nonce（字母+数字）
2. 将 appId、userId、orderNo、version、h5faceId、ticket、nonce 共7个参数的值进行字典序排序
3. 将排序后的所有参数字符串拼接成一个字符串
4. 对拼接后的字符串进行 SHA1 编码，得到40位签名 sign

import hashlib
import random
import string

def generate_nonce(length=32):
    """生成32位随机字符串"""
    chars = string.ascii_letters + string.digits
    return ''.join(random.choice(chars) for _ in range(length))

def generate_sign(params):
    """
    生成签名
    params: dict，包含 appId, userId, orderNo, version, h5faceId, ticket, nonce
    """
    # 1. 按字典序排序
    sorted_keys = sorted(params.keys())

    # 2. 拼接所有参数值
    concatenated = ''.join(params[key] for key in sorted_keys)

    # 3. SHA1 编码
    sign = hashlib.sha1(concatenated.encode('utf-8')).hexdigest().upper()

    return sign

# 示例参数
params = {
    'appId': 'appId001',
    'userId': 'userID19959248596551',
    'orderNo': 'aabc1457895464',
    'version': '1.0.0',
    'h5faceId': 'bwiwe1457895464',
    'ticket': 'zxc9Qfxlti9iTVgHAjwvJdAZKN3nMuUhrsPdPlPVKlcyS50N6tlLnfuFBPIucaMS',
    'nonce': 'kHoSxvLZGxSoFsjxlbzEoUzh5PAnTU7T'
}

sign = generate_sign(params)
print(f"签名: {sign}")
# 输出: 4E9DFABF938BF37BDB7A7DC25CCA1233D12D986B

const crypto = require('crypto');

function generateSign(params) {
    // 1. 按字典序排序
    const sortedKeys = Object.keys(params).sort();

    // 2. 拼接所有参数值
    const concatenated = sortedKeys.map(key => params[key]).join('');

    // 3. SHA1 编码
    const sign = crypto.createHash('sha1').update(concatenated).digest('hex').toUpperCase();

    return sign;
}

// 示例参数
const params = {
    appId: 'appId001',
    userId: 'userID19959248596551',
    orderNo: 'aabc1457895464',
    version: '1.0.0',
    h5faceId: 'bwiwe1457895464',
    ticket: 'zxc9Qfxlti9iTVgHAjwvJdAZKN3nMuUhrsPdPlPVKlcyS50N6tlLnfuFBPIucaMS',
    nonce: 'kHoSxvLZGxSoFsjxlbzEoUzh5PAnTU7T'
};

const sign = generateSign(params);
console.log(`签名: ${sign}`);

# Python 示例：调用 geth5faceid 接口
import requests

def get_h5_face_id(app_id, user_id, order_no, name, id_card):
    """
    上送身份信息，获取 h5faceId
    """
    url = "https://miniprogram-kyc.tencentcloudapi.com/api/server/h5/geth5faceid"

    # 生成签名（这里简化，实际需要按上述方法生成）
    nonce = generate_nonce()
    params = {
        'appId': app_id,
        'userId': user_id,
        'orderNo': order_no,
        'version': '1.0.0',
        'name': name,
        'idCard': id_card,
        'nonce': nonce,
        'ticket': get_nonce_ticket(user_id)  # 从腾讯云服务获取
    }
    params['sign'] = generate_sign(params)

    response = requests.post(url, json=params)
    result = response.json()

    if result.get('code') == 0:
        return {
            'h5faceId': result['data']['h5faceId'],
            'optimalDomain': result['data'].get('optimalDomain', 'kyc1.qcloud.com')
        }
    else:
        raise Exception(f"获取h5faceId失败: {result.get('msg')}")

def get_nonce_ticket(user_id):
    """
    获取 NONCE 类型的 ticket
    有效期120秒，一次性有效
    """
    # 调用腾讯云服务获取 ticket
    # 具体接口请参考官方文档
    url = "https://miniprogram-kyc.tencentcloudapi.com/api/server/getTicket"

    params = {
        'appId': APP_ID,
        'userId': user_id,
        'type': 'NONCE'
    }

    response = requests.post(url, json=params)
    result = response.json()

    if result.get('code') == 0:
        return result['data']['ticket']
    else:
        raise Exception(f"获取ticket失败: {result.get('msg')}")

/**
 * 构建 H5 人脸核身 URL
 */
function buildVerifyUrl(params) {
    const { appId, version, nonce, orderNo, h5faceId, userId, sign, callbackUrl, optimalDomain } = params;

    // 对回调地址进行 URL Encode
    const encodedUrl = encodeURIComponent(callbackUrl);

    // 构建核身 URL
    const domain = optimalDomain || 'kyc1.qcloud.com';
    const verifyUrl = `https://${domain}/api/pc/login?` +
        `appId=${appId}` +
        `&version=${version}` +
        `&nonce=${nonce}` +
        `&orderNo=${orderNo}` +
        `&h5faceId=${h5faceId}` +
        `&url=${encodedUrl}` +
        `&userId=${userId}` +
        `&sign=${sign}`;

    return verifyUrl;
}

/**
 * 启动 H5 人脸核身
 */
async function startFaceVerify(userId, name, idCard) {
    try {
        // 1. 请求服务端获取核身参数
        const res = await fetch('/api/getFaceVerifyParams', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ userId, name, idCard })
        });

        const data = await res.json();
        if (data.code !== 0) {
            throw new Error(data.msg || '获取核身参数失败');
        }

        const { appId, version, nonce, orderNo, h5faceId, sign, optimalDomain } = data.data;

        // 2. 构建回调地址
        const callbackUrl = `${window.location.origin}/pages/verify-result`;

        // 3. 构建核身 URL 并跳转
        const verifyUrl = buildVerifyUrl({
            appId, version, nonce, orderNo, h5faceId, userId, sign, callbackUrl, optimalDomain
        });

        // 注意：不能直接用 <a> 标签跳转，会导致签名被预加载而失效
        // 应使用以下方式跳转
        window.location.href = verifyUrl;

    } catch (error) {
        console.error('启动核身失败:', error);
        alert(error.message);
    }
}

// 用户点击按钮触发
document.getElementById('btn-verify').addEventListener('click', () => {
    const userId = document.getElementById('user-id').value;
    const name = document.getElementById('name').value;
    const idCard = document.getElementById('id-card').value;

    if (!userId || !name || !idCard) {
        alert('请填写完整信息');
        return;
    }

    startFaceVerify(userId, name, idCard);
});

// 在回调页面 /pages/verify-result 中处理结果
window.addEventListener('DOMContentLoaded', () => {
    // 从 URL 中获取 token 参数
    const urlParams = new URLSearchParams(window.location.search);
    const token = urlParams.get('token');

    if (token) {
        // 核身完成，通知服务端拉取结果
        getVerifyResult(token);
    } else {
        // 未获取到 token，可能用户中途退出
        showErrorMessage('未完成核身');
    }
});

async function getVerifyResult(token) {
    try {
        const res = await fetch('/api/getVerifyResult', {
            method: 'POST',
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify({ token })
        });

        const data = await res.json();

        if (data.code === 0 && data.data.success) {
            // 核身成功
            showSuccessPage(data.data);
        } else {
            // 核身失败
            showErrorMessage(data.data?.message || '核身未通过');
        }
    } catch (error) {
        console.error('获取结果失败:', error);
        showErrorMessage('网络异常，请重试');
    }
}