注册信息验证时的用户体验提升


点击访问原文
您还可以加入全栈技术交流群(QQ群号:254842154)


注册账号时,通常会需要用户填写邮箱或手机号,这两个信息对于同一个网站或App来说需要有这两个特性:唯一性,有效性。

唯一性是方便我们能准确地“认识”到用户,就像公民身份证号一样,一个用户只能对应一个身份证号,同样地,一个邮箱或手机号只能在网站上被注册一次,被用作登录的账号。

有效性是为了确保用户信息是经过验证的,这一点需要用户自己来承担。通常,我们通过向用户填写的邮箱发送激活邮件,或者向用户的手机里发送短信验证码来保证。另外,在有效性得到保证后,对用户来说也是有极大好处的,其中之一就是可以很方便地重设密码。

验证邮箱有效性流程:填写注册信息(包括邮箱) -> 注册完成 -> 系统发送激活邮件到邮箱 -> 用户登录邮箱点击激活链接 -> 验证成功。激活链接里一般会有一个激活码,后台保证该激活码的有效时间。

验证手机号有效性流程:填写注册信息(包括手机号) -> 注册完成 ->系统发送验证码到手机 -> 用户接收短信并填写验证码 -> 验证成功。

邮箱验证的过程不在本文的讨论范围,以后有空再另写文章。这里重点讨论使用手机App的场景下,如何提高用户接收短信验证码的体验。我认为可以从以下3方面入手:

短信内容

短信内容里要包含以下信息:公司名称,验证码。还有一些附加信息,如告知验证码的过期时间,公司的网站地址,甚至插播一些广告(好吧,微信朋友圈都开始打广告了,我们也别太矜持了)。这些信息的排列最好能有一个优先级。建议排序:公司名称 -> 验证码 -> 其他信息。

手机在接收到短信时,通常都会有信息预览的功能(假如该功能关闭了,那就没辙了,不过收件箱里也是有预览的)。Android手机会在顶部通知栏中显示,或弹框,iPhone手机也会弹框。预览功能只会显示短信内容的很有限部分,多余的必须点击进去才能看到,所以较好的短信应该是长成这样的:

【公司名称】验证码是:123877。xxx

公司名称最好是一个简称,这样能尽量在预览部分能看到验证码数字。
下面给出一些实际的例子:

【滴滴打车】(1445)滴滴打车验证码

验证码:119244,请于10分钟内完成手机号验证操作。【创投圈vc.cn】

验证码

验证码最好为纯数字,这样方便用户快速输入,另外,验证码的长度不宜过长,建议为6位数字。数字和字母组合就算了吧,我们没必要在这个环节难为用户。

自动填充

用户在收到短信验证码后,需要简单地记一下验证码然后把输入法切换到数字状态,输入验证码。这个过程假如不出BUG,可以在5s内完成。

现在问,可否帮用户省去这5s的时间?答案当然是可以的。

这是一个非常细节的体验,我们不做,用户也不会觉得有任何问题,但是假如我们做了,就会给用户一种“智能”的感觉。


下面以Android为例,看看我是如何帮用户省去这5s时间的。原理非常简单:手机收到验证码短信后,程序自动识别验证码并填充验证码输入框。

思路是有了,实现的方式也有多种:

1、开启一个线程,隔一段时间就去查询收件箱是否有变化,有变化再读取出来做处理。

2、注册一个短信变化的广播,收到广播后再去读取出来做处理。

3、通过ContentObserver(内容观察者)来捕获特定Uri的变化。

方案1,显然不可以取,太耗资源。

方案2,实际应用起来是会有问题的,因为短信的广播是有序广播,假如有其他应用先捕获广播并终止传递,那么我们就永远也收不到这条短信变化的广播了。

所以,综合比较起来,方案3比较可取。经过笔者实践也是没有问题的。

先来点介绍性文字吧。

“ContentObserver——内容观察者,目的是观察(捕捉)特定Uri引起的数据库的变化,继而做一些相应的处理,它类似于数据库技术中的触发器(Trigger),当ContentObserver所观察的Uri发生变化时,便会触发它。触发器分为表触发器、行触发器,相应地ContentObserver也分为“表“ContentObserver、“行”ContentObserver,当然这是与它所监听的Uri MIME Type有关的。”

下面给出方案3的关键性代码:

1、AndroidManifest.xml文件中配置短信读取权限

<uses-permission android:name="android.permission.READ_SMS" />

2、监听短信变化的类

public class SmsContentObserver extends ContentObserver{
    private static final String TAG = "SmsContentObserver";
    private Context mContext;
    private Handler mHandler;
    public SmsContentObserver(Context context,Handler handler){
        super(handler);
        this.mContext = context;
        this.mHandler = handler;
    }

    //短信格式:【白羽毛金融】您的FellowPlus验证码是:394421
    @Override
    public void onChange(boolean selfChange) {
        Uri inBoxUri = Uri.parse("content://sms/inbox");
        Cursor c = mContext.getContentResolver().query(inBoxUri, null, null, null,"date desc");
        if(c != null){
            while(c.moveToNext()){
                String body = c.getString(c.getColumnIndex("body"));
                if(body.startsWith("【白羽毛金融】")){
                    String verifyCode = body.substring(body.length() - 6 - 1 , body.length());
                    Message msg = Message.obtain();
                    msg.what = 1;
                    msg.obj = verifyCode;
                    mHandler.sendMessage(msg);
                    break;
                }
            }
            c.close();
        }
    }
}

当短信有变化时,把短信内容读取出来,并按时间由高到低排序。根据自己项目需要的短信验证码的格式匹配(我这里的匹配方法写的很LOW,-_-||)。找到后,可以不用继续读取短信直接break。这里通过Handler的去更新UI。

3、注册/取消注册监听

通常是在onResum中去注册短信监听,在onStop中取消注册。

@Override
protected void onStop() {
    super.onStop();
    unRegisterSmsContentObservers();
}

@Override
protected void onResume() {
    super.onResume();
    registerSmsContentObservers();
}

private void registerSmsContentObservers() {
    Uri smsUri = Uri.parse("content://sms");
   //smsContentObserver是SmsContentObserver的一个实例,可以在onCreate中初始化
   getContentResolver().registerContentObserver(smsUri, true,smsContentObserver);
}

private void unRegisterSmsContentObservers() {   getContentResolver().unregisterContentObserver(smsContentObserver);
}

注意,虽然我们监听的是收件箱inbox,但是在注册时需要监听所有短信的变化。这句很重要:

Uri.parse("content://sms")

不能写成

Uri.parse("content://sms/inbox")

其实,通过ContentObserver还能做很多事情。更多功能等待大家去发现。

更高级的体验

在上述场景中,还是需要用户去填写手机号,接收验证码。我在考虑,有没有这样一种体验,它让用户感知到这不是一个接收验证码的过程的,但是又能很好地验证手机号的有效性呢?答案是有的,我们可以这样做:自动读取手机号,服务器发验证码,客户端接收后自动到服务端验证,最后通过。这个过程没有界面,用户唯一需要做的,就是要授权app一些权限(如发送短信的权限,读取短信的权限,android会弹框提示授权)。这视乎是一个很好的体验。

目前我只发现一个应用是这样做的,招商证券的android客户端。

另外,我还发现有些网站的验证码是通过回拨一个电话过来,然后电话里有一个机器人读验证码,你需要记下来然后填写。例如,美团外卖就是这样做的。我认为这样做是有特别原因的,比如,送外卖的需要确保手机就在你身边并且能接听电话,因为外卖来了你要接电话去取。

欢迎大家跟我交流。

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

推荐阅读更多精彩内容