成功案例

js限制网站只能在微信中访问

您当前所在位置:首页 > 社区与文档 > 微信开发 > js限制网站只能在微信中访问

正文内容

最近正在开发一个微信公众账号,其中有一项功能是用户发送文字消息给公众号,然后公众号返回图文消息给用户,用户再点击图文消息即可跳转到一个网页链接,在微信的内置浏览器中打开。那么问题就来了,这个网页首先涉及到了移动web前端开发,我优先选择了用HTML5+bootstrap组合来实现页面的美观效果,前端其他的任务交给javascript解决(这里我是完全使用原生javascript代码,没有用到任何的框架,因为考虑到手机加载网页的速度本来就慢,而且框架中很多用不到的功能也会随网页一起加载,耗费用户流量)。

一切功能都就绪以后,客户试用也觉得很满意,之后我就把代码提交到了正式的服务器上。不过,对方又突然提到了一点:你做的页面确实挺漂亮的,兼容性也不错,但是这个页面用电脑上的浏览器也是可以访问的,那么其他人就可以很随便地查看页面的源代码,进而copy整个页面,能不能有什么方法防止这一点?那么问题就又来了,我是第一次做微信二次开发,还没遇到过这样的需求,怎么搞定呢?

一时间想不出来,后来我就把这个问题先放了放,去做后台的一些业务。在做后台的一个数据采集功能时,PHP代码当中用到了$_SERVER['HTTP_USER_AGENT']这个参数,我突然想到浏览器访问网页时都会发送一个UserAgent给服务器,它里面包含了一些浏览器及用户操作系统的基本信息,既然微信有内置浏览器,那么用微信浏览网页时这个UserAgent里面会不会带上和微信相关的独有的标识呢(毕竟腾讯这么大个公司,而微信又是他们的核心产品之一)?干脆用代码打印一下它的UserAgent来一探究竟,javascript代码如下:

<script type="text/javascript"> alert(navigator.userAgent); script> 

在我的手机上得到了如图所示的结果:


这一下果然还真的看到了不一样的地方,相信聪明的朋友也已经发现了,没错,就是这个东西:MicroMessenger/6.0.0.50_r844973.501,斜杠后面的这一串就是我当前使用的微信的版本号,前面则应该是微信的一个独有标识了。其实我一开始看成了MicroMessage,想着中文翻译过来是“微消息”的意思,但仔细一看发现不是的,后面查了词典才知道Messenger这个词有“报信者,送信者”的意思,也就不觉得奇怪了。这个标识应该来说是其他浏览器不会有的,那么解决方案就来了,请看代码:


// 对浏览器的UserAgent进行正则匹配,不含有微信独有标识的则为其他浏览器 
var useragent = navigator.userAgent; 
if (useragent.match(/MicroMessenger/i) != 'MicroMessenger') {
	// 这里警告框会阻塞当前页面继续加载
	alert('已禁止本次访问:您必须使用微信内置浏览器访问本页面!');
	 // 以下代码是用javascript强行关闭当前页面
	var opened = window.open('about:blank', '_self');
	opened.opener =null;
	opened.close();
}