转载

为你的App增加WIFI认证检测，让用户体验更加丝滑

前言

前段时间在上海坐地铁时连接了花生地铁WIFI，打开QQ音乐开始听歌，QQ音乐居然给了我一个"WIFI认证提醒"的弹窗，点击认证就跳转到了花生地铁WIFI的认证页，之后顺利联网成功，体验非常爽。作为一名iOS开发，不禁思考这个是怎么做到的呢？忘记WIFI重新连接后，打开手机里各个应用轮番测试一遍，发现QQ音乐、QQ、QQ空间三个应用都做了比较好的WIFI认证提示：

成功提示.png

而其它的大应用如微信、手淘、支付宝、钉钉、美团、点评、爱奇艺、百度地图等则都没有给出认证提醒，而是提示我检查网络设置等，说明许多App都没重视到这个细节，而其实现在这种场景还是很多的，比如花生地铁WIFI、i-Shanghai、i-hangzhou、alibaba-guest和其它许多公共场所的WIFI，还是有必要做一个优化~

为你的App增加WIFI认证检测，让用户体验更加丝滑

失败提示.png

关于Captive Portal

经过一番调研，这种需认证才能使用的WIFI，使用的是Captive Portal机制，中文通常译作“强制主页”或“强制登录门户”，一个Captive Portal是一个Web登录页面，通常由网络运营商或网关在用户能够正常访问互联网之前拦截用户的请求并将一个强制登录或认证主页呈现（通常是通过浏览器）给用户。该页面可能要求用户输入认证信息、支付、接受某些条款或者其他用户授权等，随后用户才能被授权访问互联网。该技术广泛用于移动和个人宽带服务，包括有线电视、商业WiFi、家庭热点等，也可用于访问企业和住宅区有线网络。详细可参看wiki：https://en.wikipedia.org/wiki/Captive_portal

大多数需认证WIFI实现Captive Portal是通过HTTP重定向的方式，也有一些是通过DNS劫持或ICMP重定向的方式。

如何检测Captive Portal

iOS和Android系统其实早就实现了Captive Portal的检测机制，只是有一些WIFI会绕过这样机制。就需要我们额外再做一次检测了。

详细可参看：

根据Captive Portal的实现方式和特点，我们有以下两种常用检测方法：( 欢迎补充~ )

1. 判断网页的host是否完全变了

由于连接了需认证WIFI后，通过浏览器访问任何网页都会得到Captive Portal页面，所以对于iOS应用，一个比较简单的检测方法是用WKWebView加载某一个网页，在decidePolicyForNavigationAction代理方法里，拿到navigationAction.request.URL看host是不是完全变了，如果完全变了即可判断当前WIFI需要认证。

- (void)webView:(WKWebView *)webView decidePolicyForNavigationAction:(WKNavigationAction *)navigationAction decisionHandler:(void (^)(WKNavigationActionPolicy))decisionHandler {
    decisionHandler(WKNavigationActionPolicyAllow);
    
    self.trueUrl = navigationAction.request.URL;
    if (self.openTestMode) {
        // 测试用 这个url是上海花生地铁wifi的认证页，连上上海花生地铁wifi后，未认证时访问所有网页都会被重定向到该地址
        self.trueUrl= [NSURL URLWithString:@"http://portal.wifi8.com/wifiapp"];
    }
    if ([self.trueUrl.host containsString:@"baidu.com"]) {
        if (_networkCheckComplection) {
            _networkCheckComplection(NO);
            _networkCheckComplection = nil;
        }
    } else { // 网页被重定向到了self.trueUrl，wifi需要认证
        if (_networkCheckComplection) {
            _networkCheckComplection(YES);
            _networkCheckComplection = nil;
        }
        
        if (_needAlert) {
            UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"WI-FI认证提醒" message:@"检测到当前WI-FI需要认证才能使用，请尝试去认证网络" delegate:self cancelButtonTitle:@"取消" otherButtonTitles:@"认证", nil];
            [alert show];
            _needAlert = NO;
        }
    }
}

Android端的检测也可以采用这样的方式，具体可参看google的文档：https://developer.android.com/reference/java/net/HttpURLConnection.html ，其中提到的判断机制如下：

为你的App增加WIFI认证检测，让用户体验更加丝滑