「手把手」利用websocket實現手機掃碼登陸後，同步登陸資訊到web端頁面

LiamHao發表於2021-03-27
Web
> composer create-project --prefer-dist laravel/laravel joker
> cd joker
> php artisan key:generate
Application key set successfully.
> php artisan --version
Laravel Framework 8.34.0
> composer require beyondcode/laravel-websockets
> php artisan vendor:publish --provider="BeyondCode\LaravelWebSockets\WebSocketsServiceProvider"

我們需要在.env檔案中配置幾個引數，PUSHER_APP_ID、PUSHER_APP_KEY、PUSHER_APP_SECRET可以隨便寫，與文件中提到的 pusher 無關。因為有 Laravel-websockets在程式裡攔截了pusher的轉發動作，會將事件轉發到本地。BROADCAST_DRIVER指定廣播驅動為pusher固定值。LARAVEL_WEBSOCKETS_PORT是指 socket 監聽的埠號，一定要讓這個埠可以被外網訪問：

// .env
BROADCAST_DRIVER=pusher
PUSHER_APP_ID=joker
PUSHER_APP_KEY=joker
PUSHER_APP_SECRET=joker
LARAVEL_WEBSOCKETS_PORT=2020

配置好以後，我們就可以啟動 socker 監聽程式了。雖然上面的.env檔案中，我們已經配置好2020埠了，但這裡的啟動命令中，我們還是需要--port=2020手動指定埠號，否則預設是6001埠：

> php artisan websockets:serve --port=2020
Starting the WebSocket server on port 2020...

看，啟動一個 socket 監聽程式就是這麼簡單。為了驗證是否能進行通訊，我們在位址列中輸入http://<your.host>/laravel-websockets，然後會顯示一個在Laravel-websockets中已經註冊好的頁面：

【手把手】利用websocket實現手機掃碼登陸後，同步登陸資訊到web端頁面

我們點選那個connect按鈕，如果如下圖所示，則說明可以正常通訊了：

【手把手】利用websocket實現手機掃碼登陸後，同步登陸資訊到web端頁面

在routes/web.php中新增web路由，並建立相應的view檢視

Route::get('/hello', function () {
    // 首頁顯示二維碼
    return view('hello');
});

Route::get('login', function () {
    // 掃碼後，手機顯示的登陸頁
    return view('login');
});

Route::post('/login', function () {
    // 這裡先空著，後面會補充
    return 'Logined';
});

【手把手】利用websocket實現手機掃碼登陸後，同步登陸資訊到web端頁面

我們需要在app/resources/views/hellow.blade.php中先引入一些JS工具，然後編寫一些JS程式碼。

<!DOCTYPE html>
<html>
    <head>
        <title>Hello</title>
        {{-- 引入jQuery工具 --}}
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        {{-- 引入二維碼工具 --}}
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
        {{-- 引入laravel-echo工具，其實使用Larave自帶的也可以。但是，使用自帶的還需要用到node前端構建工具，我這裡只簡單的演示後端實現過程，就不用node了 --}}
        <script src="https://cdn.bootcdn.net/ajax/libs/laravel-echo/1.10.0/echo.iife.js"></script>
        {{-- 引入pusher工具，pusher是Laravel-echo底層，Laravel-echo是pusher的一層封裝 --}}
        <script src="https://cdn.bootcdn.net/ajax/libs/pusher/7.0.3/pusher.min.js"></script>
    </head>
    <body>
        <h1>二維碼</h1>
    </body>
    <script type="text/javascript">

        // 簡單模擬一個 uuid 唯一身份碼，為了後端廣播時，不會廣播給錯人
        var uuid = Math.random().toString(36);

        // 初始化 laravel-echo 外掛
        window.Echo = new Echo({
            // 這裡是固定值 pusher
            broadcaster: 'pusher',
            // 這裡要和你在 .env 中配置的 PUSHER_APP_KEY 保持一致
            key: 'joker',
            wsHost: location.hostname,
            // 這裡是我們在上一步啟動 socket 監聽的埠
            wsPort: 2020,
            // 這個也要加上
            forceTLS: false,
        });

        // 我們隨便監聽一個頻道，這個頻道在專案還不存在，但不影響建立 socket 連線
        Echo.channel('abcdefg.'+uuid)
        // 隨便監聽一個事件，這個事件在專案中還不存在，但不影響建立 socket 連線
        .listen('LoginedEvent', (e) => {
          console.log(e);
        });

        // 顯示一個二維碼，內容是一個登陸頁地址，後面拼接 uuid
        $("body").qrcode(location.origin+"/login?uuid="+uuid);

    </script>
</html>

程式碼中已經註釋的比較清晰了，我們儲存檔案，然後在瀏覽器中輸入http://<your.host>/hello點選回車。我們開啟瀏覽器的開發者工具，找到WS選項，我們會看到 socket 已經與服務端進行了通訊。再看下服務端，會顯示連線者的一些資訊：

【手把手】利用websocket實現手機掃碼登陸後，同步登陸資訊到web端頁面

這一步我們只需要做兩件事，寫一個簡單的登陸頁面，然後實現登陸驗證：

簡單的登陸頁

<!DOCTYPE html>
<html>
    <head>
        <title>Login</title>
        {{-- 引入jQuery工具 --}}
        <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    </head>
    <body>
        <input type="text" name="username">
        <input type="text" name="password">
        <button>登陸</button>
    </body>
    <script type="text/javascript">

        $('button').click(function(event) {
            // 請求登陸介面
            $('button').click(function(event) {
                // 還記得前面掃碼的連結裡，帶有 uuid 引數嗎。簡單的獲取 url 中 uuid 引數
                var uuid = location.search.substring(1).split('=')[1];
                // 請求登陸介面
                $.ajax({
                    // 這個登陸介面就是上面 routes/web.app 中定義好的路由。因為是 POST 請求，所以會進入 Route::post() 定義的路由中
                    url: location.origin+'/login',
                    type: 'POST',
                    dataType: 'json',
                    data: {
                        username: $('input[name="username"]').val(),
                        password: $('input[name="password"]').val(),
                        uuid: uuid,
                        // Laravel 預設帶有 csrf_token 驗證，所以這裡要加 _token 變數
                        _token: '{{ csrf_token() }}',
                    },
                    success: function(data){
                        console.log(data);
                    }
                });
            });
        });

    </script>
</html>

很簡單的一個頁面，我們用微信掃一掃看下頁面效果：

【手把手】利用websocket實現手機掃碼登陸後，同步登陸資訊到web端頁面

哈哈，雖然很醜，但很簡潔不是嗎？接下來，我們要進行後臺程式碼的完善工作了。

登陸驗證

進入routes/web.php中，修改Route::post()路由。為了簡化程式碼流程，我就直接在路由中寫登陸邏輯了， 但平時一定不要這麼幹。

Route::post('/login', function (\Illuminate\Http\Request $request) {
    // 為了儘可能簡化流程，我們就不執行資料庫查詢的邏輯了，直接在 session 中寫入資訊吧
    session([
        'login_info' => $request->all(),
    ]);
    // 返回響應
    return response([
        'code' => 0,
        'message' => '登陸成功',
        'data' => session('login_info'),
    ]);
});

這應該是最簡化的登陸邏輯了吧，我們來小測一下，在http://<your.host>/login頁面中，在兩個輸入框中寫入內容，然後點選登陸，看下返回結果：

【手把手】利用websocket實現手機掃碼登陸後，同步登陸資訊到web端頁面

確實返回了我們輸入的資訊哈。一步一個腳印，一步一回頭，每完成一個小功能呢，就小測一下，個人習慣哈。

這一環節，做的事情也不是很多，我們一步一步來。首先要把config/app.php中的App\Providers\BroadcastServiceProvider::class註釋開啟：

【手把手】利用websocket實現手機掃碼登陸後，同步登陸資訊到web端頁面

在routes/channels.php中加入我們最開始，在前端JS中寫的監聽頻道：

Broadcast::channel('abcdefg.{uuid}', function () {
    return true;
});

在config/broadcasting.php中的connections.pusher下加入兩個配置資訊：

'connections' => [
    'pusher' => [
        'driver' => 'pusher',
            'key' => env('PUSHER_APP_KEY'),
            'secret' => env('PUSHER_APP_SECRET'),
            'app_id' => env('PUSHER_APP_ID'),
            'options' => [
                'cluster' => env('PUSHER_APP_CLUSTER'),
                'useTLS' => true,
                // 攔截 pusher 的廣播後，轉發到目標 ip
                'host' => '127.0.0.1',
                // 轉發的埠，就是我們之前在 .env 檔案中配置的 2020 埠
                'port' => env('LARAVEL_WEBSOCKETS_PORT', 6001),
            ],
    ];
];

建立登陸事件

> php artisan make:event LoginedEvent
Event created successfully.

執行以上程式碼後，我們可以在app/Events資料夾中找到LoginedEvent.php檔案。

在事件中傳送廣播

只需在上面新建的app/Events/LoginedEvent.php中，進行很小的改動就可以了。

<?php

namespace App\Events;

// 首先要讓這個事件類實現 ShouldBroadcast 介面，也就是在類名後加上 implements ShouldBroadcast 即可。
class LoginedEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    // 只有 punlic 屬性的變數會被廣播到指定的頻道中，所以這裡要使用 public 關鍵字修飾你需要廣播的變數
    public $logined_info;

    public function __construct($logined_info)
    {
        $this->logined_info = $logined_info;
    }

    // 實現 ShouldBroadcast 介面後，就必須實現這個方法，系統會自動將廣播傳送到這個方法中定義的頻道中
    public function broadcastOn()
    {
        // 這裡我們改為 Channel。原 PrivateChannel 是私有頻道，未登入時前端無法監聽
        // 這裡的頻道要與 routes/channels.php 中定義的頻道格式保持一致
        return new Channel('abcdefg.'.$this->logined_info['uuid']);
    }
}

觸發

我們再回到登陸驗證的路由中，在儲存 session 資料後，加入觸發登陸事件的程式碼：

Route::post('/login', function (\Illuminate\Http\Request $request) {

    session([
        'login_info' => $request->all(),
    ]);
    // 觸發登陸事件
    event(new \App\Events\LoginedEvent(session('login_info')));

    return response([
        'code' => 0,
        'message' => '登陸成功',
        'data' => session('login_info'),
    ]);
});

好了，我們再來驗證下，登陸後在 socket 中是否會收到廣播內容。這裡我們可以同時開啟http://<your.host>/login和http://<your.host>/laravel-websockets頁面，然後用手機微信的掃一掃功能掃描頁面上的二維碼。在手機上任意輸入內容，點選登陸按鈕，看一下是否有新的廣播資料：

【手把手】利用websocket實現手機掃碼登陸後，同步登陸資訊到web端頁面

主要流程已經通了，現在離完成我們的目標已經近在咫尺了，加油！

現在我們來調整下app/Events/LoginedEvent.php事件和routes/web.php路由檔案中的/hello部分。主要目的是：在登陸事件中通過廣播將手機登陸後的session_id返回給前端。前端拿到後再將其拼接到路由中，執行頁面跳轉。後端會將 url 中的 session_id引數獲取到，然後將指定 session 中的內容載入到當前請求的 session 中（這裡僅作為演示無需重複登入即可同步登陸資訊的實現，其中會有很多安全問題，這裡就先不考慮了，大佬們勿噴）。
先調整下app/Events/LoginedEvent.php檔案：

class LoginedEvent implements ShouldBroadcast
{
    use Dispatchable, InteractsWithSockets, SerializesModels;

    // 只有 punlic 屬性的變數會被廣播到指定的頻道中，所以這裡要使用 public 關鍵字修飾你需要廣播的變數
    public $logined_info;
    // 加入新的變數 $session_id
    public $session_id;

    public function __construct($logined_info)
    {
        $this->logined_info = $logined_info;
        // 獲取當前的 session id
        $this->session_id = session()->getId();
    }

    public function broadcastOn()
    {
        return new Channel('abcdefg.'.$this->logined_info['uuid']);
    }
}

還有routes/web.php檔案，在/hello路由裡面加入程式碼，這一步很關鍵：

Route::get('/hello', function (\Illuminate\Http\Request $request) {
    if($request->get('session_id')){
        // 將手機端登陸的 session_id 設定到當前頁面的 session 中
        session()->setId($request->get('session_id'));
        // 重新讀取 session 資料。其實就是將手機端登陸後的 session 內容讀取到當前頁面的 session 中
        session()->start();
        // 這裡只是做個提示
        echo session('login_info.username')." 已通過手機掃碼登入";
    }
    return view('hello');
});

最後是app/resources/views/hellow.blade.php檢視檔案，我們只需要修改監聽到事件後，執行回撥的部分：

        Echo.channel('abcdefg.'+uuid)
        .listen('LoginedEvent', (e) => {
            console.log(e);
            // 從登陸事件廣播出來的資料中，取出 session_id 欄位
            var session_id = e.session_id;
            // 拼接好引數後，跳轉到指定頁面，也就是當前頁面
            location.href = location.origin+'/hello?session_id='+session_id;
        });

最看下結果吧！

[手把手]利用websocket實現手機掃碼登陸後，同步登陸資訊到web端頁面

本作品採用《CC 協議》，轉載必須註明作者和本文連結

相關文章