# UCenterUtils-JS

**Repository Path**: eignil/UCenterUtils-JS

## Basic Information

- **Project Name**: UCenterUtils-JS
- **Description**: UCenter开发工具集合。为方便Java等语言的项目直接对接UCenter，特基于JavaScript开发了对接过程中可能会使用到的小工具，并提供了JavaScript版的代码范例。
- **Primary Language**: JavaScript
- **License**: GPL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 2
- **Created**: 2023-05-15
- **Last Updated**: 2023-05-15

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# UCenter应用开发工具集

## 项目简介

本项目为`对接康盛开发的UCenter系统`工作提供必要的文档说明、代码示例以及相关的辅助工具。考虑到*JavaScript作为很多互联网行业软件工程师的必备语言有着较为广泛的使用者，使用JavaScript作为中间语言进行技术的交流门槛较低*；同时*JS项目可以方便的运行在浏览器中，需要查看demo或使用辅助工具时无需搭建额外的开发环境，查看和调试源码示例也较为方便*。因此，本项目采用`JavaScript`作为主要的开发语言，项目涉及到的具体技术：`ES6`、`vue.js`、`bootstrap`、`webpack`、`npm`等。

## 功能清单

本项目用于辅助对接康盛UCenter系统的开发。项目提供了以下功能：

1. 加/解密工具的校验界面。在浏览器中打开`dist/index.html`即可查看。
2. JS版的加解密算法描述，参照文件`src/ucUtils.js`中的`UcEncoder`类。
3. Api接口的校验和解析逻辑，参照文件`src/api/api.js`。
4. JS版的Client类实现，包括注册、登录、登出等操作，参照`src/client`。

## 业务场景描述

`自有系统`指的是需要和`UCenter`服务端进行通信从而实现和Discuz系统保持数据同步的系统，在`UCenter`后台中又被称为`应用`。

自有系统和UCenter的通信分为两块：

### UCenter --> 自有系统

在UCenter后台设置应用后，UCenter会根据设置的`应用`参数向`应用`的`接口`（如：`api/uc.php`）发送请求,`应用`收到请求后做出正确的响应（输出`1`），UCenter侧应用列表中对应的`应用`会展示`通信成功`的字样。

在`UCenter`服务端需要`应用`同步更新相关数据时，`UCenter`也会根据设置的`应用`参数向`应用`的`接口`（如：`api/uc.php`）发送请求，`应用`收到请求后执行操作并做出响应即可。

比如：用户在`Discuz`中更新头像和昵称后，`UCenter`就需要通过`自有系统`提供的接口向`自有系统`发送更新指令。

上一节《功能清单》中的第3点提到的文件描述了`接口`的处理逻辑，我们暂时只处理`UCenter`发出的`test`指令，以保证`UCenter`端和`自有系统`可以成功建立通信。

### 自有系统 --> UCenter

`自有系统`侧希望`更改论坛用户的头像`、`自动登录`、`自动登出`、`将用户同步到论坛`时，`自有系统`需要主动调用`UCenter`服务端的接口（如：`uc_server/index.php`）。

**以登录为例：**

1. `自有系统`的`客户端`触发`登录bbs`的事件；
2. `自有系统`的`服务端`拼接参数并将请求发送给`UCenter`；
3. `UCenter`收到登录请求后会进行`验证和其他处理`；
4. 如果登录成功`UCenter`会返回登录令牌参数；
5. `自有系统`解析令牌参数并构造可以同步登录bbs系统的`url`；
6. `自有系统`的`服务端`对`自有系统`的`客户端`做出响应（一般是重定向到上一步构造出的url）；
7. `客户端`打开`步骤5`构造的bbs页面即可实现论坛的同步登录。

## 数据的处理

无论是UCenter访问自有系统的API，还是自有系统向UCenter发送指令，http请求中的数据都要先进行`加/解密`的处理。加/解密的逻辑可以参照文件`src/ucUtils.js`中的`UcEncoder`类，该类的使用可以参照文件`src/api/api.js`和`src/main.js`。

### 加解密逻辑的调试的说明

在开发其他语言的加解密功能时，可以仿照文件`src/ucUtils.js`中的`UcEncoder`类。对于结果的验证可以在浏览器中打开`dist/index.html`中的html文件，里面提供的`UC加密/解密调试工具`可以方便的完成验证任务。

如果需要比照`加解密算法`各中间变量的值，建议借助chrome的JavaScript调试工具完成：

1. 使用Chrome打开`UC加密/解密调试工具`界面；
2. 打开控制台，在`Sources`选项卡的`top`->`webpack://`下找到`src/ucUtils.js`文件并在关键位置设置断点；
3. 点击界面中的“开始解密”/“开始加密”按钮；
4. 在控制台右侧的`Scope`中即可观察变量值，并和自己的版本进行比照，以便快速定位问题。

## 关于自动注册、自动登录以及退出账号的流程概述

注册、登录、退出的接口参考`src/client`下面的文件；封装的各个接口的用法可以参考`src/main.js`中的相关代码。

### <span id="autoLogin">自动登录流程</span>

0. 用户端向`自有系统`请求访问bbs；
1. `自用系统`侧服务器端通过查询本地数据库检查当前用户有没有在UCenter中注册账号；
    
    1.1. 未注册账号，先自动注册账号，参考[自动注册流程](#autoRegister)；
    
    <span id="getUid">1.2.</span> 已注册账号则获取当前用户在UCenter的用户ID。

2. 调用`userSynLogin`的逻辑获取`同步登录的链接`；
3. http响应头中输出302重定向到`同步登录的链接`；
4. 如果在[步骤2]()中获取到的链接后面加上参数`jumpTo`，步骤4之后，客户端页面会自动跳转到`jumpTo`之后的地址；否则步骤4中的页面会一直显示空白。

### <span id="autoRegister">自动注册流程</span>

自动注册流程可以在[自动登录流程]()中触发。

0. `自有系统`侧检测到当前用户没有在UCenter中注册账户；
1. **准备用户名**：（以下流程仅供参考）；
   
   1.1. 客户端提示用户“第一次登录请输入论坛昵称”，向用户提供表单输入`论坛昵称`；
   
   1.2. 服务端调用`checkUsername`的逻辑检查用户输入的昵称是否可用；

      1. 用户昵称不可用，提示用户更换昵称；
      2. 用户昵称可用，允许用户提交表单。
   
   1.3. 客户端用户提交表单。

2. **准备邮箱**：服务端获取用户的邮箱，调用`checkEmail`的逻辑检查邮箱是否可用；
   
   2.1. 如果用户邮箱不可用或用户没有设置邮箱，为用户随机设置一个虚拟的邮箱（如：1512312312@my.app.local），并重复步骤[2]检查邮箱可用性。
3. **准备密码**：获取`自有系统`侧存储的用户密码特征码，从中取出前10位作为要注册的账户密码（该密码除了用于本注册流程外，其他地方几乎不会到）；
4. 调用`userRegister`的逻辑在UCenter中注册一个账户，该接口将返回用户的ID；
5. 注册成功后，将新注册的用户ID绑定到`自有系统`中的用户账户中；
6. 如果本流程处于自动登录流程中，直接回到[自动登录流程](#autoLogin)的[1.2](#getUid)。


### 自动退出流程

1. 调用`userSynLogin`的逻辑获取`同步退出的链接`；
2. http响应头中输出302重定向到`同步退出的链接`；
3. 如果在[步骤1]()中获取到的链接后面加上参数`jumpTo`，同步退出之后，客户端页面会自动跳转到`jumpTo`之后的地址；否则同步退出后页面会一直显示空白。