一、前言,为什么要做免登陆
- 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 当然是不能展示给用户的(也可以在该接口返回一个上次登录信息,提示用户上次登录方式)
- 然后使用这个游客 guestId 进行各项参数的初始化,比如数据库存取地址、下载文件路径、浏览记录等各方面操作的统计,当然该游客在进行一般操作的时候,就是使用这个游客 guestId 与服务器进行交互
- 接着就要考虑弹出登录框的具体时机,当然每个 app 的产品特性不一样,一般会在以下几种情况下弹出登录框:收藏、评论、购买会员、下单购买商品等深度操作。
- 还有就是万万不能在以下几种情况下弹出登录框:分享、用户反馈、添加到购物车等,因为这些操作是用户主动帮助分享app,提出意见,这时候弹出登录框,简直是搞事情!
- 弹出登录框(注意横竖屏的适配),用户选择进行登录后,获取到一个正式的用户 userId,重新初始化各项参数,隐藏登录页,进行数据库迁移合并、下载内容路径迁移(大多下载需要用户相应的权限,防止作弊)、历史记录迁移合并、购物车内容迁移合并等
- 最后继续进行用户需要登录之前的操作(通过block来实现)
- 若用户进行退出登录操作,先调用退出登录的api,然后再调用游客登录的api
四、上代码之前,谈谈登录注册的一些小细节
- 进入到登录注册页后,键盘应立刻弹出,需要邮箱的弹出字母键盘,需要手机号的弹出数字键盘
- 当 两个输入框内容没有都达标之前,action按钮应该设置为disabled
- 输入内容的时候考虑小屏幕适配,自动滑动到合适位置
- 在文本输入框有内容之后,右侧应该设置❎按钮,供用户一键删除
- 账号有没有长度限制,类似电话格式的判断在前端做比较方便,比如在密码框 becomeFirstResponder 的时候,就直接判断账号格式,如果错误需提示用户
- 密码输入框需要设置明文暗文按钮,以供用户随时校验
- 点击登录按钮后弹出菊花(当然我指的是 UIActivityIndicatorView,不是那个肥皂那个菊花)或者动画,防止多次发送网络请求
- 对于登录注册信息出错,这个最好是能做到及时反馈,考虑下web端注册账户的时候,昵称是否已被占用能够在用户输入就提示,如果每次兴冲冲输入一大堆消息后,满怀期待的点击注册按钮,结果提示“您的昵称已被占用”,你对这个网站的好感是不是会降低那么一丢丢?因此最好能够在保证用户行为流畅的基础上提示用户,比如
- 昵称限制10位,那么输入第11位的时候就应该是无效的
- 最好统一登录注册界面:用户输入手机号、邮箱之后,实时查询数据库是否已注册,然后更新按钮状态
- 也需要考虑网络超时、请求出错、服务器宕机、短信未发送成功等异常信息
- 对于一些金融类相关的app,为了防止服务器被攻击(当然也),是不是要考虑同一IP请求两次后添加验证码(倒计时一般是前端固定的代码)
- 如果登录失败,提示的信息一定要准确,比如是验证码错误,还是账户名密码错误虽然这个提示信息一般都是服务器同学来做
五、代码设计:啥都别说了,都在代码里
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];
此处更正一下,感谢 CZAnchor 提出的方法,这里是可以通过 present 方式实现的,代码如下:
UIViewController *rootVC = [UIApplication sharedApplication].keyWindow.rootViewController;
UIViewController *baseVC = rootVC;
while (baseVC.presentedViewController) {
baseVC = baseVC.presentedViewController;
}
if ([[UIDevice currentDevice].systemVersion floatValue] >= 8.0) {
portalVC.modalPresentationStyle = UIModalPresentationOverCurrentContext;
baseVC.definesPresentationContext = YES;
[baseVC presentViewController:portalVC animated:NO completion:^{}];
} else {
baseVC.modalPresentationStyle = UIModalPresentationCurrentContext;
[baseVC presentViewController:portalVC animated:NO completion:^{}];
}
4. 在调用登录接口的成功回调里面,需要进行两个操作
4.1 首先进行数据迁移:
- 已下载内容文件 的迁移,由于某些下载内容是需要相应权限的,因此都是每个账号对应一个存储路径,也是在一定程度上防止账号过分共享造成的利益损失
/** 迁移已下载的文件 */
#warning 关于游客状态下下载的内容,需要考虑两部分:
1. 登录的正式用户之前未在本机上登录过,创建用户的下载路径后直接将游客的下载内容全部迁移过去(若只是登录过没有下载内容,就直接全部迁移过去);
2. 登录的正式有用户之前在本机登录过并有下载内容,则需要将两个路径下的下载内容合并
- (void)transferDownLoadedFile {
// 获取下载文件根路径
NSArray *paths = NSSearchPathForDirectoriesInDomains(NSLibraryDirectory, NSUserDomainMask, YES);
NSString *libraryDir = [paths objectAtIndex:0];
NSString *rootFilePath = [NSString stringWithFormat:@"%@/%@",libraryDir,@"## 这里是项目中下载文件的路径 ##"];
// 分别获取游客和正式用户的下载路径(方便起见直接使用对应ID作为路径名称)
NSString *guestPath = [NSString stringWithFormat:@"%@/%@", rootFilePath, self.accountManager.guestId];
NSString *userPath = [NSString stringWithFormat:@"%@/%@", rootFilePath, self.accountManager.userId];
// 获取文件管理器
NSFileManager *manager = [NSFileManager defaultManager];
// 获取游客的下载文件数组
NSError *error = nil;
NSArray *guestFilesArr = [[NSFileManager defaultManager] contentsOfDirectoryAtPath:guestPath error:&error];
if (error) {
NSLog(@"contentsOfDirectoryAtPath guestPath:%@", error);
}
// 遍历游客的文件
for (NSString *fileName in guestFilesArr) {
// 拼接处 该文件在 游客状态 && 正式用户状态 的存储路径
NSString *guestFileDir = [guestPath stringByAppendingPathComponent:fileName];
NSString *userFileDir = [userPath stringByAppendingPathComponent:fileName];
// 如果正式用户 下载文件中不包含该文件,就创建一下
if (![manager fileExistsAtPath:userFileDir]) {
[manager createDirectoryAtPath:userFileDir withIntermediateDirectories:YES attributes:nil error:&error];
}
BOOL isDir;
if ([manager fileExistsAtPath:guestFileDir isDirectory:&isDir] && isDir) {
error = nil;
NSArray *childFiles = [[NSFileManager defaultManager] contentsOfDirectoryAtPath:guestFileDir error:&error];
if (error) {
NSLog(@"contentsOfDirectoryAtPath dir:%@", error);
}
// 遍历该文件夹内子文件,全部迁移到 正式用户 名下的文件
for (NSString *childFile in childFiles) {
NSString *filePath = [guestFileDir stringByAppendingPathComponent:childFile];
NSString *destPath = [userFileDir stringByAppendingPathComponent:childFile];
error = nil;
[manager moveItemAtPath:filePath toPath:userFileDir error:&error];
if (error) {
DDLogError(@"moveItemAtPath to path error:%@", error);
//如果正式用户下该文件存在(即用户之前在本机登录并下载过该文件)会报错,那么就将游客路径下的改文件删除
[manager removeItemAtPath:filePath error:&error];
}
}
}
}
}
- 迁移数据库:这部分内容着实跟项目本分的业务、封装关系太大,在这里以一个 video 文件的下载记录为例,以 FMDB 为载体大概讲一下思路
// 1. 获取游客的 db 文件路径 guestDataBasePath
// 2. 打开游客该 db 文件
fmDataQueue = [FMDatabaseQueue databaseQueueWithPath:path];
[fmDataQueue inDatabase:^(FMDatabase *fmDatabase) {
if ([fmDatabase open]) {
[fmDatabase setShouldCacheStatements:YES];
// 创建 SQL 语句
NSString *sqlStr = [NSString stringWithFormat:@"%@%@%@%@%@%@%@",
@"CREATE TABLE IF NOT EXISTS MYVIDEO (VIDEOID TEXT PRIMARY KEY ",
@",videoname TEXT",
@",info TEXT",
@",coverfilename TEXT",
@",urlpath TEXT")"];
BOOL isExecute = [fmDatabase executeUpdate:createStatement];
if (isExecute) {
// 如有必要,可检查一下表结构是否已升级,此处不再赘述
} else {
NSLog(@"error occured while creating MYVIDEO table");
}
} else {
NSLog(@"open datebase failed");
}
}
// 3. 查询游客账户下已下载的 video
// 创建空数组用于存放 video 对象
NSMutableArray *videoArray = [[NSMutableArray alloc] init];
[fmDataQueue inDatabase:^(FMDatabase *fmDatabase) {
// 书写 sql 语句
NSString *query = [NSString stringWithFormat:@"SELECT videoid,videoname,info,coverfilename,urlpath, FROM MYVIDEO "];
NSString *sqlQuery;
if (wheresql != nil) {
sqlQuery = [NSString stringWithFormat:@"%@%@", query, wheresql];
} else {
sqlQuery = query;
}
// 按时间降序排序
sqlQuery = [sqlQuery stringByAppendingString:@" ORDER BY time DESC "];
FMResultSet *resultSet = [fmDatabase executeQuery:sqlQuery];
if ([fmDatabase hadError]) {
NSLog(@"FMDB Error %d: %@", [fmDatabase lastErrorCode], [fmDatabase lastErrorMessage]);
}
// 取出查询的结果集
while ([resultSet next]) {
VideoClass *video = [[VideoClass alloc] init];
video.videoId = [resultSet stringForColumn:@"videoid"];
video.videoTitle = [resultSet stringForColumn:@"songname"];
video.videoDescription = [resultSet stringForColumn:@"info"];
video.coverFileName = [resultSet stringForColumn:@"coverfilename"];
video.path = [resultSet stringForColumn:@"urlpath"];
[videoArray addObject:video];
}
[resultSet close];
}];
// 4. 关闭游客 db
[fmDataQueue inDatabase:^(FMDatabase* fmDatabase) {
if ([fmDatabase close]) {
NSLog(@"close MYVIDEO succes ....");
}
else {
NSLog(@"close MYVIDEO error");
}
}];
[fmDataQueue close];
fmDataQueue = nil;
// 5. 打开 正式用户 下的 db 文件(获取游客 db 路径后,代码同上打开 游客 db)
// 6. 将 游客 下载的video 数据插入到 正式用户的 db 中
[fmDataQueue inTransaction:^(FMDatabase *db, BOOL *rollback) {
[array enumerateObjectsUsingBlock:^(VideoClass *video, NSUInteger idx, BOOL * _Nonnull stop) {
[self insertOrUpdateCourse:video withDB:db];
// 创建插入数据的 sql 语句
NSString *insertSql = @"INSERT OR REPLACE INTO MYVIDEO (videoid,videoname,info,coverfilename,urlpath,) VALUES(?,?,?,?,?)";
BOOL result = [fmDatabase executeUpdate:insertSql,
video.videoId,
video.videoTitle,
video.videoDescription,
video.coverFileName,
video.urlPath];
if (!result) {
NSLog(@"操蛋!插入 MYVIDEO data failed");
} else {
NSLog(@"牛逼!Insert MYVIDEO data success, U did it!");
}
}];
}];
// 7. 合并数据库成功后,根据游客 db 路径,删除 游客 db 文件
NSFileManager *fm = [NSFileManager defaultManager];
BOOL success = [fm removeItemAtPath:fullPath error:&error];
if (error) {
NSLog(@"怎么会删除失败了,难道我姿势不对?delete file at path error:%@", error);
}
4.2 然后进行隐藏登录界面,并调用一下之前传进来的 block,继续用户之前的操作
- (void)hidePortalView {
if (self.loginSucessBlock) {
self.loginSucessBlock();
}
UIView animateWithDuration:0.2 animations:^{
self.portalVC.view.alpha = 0;
} completion:^(BOOL finished) {
[self.portalVC.view removeFromSuperview];
[self.portalVC removeFromParentViewController];
}
}
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,如果有其他问题欢迎在留言区进行交流
网友评论
欢迎订阅《大圣归来学Android》https://toutiao.io/subjects/12120
楼主棒呆,不是一只简单的程序猿!!
------------------------------------
文章段落头部的那些点,给我这个头脑简单的读者用户造成了困扰,还以为观点是并列关系,反复看了几遍才发现并不是。
个人认为文章分析的还是挺不错的,也是学习了好几天呢!!!在此有点自己的小想法也拿来一起分享下。
普遍来讲注册登陆可以按照产品类型 社交类、工具+社交类、纯工具类依次降低注册登陆的门槛,需要补充的一点是具体登陆模式应以产品而异,就像定性与定量的关系,未央猪肉比鸡肉好吃是因为未央炖起来更好吃,但其他猪肉就未必通用!(嗯,我没吃过,但我饿了)。
要想真正分析一个产品到底适合什么注册登陆逻辑需要依靠真实的数据,用户数据说话,调研访谈最基础不过了,有条件A/B测试balabala更好,根据真实线上数据去对比转化率,漏斗分析真实的转化路径等,基于市面的注册登陆逻辑而又不拘泥于这些逻辑,得出最适合你自己产品的注册登陆逻辑与模式更棒。
还有,突然想到,用户评价是否喜欢一个产品很大程度上取决于用户记忆自我评估的两点,一是使用中感受最强烈的峰值 二是终点瞬间的感受,也就是著名的“持续时间忽略”理论。回到在产品使用的登陆这一模块,个人认为,作为打着为用户服务的资本家而言要获取用户数据不可能完全不登陆的,现在流行的所谓免登陆本质上无非还是从某种意义上降低产品使用门槛,简化登陆流程。那这样在弱化登陆障碍体验的同时,产品核心部分在牛逼一下再独一无二一下,就有了势不可挡的峰值体验!!!用户凭借记忆自我中对产品峰值体验的认知给产品打分,嗯。没错,就是我们想要的结果!!![##哈哈哈仰天长笑]
这也就是为什么我们总能发现迪士尼乐园或者iphone的一些糟糕点,但我们还是会给他人推荐迪士尼或者iphone的道理一样。
总之!!我觉得一个有产品思维的程序员是最帅的!反正我也是个小白,互相交流啦!
UIViewController *rootVC = [UIApplication sharedApplication].keyWindow.rootViewController;
UIViewController *baseVC = rootVC;
while (baseVC.presentedViewController) {
baseVC = baseVC.presentedViewController;
}
if ([[UIDevice currentDevice].systemVersion floatValue] >= 8.0) {
portalVC.modalPresentationStyle = UIModalPresentationOverCurrentContext;
baseVC.definesPresentationContext = YES;
[baseVC presentViewController:portalVC animated:NO completion:^{}];
} else {
baseVC.modalPresentationStyle = UIModalPresentationCurrentContext;
[baseVC presentViewController:portalVC animated:NO completion:^{}];
}
好像可以在原界面实现半遮罩的效果 吧~~~~~~
vc.modalPresentationStyle = .OverFullScreen
vc.modalTransitionStyle = .CrossDissolve
这样 也不行?
单独的遮罩效果可以吧。。。