Laravel Sanctum 和使用 Pusher.js 进行广播(401、419 错误)

Posted

技术标签:

【中文标题】Laravel Sanctum 和使用 Pusher.js 进行广播(401、419 错误)【英文标题】:Laravel Sanctum & broadcasting with Pusher.js (401, 419 error) 【发布时间】:2022-01-02 22:31:08 【问题描述】:

4 天来,我一直在尝试连接到私人频道。结合了我能找到的所有可能的属性,但没有解决问题。需要对这个问题有更深入的了解。

我正在使用 Laravel Sanctum、Nuxt.js、Nuxt-auth 创建一个应用程序。 我需要连接到广播专用频道。

起初我尝试使用@nuxtjs/laravel-echo 包创建连接。 经过长时间的尝试配置连接,我发现如果我设置authModule: true(公共频道完美连接),甚至没有创建PisherConnector实例。发现这个包没有得到积极的支持,而且我没有完全访问连接管理的权限,我决定放弃它。

然后我尝试使用 Laravel-echo 设置连接,然后直接通过 Pusher。没有任何效果,我收到 401 或 419 错误。

我有很多问题没有答案。

    什么时候需要使用laravel-echo-server? 什么时候需要使用pusher/pusher-php-server? 在什么情况下需要连接broadcasting/auth,在什么情况下需要连接api/broadcasting/auth?我的前端在 api/login 上运行,但我不想提供对我的 API 的外部访问。 我将Broadcast::routes(['middleware' => ['auth: sanctum']]) 添加到我的BroadcastServiceProviderroutes/api.php 中(用于测试)。我也不确定这里。可能需要Broadcast::routes(['middleware' => ['auth: api']]) 还是保留默认的Broadcast::routes()? 配置的正确设置是什么:config/cors.phpconfig/broadcasting.phpconfig/sanctum.phpconfig/auth.php?哪些关键参数会影响请求验证? 我应该将 CSRF-TOKEN 传递给标头吗?我尝试过不同的方法。 什么时候需要设置encrypted:true 选项? Kernel 中应包含哪些 middleware 以及可能存在的障碍?

如果我将 authEndpoint 设置为 api/broadcasting/auth 我会收到 419 错误(尝试传递 csrf-token 没有帮助)。如果我将 authEndpoint 设置为 broadcasting/auth 我会收到 401 错误。

我没有提供我的代码示例,因为我尝试了所有配置中的所有选项。我还尝试在 Laravel 站点 Pusher.js 上学习我的问题的文档,查看了示例。各种示例都提到了一些选项,但没有提到其他选项,反之亦然。

我很乐意听取任何建议。

【问题讨论】:

【参考方案1】:

我和你有同样的问题。我忘了在我的/config/app.php 中添加BroadCastingServiceProvider

app/Providers/BroadcastServiceProvider.php 现在看起来像这样:

<?php

namespace App\Providers;

use Illuminate\Support\Facades\Broadcast;
use Illuminate\Support\ServiceProvider;

class BroadcastServiceProvider extends ServiceProvider

    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    
        Broadcast::routes(['middleware' => ['api', 'auth:sanctum']]);
        require base_path('routes/channels.php');
    

我没有将Broadcast::routes 添加到任何其他路由文件中。

这就是我的 Laravel Echo 初始化的样子:

new Echo(
    broadcaster: 'pusher',
    key: 'korvrolf',
    wsHost: window.location.hostname, // I host my own web socket server atm
    wsPort: 6001, // I host my own web socket server atm
    forceTLS: false,
    auth: 
        withCredentials: true,
        headers: 
            'X-CSRF-TOKEN': window.Laravel.csrfToken
        
    
)

如果没有 CSRF 令牌,端点将返回 419 状态响应。

在我的 SPA 的 index.blade.php 中,我打印出 CSRF 令牌:

<script>
    window.Larvel = 
        csrfToken: " csrf_token() "
    
</script>

现在,/broadcast/auth 端点返回 200 响应。

【讨论】:

以上是关于Laravel Sanctum 和使用 Pusher.js 进行广播(401、419 错误)的主要内容,如果未能解决你的问题,请参考以下文章

Laravel Sanctum 令牌()未定义

如何使用 Laravel Sanctum 和 React 修复 401 Unauthorized 错误?

当页面更新时,数据被删除 - vue 和 laravel sanctum

Laravel sanctum 获得合适的用户

Laravel sanctum 获得 401 未授权

如何使用 CSRF 令牌测试 Laravel / Sanctum 端点