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

发布时间:1970-01-01  编辑:Mrs.默先森 

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

    标签nginx php


本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处,尊重他人劳动。

陶太富博客 http://blog.taotaifu.cn

最新发布

最新评论

0.286122s