博客 (42)

本文基于初期只开放微信小程序，后期向 iOS/Android/H5 等多终端开放的场景设计，且并不要求“登录即必须绑定手机号码”。如初期即同时多终端推出请参考此文。

项目初期，微信小程序以 openid 作为用户的唯一标识，因此在其它平台也需要用微信来授权登录。但同一微信用户在小程序和 App 上使用微信授权登录后的 openid 并不相同，必须同时绑定到微信开放平台，通过 unionid 关联用户，作为用户的唯一标识。

见流程图：

微信小程序建议使用 getPhoneNumber 接口来获取用户授权的手机号码，以提高用户体验、节省开发成本、节省短信运营成本。

本文作为 多平台用户登录模块设计 的扩展设计，即以手机号作为用户的唯一凭证。

官方文档的小程序登录时序：
https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/login.html

（图片摘自 2018.10.30）

session_key 是密钥，仅保存于开发者服务器，用于将小程序通过前端接口获取到的数据解密来验证其真实性。详见 https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html

小程序与服务器是通过自定义登录态来识别用户身份的，以下简称口令（token）。

由于微信未告知 session_key 的有效期，那么为保证小程序发起业务请求成功，token 须要永久有效，但这会带来安全隐患。

如果设置 token 的有效期（如 7200 秒），那么小程序发起业务请求后，服务器必须把 token 的验证结果告知小程序，若失效则重新登录。

微信授权登录（含绑定手机号码）流程图

子流程：授权登录

子流程：绑定手机号

为保证数据安全，针对每个须要授权登录的业务请求，服务器都都会检验 token 的有效性。如果小程序同时发起多个业务请求，并几乎同时收到 token 过期，那么会同时发起多个重新登录流程，服务器多次 code2Session，重新生成多个 token 返回到小程序，那么小程序最终保存的 token 可能不是服务器上认为的最新的一个 token。这样，如果程序设计为获取到 token 继而重新发起业务请求，可能会进入死循环。解决的方法是在同时发起多个业务请求之前先向服务器验证一次 token 的有效性，再发起多个业务请求时就不会出现都过期的情况了。

查看详细的短信验证码登录或绑定流程

确定唯一凭证：

若项目仅提供微信端访问，那么使用微信的授权（即以微信 openid / unionid 作为唯一凭证）是一种体现注重用户体验的方式。如果项目需要应用到多个平台上，那么通过微信来授权变得不那么完美（譬如未安装微信客户端或平台不支持使用微信授权等）。因手机的使用率已明显高于电脑的使用率，再加上用户帐号实名认证的要求，以手机号码为作为帐号的唯一凭证是非常合理的。

登录唤起条件：

当用户打开需要登录授权的页面或触发需要登录授权才能执行的操作时。

场景实现：

l  【“手机号码 + 密码”登录】页面显示填写手机号码和密码框的表单，提供“忘记密码”、“短信验证码登录”、“手机快速注册”等功能。如果在可长期记住登录状态的场景中（如手机 App）也可取消密码，直接使用短信验证码登录。“手机快速注册”必须通过短信验证码实现实名认证。

l  【第三方帐号登录 / 扫二维码登录】App 中提供跳转相应第三方 App（如微信）授权登录，PC 端网页中提供微信扫二维码登录。登录获得 unionid，同时判断是否已经绑定过手机号码，若未绑则强制绑定，确保数据库中的每一条用户信息都有手机号码。

注：同一个微信帐号在不同的公众号和 App 中的 openid 不同，将这些公众号和 App 通过微信开放平台绑定后，同一个微信帐号的 unionid 是相同的，可用于判断同一用户。

流程图：

多平台用户登录模块设计.vsdx

各平台登录设计：

• 微信小程序授权登录流程
  

在支付宝的“生活缴费”中开通电费的“自动缴费”后，可以设置“余额不足 XX 元，自动充值 XX 元”的智能交费。

展开后有一个“充值方式：支付宝代扣”的选项。

若开启，则自动充值会从支付宝扣费；若关闭，则会从电费户号之前绑定的银行存折中扣费。

所以说，该“自动缴费”的意思不是在支付宝里自动扣费，而是在国家电网里开通自动缴费，开通后会从支付宝、绑定的存折或银行卡等渠道扣费。

若从绑定的存折或银行卡里扣费，此时因其短信中仍然显示“本期电费”字眼，容易让人误解为上月电费。

如果要关闭“自动缴费”，须携带户主身份证到线下营业厅办理。

制作类似下图中的拖拽排序功能：

1. 首先数据库该表中添加字段 sort，类型为 double（MySQL 中为 double(0, 0)）。

2. 页面输出绑定数据（以 ASP.NET MVC 控制器为例）：

public ActionResult EditSort()
{
    if (!zConsole.Logined) { return RedirectToAction("", "SignIn", new { redirect = Request.Url.OriginalString }); }

    db_auto2018Entities db = new db_auto2018Entities();

    return View(db.dt_dealer.Where(c => c.enabled).OrderBy(c => c.sort));
}

这里可以加条件列出，即示例中 enabled == true 的数据。

3. 前台页面引用 jQuery 和 jQuery UI。

4. 使用 <ul /> 列出数据：

<ul id="sortable" class="list-group gutter list-group-lg list-group-sp">
    @foreach (var d in Model)
    {
        <li class="list-group-item" draggable="true" data-id="@d.id">
            <span class="pull-left"><i class="fa fa-sort text-muted fa m-r-sm"></i> </span>
            <div class="clear">
                【id=@d.id】@d.name_full
            </div>
        </li>
    }
</ul>

5. 初始化 sortable，当拖拽结束时保存次序：

<script>
    var url_SaveSort = '@Url.Action("SaveSort")';
</script>
<script>
    $("#sortable").sortable({
        stop: function (event, ui) {
            // console.log('index: ' + $(ui.item).index())
            // console.log('id: ' + $(ui.item).data('id'))
            // console.log('prev_id: ' + $(ui.item).prev().data('id'))
            $.post(url_SaveSort, {
                id: $(ui.item).data('id'),
                prev_id: $(ui.item).prev().data('id')
            }, function (json) {
                if (json.result.success) {
                    // window.location.reload();
                } else {
                    toastr["error"](json.result.info);
                }
            }, 'json');
        }
    });
    $("#sortable").disableSelection();
</script>

这里回传到服务端的参数为：当前项的 id 值、拖拽后其前面一项的 prev_id 值（若移至首项则 prev_id 为 undefined）。

不使用 $(ui.item).index() 是因为，在有筛选条件的结果集中排序时，使用该索引值配合 LINQ 的 .Skip 会引起取值错误。

6. 控制器接收并保存至数据库：

[HttpPost]
public ActionResult SaveSort(int id, int? prev_id)
{
    if (!zConsole.Logined)
    {
        return Json(new { result = new { success = false, msg = "请登录后重试！" } }, JsonRequestBehavior.AllowGet);
    }

    db_auto2018Entities db = new db_auto2018Entities();

    dt_dealer d = db.dt_dealer.Find(id);

    // 拖拽后其前项 sort 值（若无则 null）（此处不需要加 enabled 等筛选条件）
    double? prev_sort = prev_id.HasValue
        ? db.dt_dealer.Where(c => c.id == prev_id).Select(c => c.sort).Single()
        : null as double?;

    // 拖拽后其后项 sort 值（若无前项则取首项作为后项）（必须强制转化为 double?，否则无后项时会返回 0，导致逻辑错误）
    double? next_sort = prev_id.HasValue
        ? db.dt_dealer.Where(c => c.sort > prev_sort && c.id != id).OrderBy(c => c.sort).Select(c => (double?)c.sort).FirstOrDefault()
        : db.dt_dealer.Where(c => c.id != id).OrderBy(c => c.sort).Select(c => (double?)c.sort).FirstOrDefault();

    if (prev_sort.HasValue && next_sort.HasValue)
    {
        d.sort = (prev_sort.Value + next_sort.Value) / 2;
    }
    if (prev_sort == null && next_sort.HasValue)
    {
        d.sort = next_sort.Value - 1;
    }
    if (prev_sort.HasValue && next_sort == null)
    {
        d.sort = prev_sort.Value + 1;
    }

    db.SaveChanges();

    return Json(new { item = new { id = d.id }, result = new { success = true } });
}

需要注意的是，当往数据库添加新项时，必须将 sort 值设置为已存在的最大 sort 值 +1 或最小 sort 值 -1。

var d = new dt_dealer
{
    name_full = "新建项",
    sort = (db.dt_dealer.Max(c => (double?)c.sort) ?? 0) + 1,
};

ASP.NET MVC 如果从控制器输出的是匿名类的集合，那么绑定到视图时会报错：

“object”未包含“xxx”的定义

简单的解决方法是 JSON 序列化再反序列化，例如：

ViewBag.list = JsonConvert.DeserializeObject(JsonConvert.SerializeObject(q.ToList()));

上面是 ViewBag 的情形，如果是直接 return View(匿名类集合);

那么在视图页面：

@model IEnumerable<dynamic>

UEditor 的 ASP 版本在虚拟空间上传文件失败，提示“上传错误”或“上传失败，请重试”等，是因为其文件上传组件在创建目录时，没有网站目录外的访问权限。

例如上传文件的磁盘保存路径为：

D:\web\sitename\wwwroot\upload\20180523\123.jpg

百度编辑器的上传组件会依次判断以下目录是否存在，不存在则创建：

D:\

D:\web\

D:\web\sitename\

D:\web\sitename\wwwroot\

D:\web\sitename\wwwroot\upload\

D:\web\sitename\wwwroot\upload\20180523\

虚拟空间自动配置的网站根目录可能是：

D:\web\sitename\wwwroot\

所以，判断存在或创建以下目录没有问题：

D:\web\sitename\wwwroot\upload\

D:\web\sitename\wwwroot\upload\20180523\

但判断存在以下目录时会因为权限不足而失败：

D:\

D:\web\

D:\web\sitename\

解决方法是找到文件 asp/Uploader.Class.asp

找到 CheckOrCreatePath 这个 Function，替换为：

Private Function CheckOrCreatePath( ByVal path )    
   Set fs = Server.CreateObject("Scripting.FileSystemObject")    
   Dim parts    
   Dim root : root = Server.mappath("/") & "\"    
   parts = Split( Replace(path, root, ""), "\" )    
   path = root    
   For Each part in parts    
       path = path + part + "\"    
       If fs.FolderExists( path ) = False Then    
           fs.CreateFolder( path )    
       End If    
   Next    
End Function

另外，如果服务端无法通过 Request.Form 来接收该值，把 <form /> 放到 <table /> 外面试试。

或者绑定 contentChange 事件来赋值（不推荐）：

ue.addListener("contentChange", function() {
    document.getElementsByName('xxxxxx')[0].value = ue.getContent();
});

此方法的缺点是，不是所有操作都能触发 contentChange 事件，比如剪切、上传图片等。

改进方法（推荐）：在 form 提交之前赋值。

在 IIS 中编辑网站绑定时，提示“至少一个其他网站正在使用同一 HTTPS 绑定，而此绑定用另一个证书配置。确实要重用此 HTTPS 绑定并将其他网站重新指定为使用新证书吗?”，那么所有网站都必须使用同一个域名证书吗？

否。只要在绑定 https 域名的时候勾选“需要服务器名称指示”就行了。

使用证书链检测工具检测结果证书链（Certificate chain）不完整怎么办？

这个问题我在两台相同版本 CentOS 和相同版本宝塔面板的 Linux 服务器上遇到过，一台证书链完整，一台证书链不完整。

使用宝塔自带的 SSL 证书导入的方式可能出现这种情况（个例），关闭之，并手动配置 nginx 的 conf 文件；而再有一台，手动配置不生效，宝塔自带 SSL 成功，因此请自行尝试。

我也在两台相同版本的 Windows Server 2012 R2 上（IIS 8.5）遇到过，一台证书链完整，一台证书链不完整。

解决思路：在命令提示符中键入 mmc，打开：文件 - 添加/添加管理单元，选择“证书”添加，选择“计算机帐户”，确定。展开“证书”

在“个人 - 证书”中可以看到我们导入的域名证书，查看它的颁发者，确保在“中间证书颁发机构 - 证书”（或“受信任的根证书颁发机构”）中能够找到，找到后继续找该证书的颁发者，一直找到根证书。一般会有多个中间证书，形成一个完整的证书链，如果证书有缺失，那么尝试重新导入域名证书，或向供应商索要中间证书。

有任何改动后，在命令提示符中执行 iisreset 来重启 IIS（IIS 管理器中的“重新启动”可能重启得不彻底），并且找到网站 - 绑定 - 删除 https 类型的绑定并重新添加，以使证书生效。

检测证书链完整后，继续摸索过程中发现，删除某中间证书，然后在 IIS 中重新绑定，会自动生成中间证书，难道是域名证书中已经包含了中间证书和根证书等完整的证书链，还是 Windows 会自动下载安装这些证书呢？

在开发支付宝支付/微信支付时回调 Url 无法接收数据。

可能是证书链不完整，建议用工具检测：GeoCerts™ SSL Checker，并用上述方法补全。

>> 遇到新问题将不断补充本文 <<

HTML5 Sortable 是一款使用原生 HTML5 drag 和 drop API 来对列表或网格进行排序的 jQuery 插件。

下载和使用：官网

步骤：

1、给 <ul /> 添加 sortable 样式类

2、引入 jquery.sortable.js

3、$('.sortable').sortable();

通过绑定 sortupdate 事件来获取排序后的 DOM 位置，示例：

$('.sortable').sortable().bind('sortupdate', function (event, ui) {
    var item = $(ui.item[0]);
    var prev = item.prev();

    $.post(window.location.pathname, {
        xdo: 'fn_sort',
        cid: item.data('cid'),
        prev: prev.data('cid') // 可能为 undefined
    }, function (json) {
        if (json.result.success) {
        } else {
            toastr['error'](json.result.info);
        }
    }, 'json');
});