来源：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，如果有其他问题欢迎在留言区进行交流
网友评论