今天在這裡跟大家說一說關於驗證碼這點 ，我們在上網期間，每次登陸都會碰到這樣的問題，登陸的時候，有的是郵箱登入，有的是手機登入，現在人們平常用手機驗證碼的比較多，所以今天想用阿里雲簡訊平臺跟大家說一下手機簡訊驗證碼。其實，簡訊驗證碼用的是第三方，基本上都已經封裝好了，我們拿過來用一下就行。
好了，廢話不多說了，關於手機簡訊驗證碼總共可以分為以下幾大步驟：
. . 簡訊服務開通
. . 獲取阿里雲訪問祕鑰(獲取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 協議》，轉載必須註明作者和本文連結