之前开发一个微信公众号的鉴权认证，其中的功能是用户发送文字消息给公众号，然后公众号返回图文消息给用户，用户再点击图文消息即可跳转到一个网页链接，在微信的内置浏览器中打开，然后进行一些鉴权认证操作。那么问题来了，在用户打开的网页 URL 地址中包含有用户的 userId、weixinAppi 等信息，所以我们只能允许用户在微信端打开，不能在其他的浏览器中打开，以下就是我们的解决方案。
一、微信浏览器打开
微信自带的浏览器是 QQ 浏览器 X5 内核，X5 内核是腾讯基于开源Webkit优化的浏览器渲染引擎，目前除了微信、手机QQ、京东等有30多款APP内置浏览器都是基于 X5 内核 ，包括 Windows 版的微信也是一样，所以我们通过正则匹配来判断当前浏览器是什么内核，具体代码如下：
- <script type="text/javascript">
- // 对浏览器的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();
- }
- </script>
这段代码在 Android、iPhone、iPad、PC 上都进行了测试，只要不是在微信内部打开网页的，首先就会弹出上面那个警告框，此时后面的页面是空白的，什么都还没加载，当点击警告框的确定按钮之后，最后三行代码将强行关闭当前页面。
其实这个也不是根本的解决办法，可以通过一些软件工具来伪造 UserAgent 的值，还是可以绕过这条限制的，我们的当时的解决办法就是把微信传递过来的参数进行了 Base64 加密处理，这样也能减少一些破解问题，总的来说就是防君子不防小人了。
二、微信浏览器关闭
在鉴权认证成功后，会跳转到另外成功提示一个页面，然后点击确定按钮关闭当前页面，返回微信聊天，刚开始我用的是：
- <a href="javascript:" on-click="closeWin()">确定</a>
- <script type="text/javascript">
- function closeWin() {
- window.open('about:blank', '_self');
- opened.opener = null;
- opened.close();
- }
- </script>
这种方法在 Windows 版本的微信中不适用，可能是我的电脑版微信版本问题，所以调用了微信自带的方法：
- <a href="javascript:" class="weui-btn weui-btn_primary" id="closeWindow">确定</a>
- <script type="text/javascript">
- var readyFunc = function onBridgeReady() {
- document.querySelector('#closeWindow').addEventListener('click', function(e){
- WeixinJSBridge.invoke('closeWindow',{
- },function(res){
- });
- });
- }
- if (typeof WeixinJSBridge === "undefined") {
- document.addEventListener('WeixinJSBridgeReady', readyFunc, false);
- } else {
- readyFunc();
- }
- </script>
大家可以用这两种方法试试看效果！
三、总结
这个是一个最基本的问题，我还具体的去研究如何去做微信公众号的开发！
博主只是一名前端的小白，只是把自己用到的知识分享一下，要是有什么不对的地方，欢迎大家提出~~
评论