阿里云短信服务实现网站手机短信验证码
3

今天在这里跟大家说一说关于验证码这点 ,我们在上网期间,每次登陆都会碰到这样的问题,登陆的时候,有的是邮箱登录,有的是手机登录,现在人们平常用手机验证码的比较多,所以今天想用阿里云短信平台跟大家说一下手机短信验证码。其实,短信验证码用的是第三方,基本上都已经封装好了,我们拿过来用一下就行。
好了,废话不多说了,关于手机短信验证码总共可以分为以下几大步骤:
. . 短信服务开通
. . 获取阿里云访问秘钥(获取AK)
. . 申请短信签名
. .申请短信模板
. . SDK及DEMO下载
. . 前台代码
. .PHP实例代码 (后台)

1.短信服务开通
选择【产品】--【云通信】--【短信服务】 然后会跳转到短信服务开通页面 ,根据需求选择套餐,随后点击开通即可,如下图:
file
file

  1. 获取阿里云访问秘钥(获取AK)
    为了使用短信发送API-PHP SDK,您必须申请阿里云的访问密钥。阿里云访问秘钥是阿里云为用户使用 API(非控制台)来访问其云资源设计的“安全口令”。您可以用它来签名 API 请求内容以通过服务端的安全验证。
    该访问秘钥成对(AccessKeyId 与 AccessKeySecret)生成和使用。每个阿里云用户可以创建多对访问秘钥,且可随时启用(Active)、禁用(Inactive)或者删除已经生成的访问秘钥对。
    点击短信服务--【接口调用】==【获取Ak】,如果您还没有注册,您先注册,如果已经注册,就选择绑定已有阿里云账号,如下图:
    file
    file
    这个时候会出来安全提示
    file
    接下来就是快速创建子用户AccessKey
    file
    file
    file
    file
    file
    【注意】这里的Ak信息记得自己妥善保管,可以自己下载下来

3.申请短信签名和填写短信模板,如下图:
file
签名即经常在短信验证码中看到的下图红色部分:
file
根据用户属性来创建符合自身属性的签名信息。企业用户需要上传相关企业资质证明,个人用户需要上传证明个人身份的证明。 短信签名需要审核通过后才可以使用。在【签名管理】--【添加签名】,进行添加即可,可以添加多个签名,签名需要审核。
4.【模板管理】--【添加模板】 ,短信模板,即具体发送的短信内容。
短信模板可以支持验证码、短信通知、推广短信、国际/港澳台消息四种模式。验证码和短信通知,通过变量替换实现个性短信定制。推广短信不 支持在模板中添加变量,短信模板需要审核通过后才可以使用。

5 . SDK及DEMO下载
下载地址: https://help.aliyun.com/document_detail/55359.htmlspm=a2c4g.11186623.6.585.uqKHIX
这里使用SDK轻量版,更多需求可下载完整版, 我们只需要SignatureHelper.php文件即可 。
file

6.前台代码
本实例代码中包含手机验证码的发送, 生成随机验证码 , 验证码的比对 ,前台倒计时功能 。
file
前台实例代码

<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

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L03 构架 API 服务器》
你将学到如 RESTFul 设计风格、PostMan 的使用、OAuth 流程,JWT 概念及使用 和 API 开发相关的进阶知识。
讨论数量: 0
(= ̄ω ̄=)··· 暂无内容!

  • 请注意单词拼写,以及中英文排版,参考此页
  • 支持 Markdown 格式, **粗体**、~~删除线~~、`单行代码`, 更多语法请见这里 Markdown 语法
  • 支持表情,使用方法请见 Emoji 自动补全来咯,可用的 Emoji 请见 :metal: :point_right: Emoji 列表 :star: :sparkles:
  • 上传图片, 支持拖拽和剪切板黏贴上传, 格式限制 - jpg, png, gif
  • 发布框支持本地存储功能,会在内容变更时保存,「提交」按钮点击时清空
  请勿发布不友善或者负能量的内容。与人为善,比聪明更重要!