iOS 程序员眼中的客户端免登陆

来源:si1ence(@Mr_silence_fly)

简书

一、前言,为什么要做免登陆

2017年1月9日,蓄势已久的小程序正式上线,着实,张小龙 用完即走 的理念发挥的淋漓尽致,无需下载,扫码可用,用完即走

2017年互联网人口红利结束了,那么接下来除了内容的精耕细作外,就是提高流量的转化率,然而在流量转化为真实用户的道路上,一个登陆注册的入口挡住了运营活动多少真金白银砸出来的流量?

在谈免登陆之前呢,我想先大概说下客户端登录,想必大家都耳熟能详,一般情况下需要包含以下几个方面【括号内部分为可选项】:

SNS 第三方快捷登陆

邮箱+(验证码)+密码 登录注册

手机号+验证码+(密码)登录注册

(提示用户上次在本机登录方式 && 账号)

毫无疑问,相比于手机号、邮箱的登录注册,第三方登录是最方便的,在第三方app已经登录的前提下,需要以下两步操作:

用户第一次打开app需要小手点一下第三方图标

跳转到对应app后,点一下 确认授权 按钮即可返回自己的app完成登录

但是!!!

在用户还没体验到你app任何亮点之前,凭什么让用户进行如此繁杂的操作,不要让用户思考!不要让用户麻烦!尤其是用户对隐私日渐重视的今天!!且不说某麦某东等用户账号密码泄露,就说前几天某德利用手中大数据强行一把秀优越。。。

我就问你要是凯迪拉克车主你还会用高德么?!(默默掏出裤兜里的地铁卡看了一眼。。)

结论是用户是越来越重视自己的隐私的,用户在使用 app 的时候也不想进行任何多余的思考

因此在用户下载 app 之后第一次打开,要狠下心去掉一切不必要的弹框(除国行iOS10必须弹出的蜂窝网络权限之外,其他接收通知、定位等权限最好放在需要的时候再弹出)

除特殊软件(如网络电话)必须使用电话号码注册的,其他类似电商、内容浏览、交友软件、工具类等 app,都应该进行免登陆操作先让用户体验 app 的基本功能,在一些深度使用的高级功能上个添加门槛,提示用户进行登录注册操作

二、来几个常用 app 的例子

1. 今日头条:

打开 app 后以游客身份进入,可以进行常规的新闻浏览、查看评论、收藏、分享、消息反馈等操作

进行爆料、评论、查看阅读历史等操作的时候弹出登录框

点击更多登录方式效果

登录成功后,之前收藏的数据已迁移到正式用户名下

如果实在发送评论的时候触发的登录操作,登录成功后评论发出,提示用户评论发送成功

2. 每日开眼

同样的,进入 app 后可正常浏览,视频状态下进行点赞操作触发登录,你看这位女施主悬浮在泳池中,享受着柔和的阳光和微微清风,那曼妙的身材真是让作为用户的我忍不住登录,再退出,再登录。。。

但是!!!

如果你觉得我是因为女主人公的照片才举这个例子,呵呵,在下可不是那么肤浅的人,开眼的内容和设计以及 app 整体流畅度都很棒,但是免登陆这里有两个小瑕疵,在游客+横屏状态下

观看视频的时候,点击收藏按钮,直接modal出竖屏的登录框,这点对用户不是很友好

登录成功后,没有自动延续用户在登录之前的操作(收藏)

关于这两点的技术实现后面会讲

三、整体流程

用户首次进入 app 之后,判断之前是否在本机登录过,如果是用户首次登录,就调用 游客登录API,当然这个游客 guestId 是服务器根据设备号生成的,一般情况下,一个设备对应一个游客 guestId,而且这个游客 guestId 当然是不能展示给用户的(也可以在该接口返回一个上次登录信息,提示用户上次登录方式)

iPhone设备各种信息获取传送门 www.jianshu.com/p/b23016bb97af

然后使用这个游客 guestId 进行各项参数的初始化,比如数据库存取地址、下载文件路径、浏览记录等各方面操作的统计,当然该游客在进行一般操作的时候,就是使用这个游客 guestId 与服务器进行交互

接着就要考虑弹出登录框的具体时机,当然每个 app 的产品特性不一样,一般会在以下几种情况下弹出登录框:收藏、评论、购买会员、下单购买商品等深度操作。

还有就是万万不能在以下几种情况下弹出登录框:分享、用户反馈、添加到购物车等,因为这些操作是用户主动帮助分享app,提出意见,这时候弹出登录框,简直是搞事情!

弹出登录框(注意横竖屏的适配),用户选择进行登录后,获取到一个正式的用户 userId,重新初始化各项参数,隐藏登录页,进行数据库迁移合并、下载内容路径迁移(大多下载需要用户相应的权限,防止作弊)、历史记录迁移合并、购物车内容迁移合并等

最后继续进行用户需要登录之前的操作(通过block来实现)

若用户进行退出登录操作,先调用退出登录的api,然后再调用游客登录的api

四、代码设计:啥都别说了,都在代码里

1.首先在全局的控制器管理类写一个弹出 view 的方法

/** 大多情况下默认的添加方式,直接添加到最顶层的控制器上

  * title:弹出登录框的提示语,如登录后方可进行评论

  * block:用户被登录框所阻拦的操作(注意循环引用)

  */

- (void)transferControlToPortalViewWithTitle:(NSString *)title block:(void(^)())block;

2. 然后在收藏等深度操作需要提示游客登录的点击事件里面判断

- (void)favoredBtnTapped:(UIButton *)sender {

    // 如果是游客账户,就提示用户进行登录操作,否则就进行正常的收藏按钮点击事件

    if ([self.systemAccountManager isGuest]) {

 [self.systemVCManager transferControlToPortalViewWithTitle:@"登录后可进行收藏操作" block:^{

 [weakSelf doFavoredAction];

 }];

    } else {

 [self doFavoredAction];

    }

}

3. 比如要实现上文中提到的 今日头条 样式的登录框,不能用 present 也不能用 modal,因为那样的话上一级的控制器视图就会被移到另外一个 Window 上,不能实现其在原界面添加半透明遮罩的效果,因此采用下列方式

[fatherVC addChildViewController:portalVC];

[fatherVC.view addSubview:portalVC.view];

4. 在调用登录接口的成功回调里面调用一下之前传进来的 block,继续用户之前的操作

5. 进行横竖屏适配

由于带有半透明背景的遮罩的视图是以addChildViewController方式实现,因此自动适应父控制器的横竖屏,这里主要讲一下再次点击其他登录方式 进行账号密码输入的传统登录注册页 的横竖屏适配

- (void)signInWithAccountBtnTapped:(UIButton *)sender {

    SignInController *signInVC = [[SignInController alloc] initWithType:InputViewLogin];


    // 设置控制器的 modal 方式为遵循当前控制器的环境,实现当前是横(竖)屏就以横(竖)屏方式modal

    signInVC.modalPresentationStyle = UIModalPresentationCurrentContext;


    [self presentViewController:signInVC animated:YES completion:nil];

}

当然,在 SignInController 内部也要进行一些 UI 层级适配,在其 viewWillAppear 方法内部实现以下方法

// 根据状态栏方向得到当前页面横竖屏信息

UIDeviceOrientation deviceOrientation = (UIDeviceOrientation)[UIApplication sharedApplication].statusBarOrientation;

// 根据横竖屏状态,做出相应的 UI 层级调整,并做出相应标记

if (deviceOrientation == UIDeviceOrientationPortrait ||deviceOrientation ==

    UIDeviceOrientationPortraitUpsideDown) {

    [self doPortraitUIAdjustment];

    self.isLandScape = NO;

} else {

    [self doLandScapeUIAdjustment];

    self.isLandScape = YES;

}

然鹅,跑一下代码发现,虽然横竖屏的展示没错了,可是点击输入框后,键盘还是以竖屏的方式进行展现,因为我们只是把 SignInController 的 modal 方式和 UI 适配做了,此时控制器本身并不知道自己是横屏还是竖屏,因此要重写下面三个控制器方法

// 在横屏状态下,应该可以随设备重力感应进行 LandscapeRight 和 LandscapeLeft 两个方向的自动翻转

- (BOOL)shouldAutorotate {

    if (self.isLandScape) {

        return YES;

    } else {

        return NO;

    }

}


// 如果是横屏状态,应该支持 LandscapeRight 和 LandscapeLeft 两个方向,竖屏状态下只支持 Portrait

- (UIInterfaceOrientationMask)supportedInterfaceOrientations {

    if (self.isLandScape) {

        return UIInterfaceOrientationMaskLandscapeLeft | UIInterfaceOrientationMaskLandscapeRight;

    } else {

        return UIInterfaceOrientationMaskPortrait;

    }

}


// 默认的方向

-(UIInterfaceOrientation)preferredInterfaceOrientationForPresentation {

    if (self.isLandScape) {

        return UIInterfaceOrientationLandscapeRight;;

    } else {

        return UIInterfaceOrientationPortrait;

    }

}


#warning 至此,横竖屏适配算是大功告成了

大概的思路就是这些,由于跟项目相关性比较大,而且代码实现方式也比较简单,因此木有 demo,如果有其他问题欢迎在留言区进行交流

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,826评论 6 506
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,968评论 3 395
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 164,234评论 0 354
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,562评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,611评论 6 392
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,482评论 1 302
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,271评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 39,166评论 0 276
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,608评论 1 314
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,814评论 3 336
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,926评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,644评论 5 346
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,249评论 3 329
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,866评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,991评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 48,063评论 3 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,871评论 2 354

推荐阅读更多精彩内容