开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等

在上篇随笔《基于微信小程序的系统开发准备工作》介绍了开发微信小程序的一些前期的架构设计、技术路线 、工具准备等方面内容,本篇随笔继续这个步骤,逐步介绍我们实际开发过程中对SSL协议的申请及后期处理过程,包括证书的IIS端口绑定,以及解决“”小程序要求的 TLS 版本必须大于等于 1” 的问题。

1、证书申请及成功的后续处理

小程序的配置要求我们必须在网站提供443端口服务,需要加入HTTPS证书,这种证书可以从云服务商上购买,如腾讯云、阿里云上的云服务器后台都提供了购买证书服务的通道,以阿里云为例,使用阿里云账号登陆后,在【控制台】【安全云盾】【证书服务】里面进行申请。

购买证书,我们在没有太多资金支持的情况下,可以考虑先使用免费SSL证书,阿里云上提供 免费型DV SSL的申请,购买后,会在订单列表里面有一个待审核的订单,如下所示,等待审核通过即可使用。

一般情况下,如果我们填写的资料正确,会较快通过审核的,如果我们的DNS不在万网上,那么我们还需要到服务商的网站进行添加阿里云的DNS配置。通过我们在提交信息的时候,如果是Windows服务器,因此会勾选DNS方式验证,如下所示。

这样提交成功后,会同时在服务器的云解析上面自动增加一条记录,如下所示

如果我们的申请的免费SSL证书获得通过,那么状态会变为【已签发】,如下所示,这个时候就可以用了。

 下载的证书包括几个文件,如下所示。

我们在IIS服务器上双击pfx文件,默认一步步操作即可把证书增加加到对应的目录里面了。

接着我们可以在控制台中查看到对应的证书位置。

然后在IIS里面绑定443端口,选择对应的SSL证书即可完成对SSL证书的绑定了,如下图所示。

这个时候,如果我们访问网站(我们官网是https://www.iqidi.com),那么 就可以在浏览器的左侧看到证书的信息了。

2、微信小程序整合处理

为了整合远程HTTPS连接获取数据,我们需要进行部署一个Web API的接口,那么我们可以建立一个进行MVC控制器进行测试,如下我们在控制器里面添加一个方法来获取第三方接口的数据,然后返回来给我们的小程序使用。

例如,我们以连接地址:http://m.maoyan.com/movie/list.json返回的数据为例,这个接口用来获取电影的数据,获得的结果如下所示。

由于小程序对域名的限制,我们不能使用第三方的API接口,因此需要在自己域名内部的API进行封装处理,然后再提供给自己的小程序使用,我们建立一个MVC的控制器方法,如下代码所示。

        /// <summary>
        /// 增加一个域名内的接口,供小程序测试
        /// </summary>
        /// <returns></returns>
        [HttpPost]
        public ActionResult Movies(int offset = 0, string type = "hot", int limit=6)
        {
            var url = "http://m.maoyan.com/movie/list.json";
            var postData = string.Format("?offset={0}&type={1}&limit={2}", offset,type,limit);

            HttpHelper helper = new HttpHelper();
            string result = helper.GetHtml(url+ postData, "", false);
            return Content(result);
        }

这样我们使用Fiddler测试的时候,确信能够获得返回的JSON数据,在进行小程序的测试即可。

执行POST数据的处理,可以获得对应的JSON数据,如下所示。

不过如果我们这个时候整合小程序进行测试,如下代码所示。

onShow: function () {
    var that = this
    wx.request({
      url: 'https://www.iqidi.com/h5/movies',
      data: {
        offset: 0,
        type: 'hot',
        limit: that.data.limit
      },
      method : 'POST',
      header: {
        'Content-Type': 'application/json'
      },
      success: function (res) {
        console.log(res.data)
        that.setData({
          films: res.data.data.movies,
          loading: true
        })
      }
    })

那么上述的处理操作,还是没有能够获取正确的结果的,调试小程序发现,它提示”小程序要求的 TLS 版本必须大于等于 1.2“”。

 

在网站上找到对应的解决方案,测试后正确解决问题:在 PowerShell中运行以下内容, 然后重启服务器

# Enables TLS 1.2 on windows Server 2008 R2 and Windows 7

# These keys do not exist so they need to be created prior to setting values.
md "HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2"
md "HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Server"
md "HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Client"

# Enable TLS 1.2 for client and server SCHANNEL communications
new-itemproperty -path "HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Server" -name "Enabled" -value 1 -PropertyType "DWord"
new-itemproperty -path "HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Server" -name "DisabledByDefault" -value 0 -PropertyType "DWord"
new-itemproperty -path "HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Client" -name "Enabled" -value 1 -PropertyType "DWord"
new-itemproperty -path "HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Client" -name "DisabledByDefault" -value 0 -PropertyType "DWord"

# Disable SSL 2.0 (PCI Compliance)
md "HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\SSL 2.0\Server"
new-itemproperty -path "HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\SSL 2.0\Server" -name Enabled -value 0 -PropertyType "DWord"
# Enables TLS 1.2 on Windows Server 2008 R2 and Windows 7 # These keys do not exist so they need to be created prior to setting values. md "HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2" md "HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Server" md "HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Client" # Enable TLS 1.2 for client and server SCHANNEL communications new-itemproperty -path "HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Server" -name "Enabled" -value 1 -PropertyType "DWord" new-itemproperty -path "HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Server" -name "DisabledByDefault" -value 0 -PropertyType "DWord" new-itemproperty -path "HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Client" -name "Enabled" -value 1 -PropertyType "DWord" new-itemproperty -path "HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\TLS 1.2\Client" -name "DisabledByDefault" -value 0 -PropertyType "DWord" # Disable SSL 2.0 (PCI Compliance) md "HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\SSL 2.0\Server" new-itemproperty -path "HKLM:\SYSTEM\CurrentControlSet\Control\SecurityProviders\SCHANNEL\Protocols\SSL 2.0\Server" -name Enabled -value 0 -PropertyType "DWord"

这样启动接口,获得数据并在小程序中进行正确展示了。

本文转自博客园伍华聪的博客,原文链接:开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等,如需转载请自行联系原博主。

时间: 2024-09-10 18:07:28

开发微信小程序中SSL协议的申请、证书绑定、TLS 版本处理等的相关文章

使用TypeScript开发微信小程序的方法_C#教程

TypeScript简介: TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程.安德斯·海尔斯伯格,C#的首席架构师,已工作于TypeScript的开发. TypeScript扩展了JavaScript的语法,所以任何现有的JavaScript程序可以不加改变的在TypeScript下工作.TypeScript是为大型应用之开发而设计,而编译时它产生 JavaScript 以确保兼容性.

微信小程序 免费SSL证书https、TLS版本问题的解决办法_JavaScript

微信小程序 免费SSL证书https.TLS版本问题的解决办法 微信小程序与第三方服务器通讯的域名5个必要条件 1.一个已备案的域名,不是localhost.也不是127.0.0.1,域名不能加端口 2.加ssl证书,也就是https://~~~ 4.HTTPS 服务器的 TLS 版本支持1.2及以下版本,一般就是1.0.1.1.1.2要同时支持这三个版本,一个也不能少,要不然就会出现下面这种情况 5.微信小程序后台加上合法域名设置(一个月内改的次数是有限的,且行且珍惜)如下图 以上5个条件,必

微信小程序中使元素占满整个屏幕高度实现方法_JavaScript

微信小程序中使元素占满整个屏幕高度实现方法 在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情况下才可以. 以前我的做法是用js获取屏幕的高度,然后将其赋值给height, 屏幕高度在网页中为:window.innerHeight; 在微信小程序中则需要调用wx.getSystemInfo接口,然后通过setData赋值 但是显然通过js来进行的,

在微信小程序中使用富文本转化插件wxParse

在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个富文本转化插件wxParse,方便我们使用,前人种树后人乘凉,我们使用它来解析HTML就很方便了,这对于我们在后端已经完成的一些HTML内容,展示在小程序里就非常不错. 这个插件的Github地址如下:wxParse-微信小程序富文本解析组件,官方称它支持支持HTML及markdown解析,我这里主

微信小程序中使用Fly 发起http请求

微信小程序的 javascript运行环境和浏览器不同,页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,所以不能在脚本中使用window,也无法在脚本中操作组件,JsCore中也没有 XmlhttpRequest对象,所以jquery .zepto.axios这些在小程序中都不能用,而此时,正是 fly 大显身手的时候. 您需要在 https://unpkg.com/flyio/dist/ 或 https://github.com/wendux/fly/tree/ma

微信小程序中单位rpx和rem的使用_javascript技巧

前言 这篇文章主要给大家讲解了rpx和rem应用于微信小程序,如果你还没有入门,建议先从下面看起      微信小程序官方文档      >web app变革之rem      >rpx单位官方文档      >rpx单位基础介绍 如果看完上面几篇文章,我们开始进入正题吧~~ 一.rem的使用 1) js中导入下面这段代码 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = 'orientationcha

哪些领域适合开发微信小程序

什么是小程序?小程序的实质就是webapp,最典型的案例是接入微信的"滴滴打车".虽然没有下载安装APP,但通过微信完全可以正常使用滴滴打车的服务,需要的定位.支付等底层能力,微信都可以提供.   张小龙希望微信小程序对用户来说,应该是"无处不在.触手可及.随时可用.用完即走"的一种"小应用",重点在一个"小"字上.那么,低频,非刚需,轻量级.功能单一,不需要调动太多系统级能力的应用似乎更适合小程序.       如图D和H,

动手开发一个名为“微天气”的微信小程序(上)

引言:在智能手机软件的装机量中,天气预报类的APP排在比较靠前的位置.说明用户对天气的关注度很高.因为人们无论是工作还是度假旅游等各种活动都需要根据自然天气来安排.跟着本文开发一个"微天气"小程序,方便微信网友随时查看天气. 接下来两天小编将同您一起开发一个"微天气"小程序,本文首先向大家介绍"微天气"的API与界面代码编写.本文选自<从零开始学微信小程序开发>. 在一套软件系统中,微信小程序通常是作为前端来使用的,一般还需要有后端的

《微信小程序开发入门精要》——第1章,第1.6节开发第一个微信小程序

1.6 开发第一个微信小程序 本节将从零开始开发一款微信小程序.该程序是一个猜拳游戏,功能很简单,单击"开始"按钮后,会快速切换"锤子""剪刀"和"布",直到按"停止"按钮,会显示"锤子""剪刀"和"布"中的一个,该游戏可以实现双方或多方猜拳.本节的目的是通过该例子,将开发微信小程序的过程完整讲述一遍,从配置开发环境.建立小程序项目,一直到将微信小