Laravel項目+Google驗證器

1、首先要在你的Laravel項目中安裝Google驗證器插件、二維碼生成器插件，執行命令如下：

      # Google驗證器插件安裝命令： 

      composer require "earnp/laravel-google-authenticator:dev-master"

      # 二維碼生成器：

      composer require simplesoftwareio/simple-qrcode 1.3.*

     安裝完成後，會自動在composer.json文件中加入版本信息，如果沒有成功，手動添加，再執行，如下圖所示：

2、擴展安裝後，結構如下圖所示：

 

3、安裝完成後，在config/app.php中註冊服務提供者同時註冊下相應門面，代碼如下：

'providers' => [

    /*
     * Laravel Framework Service Providers...
     */
    ... ... ... ...
    App\Providers\AppServiceProvider::class,
    App\Providers\AuthServiceProvider::class,
    App\Providers\EventServiceProvider::class,
    App\Providers\RouteServiceProvider::class,
    // Google驗證器
    Earnp\GoogleAuthenticator\GoogleAuthenticatorServiceprovider::class,
    // 二維碼生成器
    SimpleSoftwareIO\QrCode\QrCodeServiceProvider::class,
],

'aliases' => [

    'App' => Illuminate\Support\Facades\App::class,
    'Artisan' => Illuminate\Support\Facades\Artisan::class,
    'Auth' => Illuminate\Support\Facades\Auth::class,
    'Blade' => Illuminate\Support\Facades\Blade::class,
    ... ... ... ... ...
    // 谷歌驗證器
    'Google' => Earnp\GoogleAuthenticator\Facades\GoogleAuthenticator::class,
    // 二維碼生成器
    'QrCode' => SimpleSoftwareIO\QrCode\Facades\QrCode::class
],

4、html代碼：

<div class="modal-body col-sm-4">
    <div class="box-header">
        <h3 class="box-title">Google驗證器設置</h3>
    </div>

    <div class="box-header">
        <label class="control-label" for="google_status">谷歌驗證器：</label>
        <label>
            <input name="google_status" type="radio" value="1" @if($user->google_status === 1) checked @endif class="on" />啓用
        </label>
        <label>&nbsp;</label>
        <label>
            <input type="radio" name="google_status" value="0" @if($user->google_status === 0) checked @endif class="off" />禁用
        </label>
    </div>

    <div class="form-hide box-header" style="display: none">
        <label class="control-label" for="secret">驗證器祕鑰：</label>
        <label><input type="text" class="form-control " name="secret" id="secret" value="{{$google['secret']}}" readonly="true"></label>
        <div class="modal-body text-center">
            <label class="control-label"></label>
            <?php echo $google['qrcode'] ?>
        </div>
    </div>

    <div class="box-header">
        <button type="submit" class="pretty-btn">提交</button>
    </div>
</div>

5、JQuery代碼：

<script>
    $(document).ready(function () {
        $('#system').addClass('active');
        $('#change_password').addClass('active');

        // 點擊事件(開啓、關閉谷歌驗證器)
        $(".on").click(function(e) {
            $(".form-hide").show().removeClass("show");
        });
        $(".off").click(function(e) {
            $(".form-hide").hide().removeClass("show");
        });
    });
</script>

6、PHP代碼 (首先引入GoogleAuthenticator.php、QrCode.php這2個文件)：

use Earnp\GoogleAuthenticator\GoogleAuthenticator;
use SimpleSoftwareIO\QrCode\Facades\QrCode;

/**
 * 賬號管理
 * @return \Illuminate\Contracts\View\Factory|\Illuminate\View\View
 */
public function merchant_account(){
        $user = $this->getUser();
        // 判斷該用戶是否已經存在google祕鑰、沒有重新生成
        if (empty($user['secret']) && $user['google_status'] === 0) {
            // 獲取google祕鑰
            $google = GoogleAuthenticator::CreateSecret();
            // 生成二維碼
            $google["qrcode"] = QrCode::encoding('UTF-8')->size(180)->margin(1)->generate($google["codeurl"]);
        } else {
            $google['secret'] = $user['secret'];
            $google_url = "otpauth://totp/?secret=" . $user['secret'];
            // 生成二維碼
            $google["qrcode"] = QrCode::encoding('UTF-8')->size(180)->margin(1)->generate($google_url);
        }

    return view('merchant.system.merchant_account',compact('user','google'));
}

/**
 * 賬號管理處理方法
 * @param Request $request
 * @return \Illuminate\Http\RedirectResponse
 * @throws ErrorMessageException
 */
public function merchant_account_do(Request $request){
    if($request->isMethod('post')){
        $param = $request->all();
        $user=$this->getUser();
        if (empty($user['secret'])) {
            $user->secret = $param['secret'];
            $user->google_status = $param['google_status'];
        }else{
            $user->google_status = $param['google_status'];
        }
        if ($user->save()) {
            return redirect()->back()->with('msg', 'Google驗證器設置成功！');
        } else {
            throw new ErrorMessageException("Google驗證器設置失敗！");
        }
    }
}

7、效果圖如下：

8、開啓後，登錄需要輸入Google驗證碼：

    則，在登錄方法裏，將用戶輸入的Google驗證碼與用戶祕鑰進行匹配，代碼如下：

/**
 * 重寫登錄成功迴應
 * Google 驗證
 * @param Request $request
 * @return \Illuminate\Http\RedirectResponse
 * @throws \App\Exceptions\ErrorMessageException
 */
public function sendLoginResponse(Request $request){
    $param = Request()->all();
    $user = $this->getUser();
    // 判斷該用戶是否開啓google驗證
    // 將用戶輸入的驗證碼與祕鑰進行匹配
    if(1 === $user['google_status']){
        // Google驗證碼與祕鑰進行匹配
        if(!GoogleAuthenticator::CheckCode($user['secret'],$param['secret'])){
            throw ValidationException::withMessages([
                $this->username() => [trans('auth.secret')],
            ]);
        }
    }

    UserIp::create([
       'user_id' => $this->getUser()->id,
       'ip' => $request->ip(),
    ]);
    $request->session()->regenerate();

    $this->clearLoginAttempts($request);

    return $this->authenticated($request, $this->guard()->user())
        ?: redirect()->intended($this->redirectPath());
}

匹配成功，成功登錄、匹配失敗，友好提示！

希望能幫到大家，同事也爲自己做筆記，不喜勿噴！