阿里云短信服务实现网站手机短信验证码
3000 / 0 / 创建于 5年前 /
Moshutong 的个人博客
今天在这里跟大家说一说关于验证码这点 ，我们在上网期间，每次登陆都会碰到这样的问题，登陆的时候，有的是邮箱登录，有的是手机登录，现在人们平常用手机验证码的比较多，所以今天想用阿里云短信平台跟大家说一下手机短信验证码。其实，短信验证码用的是第三方，基本上都已经封装好了，我们拿过来用一下就行。
好了，废话不多说了，关于手机短信验证码总共可以分为以下几大步骤：
. . 短信服务开通
. . 获取阿里云访问秘钥(获取AK)
. . 申请短信签名
. .申请短信模板
. . SDK及DEMO下载
. . 前台代码
. .PHP实例代码 （后台）
1.短信服务开通
选择【产品】--【云通信】--【短信服务】 然后会跳转到短信服务开通页面 ，根据需求选择套餐，随后点击开通即可，如下图：
- 获取阿里云访问秘钥(获取AK)
为了使用短信发送API-PHP SDK，您必须申请阿里云的访问密钥。阿里云访问秘钥是阿里云为用户使用 API（非控制台）来访问其云资源设计的“安全口令”。您可以用它来签名 API 请求内容以通过服务端的安全验证。
该访问秘钥成对（AccessKeyId 与 AccessKeySecret）生成和使用。每个阿里云用户可以创建多对访问秘钥，且可随时启用（Active）、禁用（Inactive）或者删除已经生成的访问秘钥对。
点击短信服务--【接口调用】==【获取Ak】，如果您还没有注册，您先注册，如果已经注册，就选择绑定已有阿里云账号，如下图：
这个时候会出来安全提示
接下来就是快速创建子用户AccessKey
【注意】这里的Ak信息记得自己妥善保管，可以自己下载下来
3.申请短信签名和填写短信模板，如下图：
签名即经常在短信验证码中看到的下图红色部分：
根据用户属性来创建符合自身属性的签名信息。企业用户需要上传相关企业资质证明，个人用户需要上传证明个人身份的证明。 短信签名需要审核通过后才可以使用。在【签名管理】--【添加签名】，进行添加即可，可以添加多个签名，签名需要审核。
4.【模板管理】--【添加模板】 ，短信模板，即具体发送的短信内容。
短信模板可以支持验证码、短信通知、推广短信、国际/港澳台消息四种模式。验证码和短信通知，通过变量替换实现个性短信定制。推广短信不 支持在模板中添加变量，短信模板需要审核通过后才可以使用。
5 . SDK及DEMO下载
下载地址： https://help.aliyun.com/document_detail/55...
这里使用SDK轻量版，更多需求可下载完整版， 我们只需要SignatureHelper.php文件即可 。
6.前台代码
本实例代码中包含手机验证码的发送， 生成随机验证码 ， 验证码的比对 ，前台倒计时功能 。
前台实例代码
<div class="beij_center">
<div class="ger_zhuc_beij">
<div class="ger_zhuc_biaot">
<ul>
<li class="ger_border_color"><a>个人注册</a></li>
<p>我已经注册，现在就<a class="ftx-05 ml10" href="{{route ('home.login')}}">登录</a></p>
</ul>
</div>
<div class="zhuc_biaod">
{{--form表单--}}
<form action="{{route ('home.user.store')}}"method="post">
@csrf
<div class="reg-items">
<span class="reg-label">
<label for="J_Name">用户名：</label>
</span>
<input class="i-text" type="text" name="name" placeholder="请输入用户名">
<!--备注------------display使用 inline-block-->
<div class="msg-box">
<div class="msg-box" style="display: none;">
<div class="msg-weak" style="display: inline-block;"><i></i>
<div class="msg-cont">4-20个字符，支持汉字、字母、数字及"-"、"_"组合</div>
</div>
</div>
<div class="msg-weak err-tips" style="display: none;">
<div>请输入用户名</div>
</div>
</div>
<span class="suc-icon" style="display: none"></span>
</div>
<div class="reg-items">
<span class="reg-label">
<label for="J_Name">设置密码：</label>
</span>
<input class="i-text" type="password" name="password" placeholder="请输入密码">
<!--备注------------display使用 inline-block-->
<div class="msg-box">
<div class="msg-box" style="display: none;">
<div class="msg-weak" style="display: inline-block;"><i></i>
<div class="msg-cont">键盘大写锁定已打开，请注意大小写!</div>
</div>
</div>
<div class="msg-weak err-tips" style="display:none;">
<div>请输入密码</div>
</div>
</div>
</div>
<div class="reg-items">
<span class="reg-label">
<label for="J_Name">确认密码：</label>
</span>
<input class="i-text" type="password" name="password_confirmation" placeholder="请输入确认密码">
<!--备注------------display使用 inline-block-->
<div class="msg-box">
<div class="msg-weak err-tips" style="display: none;">
<div>密码不一样</div>
</div>
</div>
</div>
<div class="reg-items">
<span class="reg-label">
<label for="J_Name">账号：</label>
</span>
<input class="i-text box" type="text" value="{{old ('email')}}" name="account" placeholder="请输入注册账号">
<!--备注------------display使用 inline-block-->
<div class="msg-box">
<div class="msg-weak err-tips" style="display:none;">
<div>账号不能为空</div>
</div>
</div>
</div>
<div class="reg-items">
<span class="reg-label">
<label for="J_Name">验证码：</label>
</span>
<input class="i-text i-short" type="text" placeholder="请输入验证码" name="code" value="" aria-label="Recipient's username" aria-describedby="basic-addon2">
<div class="check check-border" style="position:relative;left:0">
<a href="javascript:;" class="check-phone" name="code" onclick="send(this)" style="padding:11px 10px 14px 10px;*line-height:60px;">获取验证码</a>
<span class="check-phone disable" style="display: none;"><em>60</em>秒后重新获取</span>
<a class="check-phone" style="display: none;padding:11px 10px 14px 10px">重新获取验证码</a>
</div>
<!--备注------------display使用 inline-block-->
<div class="msg-box">
<div class="msg-weak err-tips" style="display:none;">
<div>请输入验证码</div>
</div>
</div>
</div>
<div class="reg-items">
<span class="reg-label">
<label for="J_Name"> </label>
</span>
<div class="dag_biaod">
<input type="checkbox" value="english">
阅读并同意
<a href="#" class="ftx-05 ml10">《wangdi通城用户注册协议》</a>
<a href="#" class="ftx-05 ml10">《隐私协议》</a>
</div>
</div>
<div class="reg-items">
<span class="reg-label">
<label for="J_Name"> </label>
</span>
<button class="reg-btn" value="立即注册" type="submit">立即注册</button>
</div>
</form>
</div>
<div class="xiaogg">
<img src="{{asset('org/home')}}/images/cdsgfd.jpg">
</div>
</div>
</div>7.PHP实例代码（后台）
namespace App\Http\Controllers;
use App\Http\Requests\RegisterRequest;
use App\Http\Requests\UserRequest;
use App\User;
use Illuminate\Http\Request;
class UserController extends Controller
{
//加载登录
public function login ( Request $request )
{
//dd ($request->all ());
return view ( 'user.login' );
}
//登录提交
public function loginForm ( Request $request )
{
//dd (1);
//后台验证
$this->validate ($request,[
'email' =>'email' ,
'password'=>'required|min:6'
],[
'email.email'=>'请输入邮箱',
'password.required'=>'请输入登录密码',
'password.min'=>'输入的密码不得少于6位'
]);
//执行认证
$credentials=$request->only( 'email' , 'password' );
if(\Auth::attempt( $credentials , $request->remember ) ){
//登录成功，跳转到首页
if( $request->from ){
return redirect( $request->from )->with( 'success' , '登录成功' );
}
return redirect( '/')->with( 'success' , '登录成功' );
}
return redirect()->back()->with( 'danger' , '用户名密码不正确' );
}
//加载注册
public function register ()
{
return view ( 'user.register' );
}
public function store( RegisterRequest $request )
{
//dd($request->all());
//将数据存储到数据表
$data =$request->all();
$data[ 'password' ]=bcrypt( $data[ 'password' ] );
User::create( $data );
//模型事件，需要再注册之后，把email_verified_at字段事件自动处理
//提示并且跳转
return redirect()->route( 'login' )->with( 'success' , '注册成功' );
}
}后台登录方法代码
class LoginController extends Controller
{
public function index ()
{
return view ( 'home.login.login' );
}
//加载登录页面
public function login(HomeLoginRequest $request){
//判断用户是邮箱登录还是电话号码登录
if(filter_var($request['account'],FILTER_VALIDATE_EMAIL)){
$data['email'] = $request['account'];
}else{
$data['mobile'] = $request['account'];
}
$data['password']=$request['password'];
if ( \Auth::attempt ( $data , $request->remember ) )
{
return redirect ( $request->query ( 'from' ) ?: '/' )->with ( 'success' , '登录成功' );
}
return back ()->with ( 'danger' , '账号不存在或密码错误' );
}
}这些弄完之后就可以实现短信验证码注册登录了，您可以试一试，有问题请联系我，可以给我发邮件哦，729589198@qq.com
本作品采用《CC 协议》，转载必须注明作者和本文链接
关于 LearnKu
粤公网安备 44030502004330号
推荐文章：