为你的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

相关推荐

  • Axure rp视频教程36集,免费!

    1-36集,免费学习~~~点击“阅读原文”或长按下面二维码立即观看视频。对教程有疑问,请咨询微信:13388182428

    2018-04-09
  • 用户体验与产品价值

    关注一下,更多精彩等着你户体验不等于用户可用性当你局限地将用户体验等同于用户接触UI时的可用性的时候,或者是局限地理解用户体验只是发生在用户使用产品过程中的时候,你就会说:有比它更重要的事情,比如用户价值、产品价值。是的,没错。如果产品没有用,即对用户没有价值,UI的可用性绝对不是最重要且,但是我们仍然得时刻提醒自己,可用性不等同于用户体验,可用性只是用户体验(使用中)的一部分而已。用户体验设计超越产品设计。用户体验设计包括组织开展用户...

    2018-03-03
  • 人工智能对用户体验的影响

    最近两年人工智能技术在金融、安全、交通、医疗、公共服务和制造业等领域逐渐落地,随着技术的成熟,人工智能将会在更多领域影响人类的生活。以人为本的人工智能设计会变得更加重要,本文会从安全性、效率、易用性、场景化、个性化五个方面阐述人工智能如何改善现有的产品和用户体验,这五个方面存在着各种联系并相互影响。安全性越接近系统底层的技术越影响用户体验,例如手机中毒或者信息被盗都会对用户产生巨大影响;如果关系到国家安全,整个社会的秩序都会被扰乱,所以...

    2018-03-26
  • 设计神器Figma出马!Sketch、PS有些慌了,因为...

    这年头真的是“长江后浪推前浪,一浪更比一浪强”,许多新产品、新工具纷纷冒出头来,就拿我们设计师的设计工具来说吧,Photoshop 算是一名老将了,它也是我们走上设计不归路的第一个敲门砖(当然还有 CDR);被 PS 折磨的要死要活的时候 Sketch 和 Affinity 杀了出来,一个是专攻用户界面的矢量设计,另一个则像是加强版的 PS 和 AI;Sketch 和 Affinity 还没用熟又冒出个 Figma:说出来你可能不相信,...

    2018-04-17
  • 为了更好的用户体验,谷歌拿出了“大棒”与“胡萝卜”

    点击关注36氪,置顶公众号专业的行业新闻及深度报道,不容错过━━━━━━这是著名分析师Ben Thompson对谷歌近期宣布的一组数据的评论,原标题为“THE AGGREGATOR PARADOX”以下为谷歌宣布的这组数据:现在共有3100万个网站加入了加速移动页面(AMP)计划,自去年10月以来增长了25%。在2月的第1周,谷歌向出版商发送了4.66亿个页面浏览量——比2017年1月增加了近40%。我们希望通过这样一篇文章,来带你了解...

    2018-02-27
  • 用户体验太差:银行要想超越支付宝、微信,请先把App做好!

    如今的支付市场可以说就是支付宝和微信支付的,他们占据了大部分的市场份额,即便是近年来各大银行也推出了APP服务来满足用户的移动上网需求,以通过此来获得用户的支持,可是大多数的银行App做的并不好,不仅使用难度高,人机交互做的也很差,完全不符合用户的操作习惯,体验度也不好,那么,为何银行如此有钱却做不好App呢?沐阳圈、子macd857近期的操作:3月19日分享的浙江东日四个交易日涨幅46%,3月21日分享的西仪股份三个交易日涨幅33%,...

    2018-04-01
  • 星环AI部门招聘 | 春风十里,星环有你

    星环简介星环科技是全球领先的大数据与人工智能基础平台供应商,专注于提供企业级容器云计算、大数据和人工智能核心平台的研发和服务,打造大数据和人工智能生态的“中国心”。公司以上海为总部,以北京、广州、多伦多为区域总部,并在南京、郑州、成都设有支持中心,同时在深圳、天津、武汉等地设有办事机构。经过多年自主研发,星环科技建立了四条产品线:一站式大数据平台Transwarp Data Hub(TDH)、基于容器的云操作系统Transwarp Op...

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

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

    2018-03-22
  • 美术丨创意Game可用性微交互设计:视觉空间微交互设计

    文章导言(悄然你的特别吸引了我)有些设计看起来简洁,有些设计看起来杂乱无章;有些设计让您快速找到想要的信息,有些设计却让您置身于迷宫之中;为什么要绞尽脑汁写这些细节上的差异?用户在使用产品时是怎么样的心理活动?这将是我分享的一些个人见解。前言:致敬设计学研书籍作者们,有机会写《创意Game可用性微交互设计》总结。如题我们将进行一场有趣的游戏可用性微交互设计讨论。考虑并不是写一本书来高谈阔论,而交互又无处不在: 版面、颜色、纹理、动画、文...

    2018-02-28
  • 百度用户体验总监刘超下课,HR内部贴称其“给百度同学造成严重伤害”

    百度用户体验总监刘超因演讲太low被嘘事件又有了进展,就在刚刚,又有网友晒出一张百度内网的帖子,告知员工“公司决定将刘超从百度管理团队除名”等信息,发帖者为“BaiduHR”:截图很快在微信朋友圈流传,但百度公关在相关朋友圈下面没有辟谣。以上帖子,可能是今天(7月3日)早间流传的、刘超在百度内网道歉原帖的最新回复,刘超在百度内网的道歉信如下:刘超在信中称,由于个人重视程度不足、演讲语言和穿衣不恰当的问题,导致在IXDC会议上演讲被嘘,后...

    2018-02-03