用户身份确认页面

页面概述

用户身份确认页面 (page-user-confirm) 是一个受企微路由守卫保护的单页面应用，用于展示当前企业微信用户的详细身份信息，并允许用户确认其身份。

import { WxworkSDK } from 'fmode-ng/core';
import { FmodeParse } from 'fmode-ng/parse';
import { WxworkAuthGuard } from 'fmode-ng';

访问路径

路径1: /:cid/auth/user-confirm
路径2: /:cid/auth/:appId/user-confirm

示例:

脑控科技身份确认 https://app.fmode.cn/dev/crm/auth/E4KpGvTEto/user-confirm
映三色身份确认 https://app.fmode.cn/dev/crm/auth/cDL6R1hgSi/user-confirm

路由守卫

使用 WxworkAuthGuard 企微路由守卫，确保：

获取路由参数:
- cid: 公司帐套ID (Company.objectId)
- appId: 应用ID (可选)
识别用户身份:
- 企业员工: 通过 UserId 识别，关联到 Profile 表
- 外部用户: 通过 external_userid 或 OpenId 识别，关联到 UserSocial 表
数据持久化:
- localStorage 存储位置: {{cid}}/USERINFO
- 获取函数: wxsdk.getUserinfo()

功能模块

1. 用户信息加载

Profile (企业员工)

从 Parse Server 的 Profile 表查询用户信息，查询条件：

userId: 企业员工的微信UserId
company: Pointer 指向当前 Company (cid)

展示字段:

name: 姓名
avatar: 头像
mobile: 手机号
email: 邮箱
department: 部门
position: 职位
corpName: 企业名称
isVerified: 身份确认状态
userId: 员工ID

UserSocial (外部用户)

从 Parse Server 的 UserSocial 表查询用户信息，查询条件：

externalUserId: 外部用户的微信external_userid
company: Pointer 指向当前 Company (cid)

展示字段:

name: 姓名
avatar: 头像
mobile: 手机号
externalName: 外部名称
externalType: 外部用户类型
corpName: 企业名称
isVerified: 身份确认状态
externalUserId: 外部用户ID

2. 用户信息展示

页面采用卡片式布局，包含以下区域：

头像区域

居中展示用户头像（圆形，100px）
无头像时显示默认占位图标
显示用户姓名
显示用户类型标签（企业员工/外部用户）

身份状态徽章

已确认: 绿色徽章，显示"已确认身份"和对勾图标
待确认: 黄色徽章，显示"待确认"

详细信息列表

根据用户类型展示不同的字段信息，每项包含：

图标标识
字段标题
字段值

3. 身份确认功能

确认按钮状态

可点击: 用户未确认 && 用户记录存在 && 未加载中
禁用: 用户已确认 || 用户记录不存在 || 加载中

确认流程

点击"确认身份"按钮
更新对应表记录的 isVerified 字段为 true
显示成功提示
更新页面状态为"已确认身份"

异常处理

用户记录不存在: 提示"系统中未找到您的用户记录，请联系管理员"
确认失败: 显示错误提示信息

数据模型

Profile 表

UserSocial 表

字段	类型	说明
userId	String	企业员工微信UserId
company	Pointer	所属企业
name	String	姓名
avatar	String	头像URL
mobile	String	手机号
email	String	邮箱
department	String	部门
position	String	职位
corpName	String	企业名称
isVerified	Boolean	身份确认状态

UI/UX 设计

布局特点

响应式设计，适配移动端和桌面端
居中布局，最大宽度600px
卡片式信息展示，清晰分层
图标辅助，增强信息可读性

交互状态

加载状态: 显示加载动画和提示文字
信息展示: 完整展示用户信息
确认成功: 按钮变为禁用状态，徽章变为绿色
错误状态: 显示友好的错误提示

视觉元素

主色调: Ionic 默认主题色 (#3880ff)
成功色: 绿色 (success)
警告色: 黄色 (warning)
字体大小:
- 标题: 20px
- 用户名: 24px
- 正文: 16px
- 辅助文本: 14px

技术实现

核心依赖

Angular: 独立组件架构
Ionic: UI 组件库
fmode-ng:
- WxworkSDK: 企微SDK
- FmodeParse: Parse Server 数据服务

主要方法

`ngOnInit()`

获取路由参数 (cid, appId)
调用 loadUserInfo() 加载用户信息

`loadUserInfo()`

初始化 WxworkSDK
从 localStorage 获取缓存的用户信息
根据用户类型调用相应的加载方法

`loadProfileInfo(userId: string)`

查询 Profile 表
构建 UserInfo 对象

`loadUserSocialInfo(cachedInfo: any)`

查询 UserSocial 表
构建 UserInfo 对象

`confirmIdentity()`

更新 isVerified 字段为 true
刷新页面状态
显示成功提示

使用场景

场景1: 首次登录确认

企业员工首次通过企业微信进入系统时，需要确认其身份信息，系统记录确认状态。

场景2: 外部用户验证

外部客户通过企业微信接入时，展示其在系统中的信息，确认身份后才能使用完整功能。

场景3: 信息核对

管理员可以引导用户访问此页面，核对和更新用户信息。

扩展性

未来可能的增强功能

允许用户编辑部分信息（如手机号、邮箱）
添加人脸识别或其他二次验证
记录确认时间和IP地址
支持批量身份确认
增加身份过期和重新确认机制

注意事项

路由守卫: 必须配置 WxworkAuthGuard，否则无法获取用户信息
数据隐私: 敏感信息需要适当脱敏显示
错误处理: 网络异常、Parse查询失败等都需要友好提示
状态同步: isVerified 状态更新后需要同步到其他使用该字段的模块
权限控制: 未确认身份的用户可能需要限制部分功能访问

文件结构

src/modules/auth/page-user-confirm/
├── page-user-confirm.component.ts       # 组件逻辑
├── page-user-confirm.component.html     # 模板
├── page-user-confirm.component.scss     # 样式
└── page-user-confirm.component.spec.ts  # 单元测试

路由配置

// app.routes.ts
{
    path:"auth/:cid/user-confirm",
    canActivate:[WxworkAuthGuard],
    loadComponent:()=>import("../modules/auth/page-user-confirm/page-user-confirm.component")
        .then((m)=>m.PageUserConfirmComponent)
}

字段	类型	说明
externalUserId	String	外部用户微信external_userid
company	Pointer	所属企业
name	String	姓名
avatar	String	头像URL
mobile	String	手机号
externalName	String	外部名称
type	String	外部用户类型
corpName	String	企业名称
isVerified	Boolean	身份确认状态

auth-user-confirm.md 6.9 KB 履歴 Raw