Laravel Sanctum을 사용하여 Vue 애플리케이션 승인

올해 초 출시된 Laravel Sanctum(구 Laravel Airlock)은 단일 페이지 애플리케이션이나 기본 모바일 애플리케이션에서 인증 프로세스를 최대한 쉽게 구축할 수 있는 경량 확장 패키지입니다. 정말 간단하고 쉽습니다. 이전에는 세션 기반 웹 미들웨어를 사용하거나 Tymon의 jwt-auth와 같은 외부 통합 종속성 패키지를 사용했지만 이제는 Sanctum을 사용하여 상태 기반 인증 및 토큰 기반 인증을 완료할 수 있습니다.

이 짧은 테스트에서는 Laravel Sanctum을 사용하여 처음부터 프로젝트를 빌드하는 방법을 보여 드리겠습니다. Vue 구성 요소를 통해 사용자를 인증하고 로그인한 사용자와 관련된 데이터를 가져오는 더미 API를 만듭니다.

작성된 튜토리얼을 건너뛰고 싶다면 제가 만든 비디오를 시청하세요.

또한 GitHub로 직접 이동하여 이 저장소 [code]에 있는 전체 소스 코드를 볼 수도 있습니다.

준비 완료, 함께 플레이팅해 볼까요!

테스트 API 만들기

가장 먼저 해야 할 일은 데이터를 가져올 수 있는 API 인터페이스를 만드는 것입니다. 저는 각 사용자에게 표시되는 비밀 목록을 검색하는 매우 간단한 앱을 구상했습니다.

저는 즉시 Laravel 애플리케이션을 설치하고 Laravel Docker 설정을 사용하여 로컬 환경에서 MySQL 데이터베이스와 함께 실행되도록 구성했습니다. 가장 먼저 해야 할 일은 비밀에 대한 모델 클래스와 관련 마이그레이션 파일을 만드는 것입니다. 여기에서 artisan을 사용하여 명령줄을 통해 이러한 작업을 쉽게 완료할 수 있습니다.

php artisan make:model Secret --migration

다음으로 마이그레이션 파일을 열고 비밀을 설명하기에 충분한 데이터 열을 추가해 보겠습니다. 우리에게 필요한 것은 (Laravel에서 제공하는 기본 ID와 타임스탬프 외에) 사용자와 연결되는 user_id 정수 필드와 실제로 사용자 비밀 정보를 보관하는 필드라고 생각합니다.

Schema::create('secrets', function (Blueprint $table) {
    $table->id();
    $table->integer('user_id');
    $table->text('secret');
    $table->timestamps();
});

그런 다음 데이터베이스 마이그레이션 명령을 실행하여 사용자 및 비밀 테이블을 생성하세요.

php artisan migrate

두 모델 클래스 간의 연결을 활성화하려면 애플리케이션의 두 모델 클래스를 몇 가지 간단한 수정이 필요하므로 두 모델 클래스 파일을 열고 수정을 시작하겠습니다.

// User.php
public function secrets()
{
    return $this->hasMany('App\Secret');
}
// Secret.php
public function user()
{
    return $this->belongsTo('App\User');
}

API 구조의 마지막 부분 실제 경로와 컨트롤러입니다. 현재 사용자와 관련된 모든 비밀 정보를 표시하려면 웹 페이지 경로에 액세스하기만 하면 됩니다. 그래서 Routes/api.php 파일에 다음을 추가했습니다:

Route::get('/secrets', 'SecretController@index');

Artisan 명령을 사용하여 이 컨트롤러를 쉽게 생성할 수 있습니다:

php artisan make:controller SecretController

방금 생성한 컨트롤러를 열고 인덱스 메소드를 생성하여 먼저 모든 비밀을 반환합니다. 열쇠. 지금은 인증된 사용자를 얻을 수 없기 때문에:

public function index()
{
    return App\Secret::all();
}

이제 더미 API가 완성되었습니다. 가짜 사용자와 키를 만들어 보겠습니다.

데이터베이스 채우기

쉽게 데이터베이스에 직접 가서 수동으로 사용자를 채우거나, 사용자가 자신의 데이터를 입력할 수 있는 컨트롤러와 양식을 만들거나, Artisan Tinker를 사용하여 반자동으로 사용자를 만들 수 있습니다. 저는 이러한 방법을 건너뛰고 내장된 Laravel 팩토리를 사용하여 사용자와 키에 대한 가짜 데이터를 생성하겠습니다.

Laravel에는 가짜 사용자를 생성하기 위한 UserFactory.php 클래스가 기본으로 제공됩니다. 키에 대해 유사한 팩토리 클래스를 생성하겠습니다. 터미널에서 다음 Artisan 명령을 실행하세요:

php artisan make:factory SecretFactory --model=Secret

생성된 파일을 열고 각 모델을 user_id와 secret 두 개의 데이터로 채웁니다.

$factory->define(Secret::class, function (Faker $faker) {
    return [
        'user_id' => 1,
        'secret' => $faker->text
    ];
});

위 스니펫에 user_id가 있는 이유가 궁금할 수도 있습니다. 하드 코딩을 사용하세요. 왜냐하면 사용자 수에 따라 무작위로 생성하는 것이 아니라 더 많은 제어권을 갖고 싶기 때문입니다. 나중에 비밀 생성을 시작할 때 이를 재정의하는 방법을 보여 드리겠습니다.

몇 명의 가짜 사용자를 만드는 것부터 시작하겠습니다. 사이트 루트에서 php artisan Tinker 명령을 실행하여 Tinker Shell을 엽니다. 일단 열리면 전역 팩토리 도우미를 두 번 실행하여 두 명의 사용자를 생성할 수 있습니다.

factory(App\User::class)->create(); // 与make不同，create 将我们的用户保存在数据库中

이제 생성되었으므로 비밀을 생성하겠습니다. user_id 1에 대한 두 개를 생성하기 위해 Tinker 셸에서 다음을 두 번 실행하겠습니다.

이제 키를 생성했으므로 키를 생성해 보겠습니다. user_id 1에 대한 두 개의 키를 생성하기 위해 Tinker에서 다음 명령을 두 번 실행했습니다.

factory(App\Secret::class)->create();

하지만 두 번째 키가 사용자에 대해 다른 ID를 갖고 있다면 어떻게 될까요? 팩토리 클래스의 값을 재정의하는 것은 쉽습니다. 우리가 해야 할 일은 재정의 배열을 create() 메서드에 전달하는 것뿐입니다. 따라서 다음 명령을 두 번 실행하여 두 번째 가짜 사용자를 위한 두 개의 키를 생성합니다:

factory(App\Secret::class)->create(['user_id' => 2]);

데이터베이스가 충분한 가짜 데이터로 채워지면 Laravel Sanctum 패키지 설치 및 준비로 넘어갑니다.

Laravel Sanctum 설치

설치는 매우 간단하며 터미널에서 몇 가지 명령을 실행하여 완료할 수 있습니다. 먼저 Composer를 사용하여 패키지를 설치해 보겠습니다.

composer require laravel/sanctum

다음으로 다음 명령을 실행하여 마이그레이션 파일을 게시하고 마이그레이션을 실행합니다.

php artisan vendor:publish --provider="Laravel\Sanctum\SanctumServiceProvider"
php artisan migrate

Sanctum 安装的最后一部分要求我们修改 app\Http\Kernel.php 文件以包含一个中间件，该中间件会将 Laravel 的会话 cookie 注入到我们的应用程序前端中。这最终将使我们能够以经过身份验证的用户身份传递和检索数据：

'api' => [
    EnsureFrontendRequestsAreStateful::class,
    'throttle:60,1'
]

现在，我们可以进入应用程序的前端了！

构建前端

从 Laravel 7 开始，前端和身份验证模板已从主程序包中剥离，可以单独安装。为了进行演示，我们将使用它和 Vue 来构建前端。

在应用程序的根目录运行以下命令将帮助我们配置环境：

composer require laravel/ui
php artisan ui vue --auth
npm install && npm run dev

上面的命令做了三件事：

使用 Composer 安装 Laravel UI 软件包

生成 JS/UI 文件、身份验证模板和 package.json 修改

安装前端依赖项并编译开发环境的 JS/CSS 文件

我会把 welcome.blade.php 文件里的所有内容拷贝到 app.blade.php 文件里，然后把外部 div 里的内容删掉并添加一个 id="app" 属性。这将是我们 Vue 应用程序的挂载点，如刚才生成的 app.js 文件中所述。

让我们创建 Vue 组件，该组件将保存我们的登录表单并显示一些 secret.

创建 Vue 组件

在此之前，我们可以通过命令： php artisan ui vue 来生快速成我们的前端代码，它默认会生成一个 resources/js/components/ExampleComponent.vue 组件事例。好了，现在让我们创建新的组件：SecretComponent.vue，它的代码如下:

<template>
</template>
<script>
export default {
    data() {
        return {
            secrets: [],
            formData: {
                email: &#39;&#39;,
                password: &#39;&#39;
            }
        }
    }
}
</script>

这里有两个字段返回，其中 secrets 字段是个数组，还有一个用户存储 email 和 password 字段的 formData 对象。

下面，我们将在 template 标签内构件我们的登录表单。

<template>
    <div>
        <div v-if="!secrets.length" class="row">
            <form action="#" @submit.prevent="handleLogin">
                <div class="form-row">
                    <input type="email" v-model="formData.email">
                </div>
                <div class="form-row">
                    <input type="password" v-model="formData.password">
                </div>
                <div class="form-row">
                    <button type="submit">Sign In</button>
                </div>
            </form>
        </div>
    </div>
</template>

好了，一个登录表单创建完成，它可能看起来像下面这样：

在上面代码中，我们禁用了 form 表单的默认提交操作，并将它移交给 Vue 的 Submit 来处里。现在我们创建 handleLogin 方法来处理用户的登录请求：

<script>
export default {
    data() {
        return {
            secrets: [],
            formData: {
                email: &#39;&#39;,
                password: &#39;&#39;
            }
        }
    },
    methods: {
        handleLogin() {
            // 处理登录请求
        }
    }
}
</script>

最后，不要忘记将我们的组件注册到 resources/js/app.js 文件中：

Vue.component('secret-component', require('./components/SecretComponent.vue).default);

然后在 app.blade.php 中使用该组件。现在我们可以通过 handleLogin() 方法验证用户登录操作了。

用户验证

如果看过 Laravel Sanctum documentation 这篇文章，你应该知道 SPA 单页应用的 csrf 保护实现方式，你需要先请求 /sanctum/csrf-cookie 以获取 csrf token。

然后，我们请求 /login 路由，并将我们的 email 和 password 字段传递给后端接口处理。

现在让我们在 handleLogin() 方法中实现上面的需求：

handleLogin() {
    axios.get('/sanctum/csrf-cookie').then(response => {
        axios.post('/login', this.formData).then(response => {
            console.log('登录成功!');
        }).catch(error => console.log(error)); // 如果验证不匹配
    });
}

现在，使用当我们输入相应的信息你会发现流程已经走通。每个请求都会受到 csrf 保护，并发送登录接口所需要的 email 与 password 字段，即使现在没有响应数据，我的程序依然会通过 Promise 继续执行，而不会崩溃。

接下来要做什么？让我们完成登录操作吧！

用户检索

在我们的 Vue 组件中，继续创建名为 getSecrets() 方法，该方法是用户登陆成功之后，获取用户 secrets ，通常我们会得到一个 secrets 数组，之后我们将我们的得到的新的数组替换组件中原有的数组。

打当用户登录成功之后，我们调用 getSecrets() 函数以完成后续操作。

handleLogin() {
    axios.get('/sanctum/csrf-cookie').then(response => {
        axios.post('/login', this.formData).then(response => {
            this.getSecrets();
        }).catch(error => console.log(error)); // credentials didn't match
    });
},
getSecrets() {
    axios.get('/api/secrets').then(response => this.secrets = response.data);
}

但是，现在程序中我们返回的是所有用户 secrets。所以我们需要在 index() 方修改它，以得到正确的数据：

public function index(Request $request)
{
    return $request->user()->secrets;
}

在登录成功之后，所有需要用户验证的接口中的请求头中都会包含 laravel_session cookie，这样 Sanctum 可以通过该 cookie 来确定并关联当前请求的用户。

之后，既可以使用 $request 对象来获取用户的全部信息了，然后我们将 secret 信息与用户关联，并将数据返回。

最后我们将数据格式化、脱敏之后呈现给用户：

<template>
    <div>
        <div v-if="secrets.length" class="row">
            <div class="secret" v-for="(secret, index) in secrets" :key="index">
                <strong v-text="secret.secret"></strong> - created at <span v-text="secret.created_at"></span>
            </div>
        </div>
    </div>
</template>

现在我们刷新应用，并使用我们 fake 的用户数据登录，就可以看到以下页面了：

至此，一个 SPA 单页应用的登录操作完成。

总结和后续

我仅仅刚开始接触并使用该扩展，如果使用以上方式验证用户，则之后所有需要用户信息的接口可以实现像传统 web 应用的登录操作一样，每个请求都会携带用户状态。

물론 토큰을 사용하여 SPA 단일 페이지 애플리케이션, 모바일 및 데스크톱 애플리케이션에 대한 인증을 구현할 수도 있습니다. 속담처럼 모든 길은 로마로 통합니다. 이 기사는 문서 확장에 대한 토론과 실습일 뿐입니다.

이 기사가 귀하의 개발에 편리함과 영감을 줄 수 있기를 바랍니다.

추천 튜토리얼: "PHP 튜토리얼"

위 내용은 Laravel Sanctum을 사용하여 Vue 애플리케이션 승인의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!