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

相关推荐

  • 交互设计七大定律

    除非有更好的选择,否则就遵从标准。——阿兰·库珀(交互设计之父)1、费茨定律(Fitts’ Law)使用指点设备到达一个目标的时间,与当前设备位置和目标位置的距离(D)和目标大小(S)有关。用数学公式表达为:时间 T = a + b log2(D/S+1)。T指的是:移动设备所需时长;S指的是:目标区域的面积大小。D指的是:设备起始位置和目标位置之间的距离;a、b指的是:经验参数,它们依赖于具体的指点设备的物理特性,以及操作人员和环境等...

    2018-02-03
  • 交互设计 ▏如何在作品集中展现自己的设计风格和思考过程?

    交互设计是对于用户产品使用行为的优化设计。它关注的是“用户场景”和“用户心理”,设计的对象是“用户行为”,达成的目标是“能用、易用、想用”。作品集其实是一个人设计风格和思考过程的折射,一个好的交互设计作品集需要在作品中展示你解决了什么问题,如何解决的,以及最终成果。今天小编给大家带来了一位学姐的交互设计研究生作品集,希望可以给大家带来一些启发啦!!!学姐的作品集中一共有3个项目,分别是项目1:Wish项目2:RT: BAGS项目3:FI...

    2018-04-22
  • 联想实习 | 手机事业部招聘交互设计实习生

    公司简介联想是一家营业额达460亿美元的《财富》世界500强公司,在全球消费、商用以及企业级创新科技领域居领先地位,为用户提供安全及高质量的产品组合和服务,当中包括个人电脑﹙经典的Think 品牌和多模式YOGA品牌﹚、工作站、服务器、存储、智能电视,以及一系列移动互联产品如智能手机﹙包括联想和摩托罗拉品牌﹚、平板电脑和应用软件等。招聘岗位手机事业部-交互设计实习生岗位描述1. 参与联想ZUI手机操作系统的交互设计;2. 参与产品的规划...

    2018-04-21
  • UED从繁到简三个阶段

    UE设计一般需要经过三个阶段。一个交互设计师,从学徒到出师,不说100%,那也有99%的人走过这是哪个阶段。如果没有,说明他已经转行做自己的安利去了,专门在网上发些如何教人做交互啊。什么是交互设计师啊等等忽悠别人的文章。(就是再说我)我们来详细看一下这三个阶段:第一阶段,多数都是刚入职人生第一份工作或者是刚踏上这段交互征程的新手。对交互设计其实是一知半解的。这一阶段谈论的什么用户体验啊,流程体验啊,几乎可以视为是夸口奇谈。我认为在这个阶...

    2018-03-27
  • 如何平衡广告盈利和用户体验?

    如果你是一名手机应用开发者,你肯定知道广告可以为你的应用提供巨大的收入潜力。可以说手机应用就是在为流量主下金子: 到2020年,将会有高达1890亿美元的收入,而其中仅应用内广告带来的收入就会达到1170亿美元。事实上,我们最近对1000多名应用程序开发者进行了调查,发现高达84%的人承认他们通过广告将应用变现 —— 61%的人声称广告带来了最多的收入。但是,一如既往,能力越大,责任越大。作为一名应用开发者,你要负责确保用户的使用体验,...

    2018-04-06
  • 最近很火的租衣APP用户体验报告

    以下内容并非广告,但是如果衣二三和女神派的营销部门看到的话,要不要考虑来主动给我发点广告费?其实租衣APP这个东西应该火了好一阵了。有我微信的宝宝们可能知道,我这个人有个很大的毛病就是喜欢买衣服。且买来并穿不了一两次,接着就开始在朋友圈各种亏本卖闲置。最近整理衣服发现实在太多真的不能再剁手了,因为根本没地方放。然后突然想到了公司一个客户和我说过她一直用一个租衣APP叫衣二三。看到这个APP的时候我的内心是激动的 --- 终于有软件解决我...

    2018-03-30
  • 邀你参与丨2018中国用户体验行业调研

    什么是用户体验设计?往小了说,它包括视觉设计、交互设计、用户研究等,宽泛一点讲,产品、文案、服务流程的设计也是用户体验的一部分。用户体验不是一个独立的岗位,它应该是整个团队的一种思考维度。而在其中,你又扮演着什么样的角色呢?在行业中你的专业能力和知识储备在什么层次?用户体验行业的未来,将会往何处发展?自2013年以来,IXDC已连续开展了5次用户体验行业调研,回收了上万份从业人员的反馈,并总结出调研报告,以全局角度俯瞰,了解行业现状与存...

    2018-04-19
  • 设计中的交互设计——什么是交互设计

    上一篇我们探讨了设计的本质,结论是设计的本质是解决问题,满足人们的需要。有的朋友可能会问:工程学也是解决问题,比如造一座桥,就解决了一条河两岸的交通问题。那么设计和工程学有什么区别呢?这里我想补充一点:设计是漂亮得解决问题,即设计除了需要考虑如何为人们服务,还需要考虑以一种美观的、令人赏心悦目的方式来服务。因此,“漂亮”这个因素,也很必要。既然交互设计是设计学科里的一个分类,那么交互设计一定首先满足设计的本质:漂亮得解决问题。下面我们来...

    2018-03-13
  • 想快速玩转Axure,同时提升产品和交互能力,试试这个秘密武器

    腾讯课堂&起点学院联合打造的给产品经理的Axure课程如果你想学好Axure,不让Axure阻碍自己的发展,却苦于这些问题?1、没人监督指导,自学还没到一个周,就想放弃2、按教程操作,却出不了效果,又不知错在哪里3、难的知识内容看着费劲,不会技巧,效率低浪费时间那么这个课程很适合你,2280位同学已经通过这个课程摆脱了Axure困扰。这个课程能带给你什么如果你是产品新人,还没有很好的产品作品,axure实战班里做的原型作品,学到的axu...

    2018-04-30
  • Axure RP属于产品经理快速原型设计工具(一:简述)

    一、介绍Axure RP是一个专业的快速原型设计工具。Axure(发音:Ack-sure),代表美国Axure公司;RP则是Rapid Prototyping(快速原型)的缩写。Axure RP是美国Axure Software Solution公司旗舰产品,是一个专业的快速原型设计工具,让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具,它能快速、高效...

    2018-03-10