前几日在朋友圈刷到一篇文章 我是怎么把博客粉丝转到公众号的，觉得相当有创意。最近一年在做 toC 产品，一直在谈拉新留存转化。这刚好可以作为一个黑客增长的成功案例。

鉴于我自己也有一个博客，并且日均UV在200左右，决定来试一试。整理了一下思路，差不多与短信验证码的逻辑相似，于是花了一天时间搞定。

另外，在此之前我也花了一天时间调研了 。所以你完全可以零成本实现从博客到公众号引流的功能。

先来谈一谈需求点：

博客的内容被二维码弹框遮挡，弹框上有口令及公众号二维码

扫码关注二维码并回复口令，回复口令后刷新博客弹框消失

需求很简单，如图下所示。你也可以去我的网站 每天学习一点点 查看实现效果

不得不说，弹窗实在是一件伤用户体验的事情了。但也有一些措施，能够让用户体验变得稍微优化一点

简单的口令，如只有四位数字

非强制的弹窗，浏览内容时只有一定几率会出现弹窗，及时出现弹窗，刷新一下即可跳过

简单过一遍技术栈，博客采用了 ，前端的技术栈就是 了。

由于是一个小小的服务，后端则尽可能轻量，于是我选择了 。为了方便后端迁移，如我以后将会迁移到 ，则使用无状态服务，即不依赖数据存储。如果没有状态，那怎么认证用户呢？使用

关于部署，则使用 ， 以及 。至于部署这块，我有一个基础设施很完善的服务器环境，可以参考文章 当我有一台服务器时我做了什么。

这下子实现思路就很清晰了：

css 部分使用选择器控制只显示文章的前两个标签，其余隐藏

js 部分有两个请求，一个根据口令请求 jwt，一个根据jwt判断是否合法，口令是四位数字随机生成

后端，使用koa做一个简单的服务，使用jwt免掉存储状态，且可以使用四位简短数字，避免冲突

存储，一个 lru，存在内存里，只留三分钟，用来交换 jwt

部署，使用 和 由于无状态，很容易迁移到 serverless。且在微信环境下很容易制作测试环境与生产环境

网关 ，方便自动服务发现与证书管理

在前端控制内容被二维码遮挡的主要实现在于 CSS，而CSS主要控制两点

弹框

只显示博客内容前N段

我们博客大部分使用静态生成器，从 生成，生成的 大致长这个样子。

现在前端的发展趋势是状态即UI，我们使用一个变量 来控制所有样式。我们在 中加入弹框。

弹框的显示隐藏容易控制，那 即文章内容的呢，如何控制只显示前N段？

这肯定难不倒曾经三个月的工作只写 的我，使用 。 代码如下

另外，我们也加了点渐变效果提升观感：前两段内容显示，第三段第四段渐变，五段以后全部隐藏。具体见 代码

在 中主要控制状态 ，除了真实解锁逻辑还有一个随机性的弹窗。 代表是否解锁， 代表是否显示弹窗

口令需要是持久化的：保证每次刷新页面口令都是一致的。因此口令存储于 中，随机生成四位数字，代码如下

接下来的逻辑是

在微信中把口令传给后端

前端刷新解锁

先看在微信这边的逻辑。我对微信开发封装成了简单的路由形式，核心逻辑如下：当接收到数字码时存储到 中，这里使用了一个简单的内存 lru，只存储口令三分钟

中存储了 键值对

此时的用户认证就很简单了，传统形式的基于 的用户认证。后端采用 开发，代码如下，此时还使用了 做了简单的输入检验

不会，由于在服务端用户口令只在内存中存在三分钟，所以冲突的可能性很小。那三分钟之后，如何进行用户状态的持久化呢？

但是此时有一个问题， 只能存储维护三分钟数据状态。这个问题如何解决？

此时使用 来做用户认证。因此校验口令时返回生成的 ，在浏览器端持久化，使用它来保持用户状态。关于 ，可以看我以前的文章 JWT 深入浅出

持久化用户认证逻辑前端部分

持久化用户认证逻辑后端部分

当后端使用 用户认证时，服务器端收到 ，根据 获取用户信息，如果没有获取到，说明用户取消了订阅。

但是获取用户信息此项权限个人公众号未曾拥有

开发完成之后使用 及 部署， 做服务发现，通过 暴露服务，这三者在本系列文章中有所介绍

较为简单，配置文件如下

配置文件如下

当我们需要测试微信公众号时，直接使用自己的公众号不太合适，特别是当已有上线内容时。微信官方提供了测试公众号，我们可以重新填写 以及 。在测试环境使用域名

我们在 中使用 中的 代表生产环境， 代表测试环境

通过文件挂载提供服务，可以更新重启应用，便可以做到实时更新代码，并实时在测试公众号中看到效果。

配置文件如下

关于前端代码，皆在 shfshanyue/Daily-Question 中

关于后端代码，皆在 shfshanyue/wechat 中

而本篇文章，属于 个人服务器运维指南 的案例篇，关于 ， 及 等基础设施的搭建均在本系列中有所介绍

除了通过扫码回复公众号口令获得文章解锁外，这里也有一个永久 token 可以解锁。复制以下代码到控制台刷新即可解锁全部文章

我是山月，可以加我微信 与我交流，备注交流。另外可以关注我的公众号【全栈成长之路】