使用 apifm 插件进行 Flutter 云开发——短信验证码

知识点回顾

发送短信验证码,通常情况下为了防止短信轰炸、机器人频繁获取短信验证码等场景,在输入手机号码获取短信的时候,需要识别图形验证码,只有输入了正确的图形验证码,系统才认为不是机器人或者恶意获取短信验证码

当然,这不是必须的,后台短信通道设置处,你也可以不开启图形验证码校验的功能

《使用 apifm 插件进行 Flutter 云开发——图形验证码》

功能说明

很多安全场合,都需要使用到短信验证码功能,来确保操作者是本人;
一般app都会使用 “手机号码 + 短信验证码” 的方式来实现用户注册 / 登录;
当忘记密码的时候,一般也会使用 “手机号码 + 短信验证码” 来重置登录密码;

准备工作

  1. 申请短信验证码发送通道
    要能真实发送手机短信验证码,需要你先开通短信通道,目前有很多平台都可以申请(免费试用)短信通道;“apifm-wxapi” 支持以下短信运营商,你可前往注册账号后一般即可获得试用的免费体验短信条数:阿里云、腾讯云、示远科技、赛邮·云通讯、创瑞、云之讯、八米科技、上海助通
    有特殊需求,可留言我们为你增加新的短信运营商的支持

后台配置

开通并登陆免费开发者后台

《使用 apifm 插件进行 Flutter 云开发——安装篇》

开启 “短信验证码” 模块

登录 “第一步” 注册的后台,左侧菜单 --> 工厂设置 --> 模块管理

找到 “短信验证码” 模块,点击 “启用模块” ,然后 F5 刷新一下后台界面,你将可以看到新的菜单: “短信设置” -> “验证码设置”;

配置短信通道

点击上面的 “验证码设置” 菜单,根据你申请的短信通道的运营商,点击进入进行配置;
正确配置后,你即可以继续往下的章节,体验发送短信了;

左侧菜单 “短信设置” -> “短信记录” ,详细记录了每一次获取短信验证码的短信发送记录,以备后续有需要的时候进行查询;

apifm 使用说明

获取验证码(发送短信)

 Apifm.smsValidateCode(String mobile, [String key, String picCode])

短信验证码自动下发到 mobile 对应的手机号码;

当后台设置了发送短信验证码必须开启图形验证码校验时,必须传 key 和 picCode 参数,否则不用传;

key 和 picCode 参数,请查阅图形验证码使用说明

校验输入验证码是否正确

 Apifm.smsValidateCodeCheck(String mobile, String code)

code 为用户手机上收到的验证码

读万卷书不如行万里路!自己动手写个 helloworld,把知识装进口袋!

期待你成为我的大佬~

Flutter 是一种流行的开源移动应用开发框架,由 Google 开发,用于构建高性能、原生体验的跨平台应用程序。在 Flutter 中实现手机号和短信验证码登录页面,通常会涉及以下几个步骤: 1. 设计界面:首先创建一个用户界面组件,包括输入框用于输入手机号码、发送验证码按钮以及一个用于输入验证码并验证的区域。 ```dart import 'package:flutter/material.dart'; class LoginScreen extends StatefulWidget { @override _LoginScreenState createState() => _LoginScreenState(); } class _LoginScreenState extends State<LoginScreen> { final TextEditingController _phoneController = TextEditingController(); String _验证码 = ""; // 发送验证码功能 void sendCode() async { // 这里只是一个示例,实际需要集成短信验证码服务 setState(() {}); print('短信验证码已发送'); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar(title: Text("手机号登录")), body: Padding( padding: EdgeInsets.all(16), child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ TextField( controller: _phoneController, decoration: InputDecoration(labelText: "手机号"), ), RaisedButton( onPressed: sendCode, child: Text("获验证码"), ), SizedBox(height: 16), TextField( obscureText: true, decoration: InputDecoration(labelText: "验证码"), controller: TextEditingController(text: _验证码), ), RaisedButton( onPressed: () {}, child: Text("登录"), disabledColor: Colors灰, enabledColor: Colors.blue, // 验证成功或失败时添加相应的逻辑 ), ], ), ), ); } } ``` 2. 验证码处理:你需要接入一个可靠的短信验证码服务,当用户输入验证码后,通过网络请求验证其有效性。如果验证码正确,可以继续下一步操作;如果错误,则提示用户重新输入。 3. 安全性考虑:在实际生产环境中,密码传输应加密,并且不应直接存储明文验证码
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

api工厂

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值