不用备案也能支持微信自定义分享

发表于 3年以前 | 总阅读数：331 次

我们知道，在微信中打开网页，使用右上角的 ... 分享给朋友/朋友圈，是可以使用 JS SDK 自定义分享卡片文案的。为了让分享内容能够更好的受到监管，从早期会自动读取网页内第一张大图到后期使用 JS SDK 自定义分享，再到后期需要做域名绑定关联，自定义分享卡片内容的流程变的越来越复杂。

目前如果你的网站想要增加微信自定义分享文案的支持，需要准备以下两件事情：

确保你的网站域名已备案，并被添加到了一个已认证的公众号的“JS安全域名”中。
提供服务端支持，用于与微信交互获取 access token 和 jsapi ticket 并计算获得最终的 signature，用于在前端调用微信 JS SDK 时进行校验。

具体的流程可以参见微信开放文档[1]。可以看到要想实现自定义分享文案，除了开发流程之外，你还需要域名备案和公众号认证，这两个做过的人肯定知道会有多头疼了。而最蛋疼的是，我的博客域名后缀 .org 目前是不支持备案的，难道就没有办法了吗？

wxhermit

为了能让未备案网站也能自定义分享文案，我开发了 wxhermit[2] 这个项目。它的原理非常简单，基本就是在已备案域名下 <iframe> 嵌套展示未备案域名，并通过 postMessage 通信，将自定义分享的文案传递到父页面。最终实现了任意网站分享自定义的需求。

当然它的本质还是使用基于最开始的备案域名网站进行分享。由于微信分享需要提供已认证公众号并绑定已备案域名，一个已认证公众号只能绑定至多 5 个安全域名，条件颇为苛刻。针对 5 个以上的域名，部分域名无法备案的情况，要自定义微信分享的文案就非常麻烦。本方案比较好的迂回解决该问题。

如何使用

在服务端使用 Docker 启动服务。其中 WECHAT_ID 和 WECHAT_SECRET 是在微信公众号后台开发-基本配置中获取的“开发者ID”和“开发者密码”。而 ALLOW_HOST_LIST 是为了避免服务被滥用，允许开发者配置允许使用内嵌服务的网站。可以使用逗号拼接多个域名，例如 imnerd.org,eming.li。不在该列表中的域名会直接跳转回源地址。

docker run \
  -e WECHAT_ID=<WECHAT_ID> \
  -e WECHAT_SECRET=<WECHAT_SECRET> \
  -e ALLOW_HOST_LIST=<ALLOW_HOST_LIST> \
  -p 8360:8360
  lizheming/wxhermit

而对于需要使用该服务的网站，需要在页面中增加以下代码用于自定义分享文案。其中 wxhermit 是固定值，其它的为自定义文案内容。

<script>
if (window.parent !== window) {
  window.parent.postMessage({ 
    type: 'wxhermit',
    title: '自定义分享的标题',
    desc: '自定义分享的描述',
    imgUrl: '自定义分享的封面图'
  }, '*');
}
</script>

配置好后就可以在微信使用 <domain>/?url=<url> 来访问了，其中 <domain> 是你的已绑定的安全域名，<url> 则是在 ALLOW_HOST_LIST 中配置的可使用域名下的网址。

后记

通过代理的形式很好的解决了我未备案域名需要自定义分享的问题。为了能让体验更自然，我在我的网站中增加了在微信中自动跳转至该嵌套页面的逻辑。

<script>
if(/micromessenger/i.test(navigator.userAgent) && window.parent === window) {
 location.href = 'https://wechat.75.team/?url=' + encodeURIComponent(location.href);
}
</script>

不过它的缺点也很明显，本质相当于将所有的域名都挂靠在某个安全域名之下。所以在微信下拉显示网站地址的时候都还是显示该安全域名。而且子域如果出现内容问题的话风险也全部在该安全域名上，所以建议是 ALLOW_HOST_LIST 配置个人可控域名。

除了我的这种方案之外，也有配置 <meta> 信息通过 Safari 调用系统的分享功能设置封面图和文案的方式，以及通过 QQ 浏览器分享自动获取页面第一张大图的形式自定义分享卡片。不过它们在可定制和确定性上都要稍微弱一些，可以根据实际情况选择使用。