【12月12日更新】微信连 Wi-Fi 操作手册 (UniFi Cloud Key)

来宾portal设置

#1

前言
在手机上点选 SSID 后唤起 Portal 页,点击页面上“微信连 Wi-Fi ”按钮进入连接前页,展示公众号 LOGO 和名称,点击“立即连网”按钮后开始连WiFi,连接成功后跳转到成功连接页,关注商家公众号。

本教程以及提供的源码中使用的是 PHP。

可下载附件预览效果:

wechat connect on wifi中文版.mp4 (12 MB)

前提配置

  1. 安装 PHP,拥有一套可运行 CGI 的 Portal 服务器,不限于云端或本地。(用于搭建外部portal页面及通过微信API唤醒微信)

  2. 安装好 UniFi 控制器,這里将控制器和 Portal 服务器安装在一起,也可以分开安装。(用于搭建无线网络)

  3. 拥有或申请微信公众号(推荐服务号)。(用于获取微信API接口)

步骤

第一部分:微信公众平台设置

条件:

1、拥有微信公众号

2、拥有线下经营场所

微信公众号平台: https://mp.weixin.qq.com/

  1. 微信公众平台开通“微信连Wi-Fi”功能插件。

  2. 请按照微信的提示,如图完整填写申请“微信连Wi-Fi”服务所需资料,并提交。
    wechat1.jpg

  3. 申请成功之后,点击“+添加设备”按钮。

2.jpg

  1. 选择设备所属门店。如果您已经新建过门店,直接选择对应门店即可。如未创建过门店,点击“新建门店”。
    3.jpg

  2. 请按照微信的提示,完整填写申请“创建新门店”所需资料,并提交。(如您已经创建过店铺,该步骤可省略。)

  3. 返回“微信连 Wi-Fi”->“设备管理”, 选择设备所属门店,设备类型请选择“Portal 型设备”,接入方式请选择“设备改造后接入”,并填写您的路由器网络名称(为保证门店下多台设备无缝漫游,设备必须使用相同的无线网络名称和密码),最后点击“添加”即可。
    4.jpg

  4. 请将第三方凭证信息保存,用于路由器设置。点击“下一步”,扫描二维码,绑定 Wi-Fi 管理员。设置完成后,可在移动端进行设置。
    5.jpg

至此,微信公众平台设置已经完成。

第二部分:外部 Portal 服务器开发
Tips:外部 Portal 页面 index 必须放在路径为 /guest/s/{站点名}/ 的文件夹下

1.根据UBNT提供的源码demo修改config文件。

*config/unifi.php

<?php  // Unfi Connection
$unifiServer = "https://127.0.0.1:8443"; //您本地或者云端的Controller地址
$unifiUser = "admin"; //替换UserName
$unifiPass = "admin"; //替换Password
?>

*config/wechat.php

$portalServer = "http://10.100.3.112";  //替换您的外部Portal IP
$appId = "aabbcc"; //替换您在本教程第一部分step7中保存的appId
$secretkey ="aabbcc"; //替换您在本教程第一部分step7中保存的secretkey
$shop_id = "aabbcc"; //替换您在本教程第一部分step7中保存的shop_id
$extend  = “aabbcc"; //开发者自定义参数集合
  1. 可以根据需求对外部 Portal 页面进行改造开发。

Portal 页面改造的文件路径为:

9.jpg

下图是 UBNT 默认的 Portal 页面:

99.jpg

至此,外部Portal页面的开发已经完成。

第三部分:UniFi Cloud Key 的配置

条件: 使用最新版 Cloud Key 0.5.0 和 UniFi Controller 5.0.7

  1. 登录 Cloud Key 配置成静态 IP:
    1.png
    2.png

  2. 通过 ssh 工具进入到 Cloud Key,IP 地址即为刚才设置的静态 IP。

  3. 修改 /etc/nginx/sites-available/cloudkey-webui 文件,把默认 80 端口修改为 Portal 使用:

cd /etc/nginx/sites-available
sed -i 's/listen 80;/listen 81;/g' cloudkey-webui
  1. 新增一个 wechat.conf 文件在该目录 /etc/nginx/sites-available ,文件内容为:
    文件下载:wechat.conf (732 Bytes)
server {
   listen   80;


   root /var/www/wechat;
   index index.php index.html index.htm;

   location / {
   try_files $uri $uri/ /index.html;
   }

   error_page 404 /404.html;

   error_page 500 502 503 504 /50x.html;
   location = /50x.html {
   root /var/www/wechat;
   }

   # pass the PHP scripts to FastCGI server listening on the php-fpm socket
   location ~ \.php$ {
   try_files $uri =404;
   fastcgi_pass unix:/var/run/php5-fpm.sock;
   fastcgi_index index.php;
   fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
   include fastcgi_params;

   }

}
  1. nginx 载入 wechat.conf 文件:
ln -s /etc/nginx/sites-available/wechat.conf /etc/nginx/sites-enabled/wechat.conf 
service nginx restart
  1. 安装 php curl 包:
apt-get update
apt-get install php5-curl
  1. 下载 wechat 代码并上传至目录 /var/www/ :wechat_v1.0.2.zip (180 KB)
    3.png

“wechat” 文件夹在 /var/www 目录下,和 html 文件夹在同一级目录

  1. 使 unifi_cookie 文件可写权限:
chmod 777 /var/www/wechat/guest/unifi/unifi_cookie

至此,Cloud Key 部分已经完成。

第四部分:UniFi Controller 的设置

  1. 进入 Controller 管理AP后打开设置选项 —> 设置来宾政策
    —> 启用来宾 Portal

                                                                    —> 外部 Portal 服务器
    
                                                                    —> 填写 IP 地址(此处 IP 是第三部分中提到的外部 portal 服务器地址)。
    

guest.png

  1. 新建 SSID,需注意此 SSID 与微信公众平台中设置的 SSID 一致。(用于门店多台设备下的无缝漫游)。

ssid.png

加密方式:OPEN

来宾策略:勾选套用来宾策略

至此,UniFi Controller 设置已经完成,请进行外部 Portal 页面的开发。

最终效果:
success1.png


2016年12月12日更新:优化 Portal 页面唤醒微信应用


在群晖NAS上安装unifi controller以及配置微信连wifi
关于ubnt微信连WiFi,portal服务器的问题
UniFi 控制器来宾控制问题《新人贴》
微信连 wifi 操作手册 ——之 UBUNTU 的配置
微信连 Wi-Fi 操作手册 分享与讨论
总算搞定微信授权连接wifi了,附详细方案
#2

为什么不写一个完善的教程呢,也可以做一个虚拟机iso文件让我们下载安装上这个iso虚拟机文件就可以实现部署,写教程写一半这让我们这些搞技术的不是很懂得地方,都无法搞这么写实在是没有什么意义呀。