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

前言前段时间在上海坐地铁时连接了花生地铁WIFI,打开QQ音乐开始听歌,QQ音乐居然给了我一个"WIFI认证提醒"的弹窗,点击认证就跳转到了花生地铁WIFI的认证页,之后顺利联网成功,体验非常爽。作为一名iOS开发,不禁思考这个是怎么做到的呢?忘记WIFI重新连接后,打开手机里各个应用轮番测试一遍,发现QQ音乐、QQ、QQ空间三个应用都做了比较好的WIFI认证提示:成功提示.png而其它的大应用如微信、手淘、支付宝、钉钉、美团、点评、爱...

前言

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


为你的App增加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];

            ;

            _needAlert = NO;

        }

    }

}


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

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

图片.png

有一点需要注意的是,判断host完全相等不是特别合适,比如在WKWebView里访问http://www.baidu.com ,可能会被重定向到http://m.baidu.com ,这样则不属于WIFI需要认证的情况。

2. 访问特定网页,判断HTTP状态码

也可以通过判断HTTP状态码的方式来检测Captive Portal。比如访问google提供的一个空白网页http://clients1.google.com/generate_204 ,如果返回的HTTP状态码是204,则可判断当前网络无需认证,否则需要提醒用户认证网络。

详细可参看:

关于Android的captive portal

检测Captive Portal的iOS版Demo

基于判断host的方式,我写了一个检测Captive Portal的小Demo放在了github,其中用于Captive Portal检测的工具类是CaptivePortalCheck,没有任何外部依赖,即拿即用,欢迎尝试~

文中内容如有不对,欢迎指正~

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

粘贴图片3.png

作者:半尺尘

链接:https://www.jianshu.com/p/a5f179bb46af

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

原创文章,作者:交互精选,如若转载,请注明出处:https://www.iamue.com/35169/

(0)
交互精选交互精选
上一篇 2018-02-07
下一篇 2018-02-07

相关推荐

  • 艾璐斯刘光有:用户体验为先 九字方针瞄准盈利点

    2018年3月2日下午,由慧聪网主办、慧聪汽车用品网承办、广东哈弗石油能源股份有限公司总冠名的哈弗润滑油杯’2017年度汽车用品行业品牌盛会颁奖盛典在北京钓鱼台国宾馆芳华苑隆重举行,来自汽车后市场商(协)会领导、获奖企业代表、渠道商、终端门店精英、主流媒体记者等嘉宾共聚一堂,聚焦汽车用品行业热点话题,全面解读行业最新发展趋势,推动汽车后市场快速有序发展!香港艾璐斯实业有限公司总经理刘光有行业盛典现场嘉宾共聚一堂在本次盛会上,香港艾璐斯实...

    2018-03-06
  • 交互设计 | Tmall金妆奖 交互体验装置

    天猫金妆奖 · 体验交互装置中国上海· 3.04.2018***装置交互体验概念***Step 1: 待机状态Step 2: 装置检测到观众体验,即将展开体验流程Step 3: 系统提示拍摄区域Step 4: 实时检测体验者面部表情Step 5: 拍摄表情即将开始Step 6: 拍摄完成,正在为观众制作纪念卡***纪念卡设计***纪念卡/拍摄表情等级1:平静纪念卡/拍摄表情等级2:微笑纪念卡/拍摄表情等级3:开心纪念卡/拍摄表情等级4:...

    2018-03-15
  • 来!说一个影响用户体验的网贷“非典型”案例

    点击上方文字“Fintech首席体验官”关注最在乎你体验的公众号这是一个体验至上的时代,无体验,非产品。今天的推送选择了最近在新金融圈,因体验问题而引发的一个“非典型”案例,或许可以作为大家在追求合规过程中的一个警示。先来聊个5毛钱的吧……无论在哪个行业,用户体验都一直被强调。毫不夸张地说,一次用户体验上的失误,给平台带来的伤害几乎是不可估量的。近期,深圳网贷平台人人聚财就遇到了这样的事儿。【背景资料】人人聚财成立于2011年,主营业务...

    2018-03-28
  • 【交互设计排名】SKD独家 | 美国交互设计排名

    Alias工业设计点击关注 和工业设计做朋友关注数模师  JACKAlias建模学习ALias建模咨询加好友你心目中的交互设计是什么样的 ?也许Google这个产品所创造的场景是你所畅想的交互设计可以被认为是当下最热门的专业,受热捧的程度可以和金融媲美。但是,你真的了解开设这个专业的院校吗?每个院校之间的差异和设置有什么不同?SKD根据院校开设的课程设置、专业排名,特邀我们资深的教研团队根据对自身院校的了解、利用兄弟院校的校友资源、以及...

    2018-04-08
  • 刘克成:历史的回顾——90年代黄帝陵整修经历和关键点 | 黄帝陵国家文化公园规划设计大师工作营

    📌 编辑 | 璇仔编者按:“黄帝陵国家文化公园规划设计大师工作营”由陕西文化产业投资控股(集团)有限公司、陕西省黄帝陵文化园区管理委员会、黄陵县人民政府和CBC建筑中心共同发起。邀请了中国最具有代表性的六位规划大师及其领衔的团队作为核心设计团队,通过共同驻地对黄帝陵国家文化公园的调研、研讨,分别提出对未来黄帝陵国家文化公园的规划设计理念及方案。2018年3月23日,西安建筑科技大学建筑学院教授刘克成将作为探班大师来到工作营现场,以“历史...

    2018-03-22
  • 用户体验进一步提升!微信官方将优化小程序授权

    序多多小程序无需开发,轻松上手,小程序极速免费生成!十分完美的事物中在这个世界上是不存在的,每个事物需在近乎完美的道路上苛求自己,不断完善。小程序亦是如此,它是互联网时代进步的产物,被互联网大佬们追逐,被用户用完即走。但它也有被人诟病的地方,即会在用户首次启动时直接要求授权,甚至有的小程序会出现若用户不授权,小程序将会出现异常,或进入死循环的情况。相信很多用户都遇到过不授权便会出现死循环的小程序,最后只能退出微信重新进入,造成用户体验很...

    2018-04-21
  • 用户体验要素(上)

    我们天天挂在嘴边的用户体验为什么如此重要?到底什么才是用户体验?在繁忙的生活中,从你起床关闭闹钟到洗脸刷牙再到坐车去公司上班,在这个过程中,和你关联的东西,闹钟、牙刷、牙膏、公交车、地铁等,如果这一系列的事物都没有注重用户体验,早上起床闹钟响了没起来,急急忙忙去坐地铁到公司上班,地铁标识不清晰,你坐反了,很晚到公司,接着被领导大骂一通,灰扑扑的坐到座位上,然而你这一天才刚刚开始,这么糟心的早上让你一天都不顺利。如果没有好的用户体验,你每...

    2018-04-25
  • 结合实际案例,一篇看懂用户体验五个层次

    ♝点击上方“交互设计学堂”关注我们,送电子书看过了很多描述用户体验五个层次的文章,但感觉很多都浅尝而止,今天我特地结合了十来个案例对用户体验进行了一次相对全面的阐述,希望大家在阅读时也能够同样寻找相关产品进行比照和论证,想必会更有收获。概要用户体验设计就是“以用户为中心的设计”,即创造“每件事都按照正确的方式在工作”的用户体验,让用户宾至如归,就像《Don’t make me think》里提到的“这会让用户觉得自己更聪明,更能把握全局...

    2018-04-10
  • 门诊的用户体验,决定患者的选择

    口腔之声每晚8:00与您一起看口腔汇聚国内外口腔专家3000个视频随便您看世界华人牙医聚集地促进行业交流的价值门诊的用户体验,决定患者的选择现今的口腔医疗市场竞争,呈现出来的形态,公立医院的患者,到处挤满了人,号挂的满满的,而民营口腔医疗机构,又是大肆的营销活动,这家公益宣传,那家优惠活动,这家明星站台,那家老外看诊!的的确确呈现出同一个国家,面对两个市场的景象,当然每一个口腔医疗机构,或者说每一个家口腔,都有服务不同的患者层级。最近经...

    2018-05-06
  • 曝光HR简历筛选逻辑:关键词

    yooooooooooo!这里是周一很不想上班的校花~春招还在如火如荼的进行着,也不知道大家现在有没有拿到offer呢,有的就先恭喜啦,没有的也别着急,心态放平,慢慢来嘛。今天这篇文章,HR现身说法讲述平日筛选简历的真实准则。适合有过实习经历、学习经验的同学优化简历。只需多下一点功夫,简历过筛率大大提高!文 | 撕兄很多人很疑惑,HR到底是如何查找简历,筛选简历,判断简历匹配度的。大部分情况下,只要你能懂得HR是如何查看简历,判断匹配度...

    2018-04-08