Autorisieren Sie Vue-Anwendungen mit Laravel Sanctum

Laravel Sanctum (früher bekannt als Laravel Airlock), das Anfang dieses Jahres veröffentlicht wurde, ist ein leichtes Erweiterungspaket, das den Aufbau auf Single-Page-Anwendungen oder nativen mobilen Anwendungen ermöglicht. Der Authentifizierungsprozess ist so einfach und unkompliziert wie möglich gestaltet. Früher haben Sie entweder sitzungsbasierte Web-Middleware oder extern integrierte Abhängigkeitspakete wie z. B. jwt-auth von Tymon verwendet. Jetzt können Sie jedoch Sanctum verwenden, um die zustandsbehaftete Authentifizierung und die tokenbasierte Authentifizierung durchzuführen.

In diesem kurzen Test zeige ich Ihnen, wie Sie mit Laravel Sanctum ein Projekt von Grund auf erstellen. Wir erstellen eine Dummy-API, um einen Benutzer über eine Vue-Komponente zu authentifizieren und die mit diesem angemeldeten Benutzer verknüpften Daten abzurufen.

Wenn Sie das schriftliche Tutorial überspringen möchten, können Sie sich das von mir erstellte Video ansehen.

Sie können auch direkt zu GitHub gehen, um den vollständigen Quellcode anzuzeigen, der sich in [code] this befindet Repository.

Fertig, lass es uns gemeinsam anrichten!

Erstellen einer Test-API

Als erstes müssen wir eine API-Schnittstelle erstellen, von der wir Daten abrufen können. Ich habe eine supereinfache App konzipiert, die eine Liste der Geheimnisse abruft, die für jeden Benutzer angezeigt werden.

Ich habe eine Laravel-Anwendung sofort installiert und mithilfe des Laravel Docker-Setups so konfiguriert, dass sie zusammen mit einer MySQL-Datenbank in meiner lokalen Umgebung ausgeführt wird. Als Erstes muss ich eine Modellklasse und zugehörige Migrationsdateien für unser Geheimnis erstellen. Hier können wir diese Vorgänge ganz einfach über die Befehlszeile abschließen.

php artisan make:model Secret --migration

Als nächstes öffnen wir die Migrationsdatei und fügen einige Datenspalten hinzu, die ausreichen, um ein Geheimnis zu beschreiben. Ich denke, was wir brauchen (neben der von Laravel bereitgestellten Standard-ID und dem Zeitstempel), ist ein ganzzahliges Feld „user_id“, das dem Benutzer zugeordnet werden kann, und ein Feld, das tatsächlich die geheimen Informationen des Benutzers enthält.

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

Führen Sie dann den Datenbankmigrationsbefehl aus, um die Benutzer- und Geheimnistabellen zu generieren.

php artisan migrate

Wir müssen einige einfache Änderungen an den beiden Modellklassen der Anwendung vornehmen, um die Zuordnung zwischen den beiden Modellklassen zu ermöglichen. Als nächstes öffnen wir die beiden Modellklassendateien und beginnen mit der Änderung:

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

Der letzte Teil unserer API-Struktur sind die eigentlichen Routen und Controller. Wir müssen nur auf einen Webseitenpfad zugreifen, um alle geheimen Informationen zum aktuellen Benutzer anzuzeigen. Also habe ich Folgendes zur Datei „routes/api.php“ hinzugefügt:

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

Dieser Controller kann einfach mit dem Artisan-Befehl erstellt werden:

php artisan make:controller SecretController

Öffnen Sie den Controller, den wir gerade erstellt haben, und lassen Sie uns einen Index erstellen Methode, gibt zunächst alle Schlüssel zurück. Denn im Moment können wir keine authentifizierten Benutzer erhalten:

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

Unsere Dummy-API ist jetzt vollständig. Erstellen wir einige gefälschte Benutzer und Schlüssel.

Befüllen Sie die Datenbank

Sie können ganz einfach direkt in die Datenbank gehen und die Benutzer manuell befüllen, Controller und Formulare erstellen, damit Benutzer ihre eigenen Daten eingeben können, oder Artisan verwenden Basteln Sie zur halbautomatischen Benutzererstellung. Ich werde diese Methoden überspringen und die integrierten Laravel-Fabriken verwenden, um gefälschte Daten für unsere Benutzer und Schlüssel zu generieren.

Laravel verfügt über eine standardmäßige UserFactory.php-Klasse zum Generieren gefälschter Benutzer. Wir werden eine ähnliche Factory-Klasse für den Schlüssel erstellen. Führen Sie den folgenden Artisan-Befehl im Terminal aus:

php artisan make:factory SecretFactory --model=Secret

Öffnen Sie die generierte Datei. Wir füllen einfach jedes Modell mit den beiden Daten user_id und Secret:

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

Sie fragen sich vielleicht, warum wir Hardcoding verwenden müssen in user_id im Snippet oben. Weil ich es nicht zufällig basierend auf der Anzahl der Benutzer generieren möchte, sondern mehr Kontrolle darüber haben möchte. Später zeige ich Ihnen, wie Sie es überschreiben können, wenn wir mit der Generierung von Geheimnissen beginnen.

Beginnen wir damit, ein paar Fake-Benutzer zu erstellen. Öffnen Sie die Tinker-Shell, indem Sie den Befehl php artisan tinker im Stammverzeichnis der Site ausführen. Nach dem Öffnen können wir zwei Benutzer erstellen, indem wir den globalen Factory-Helfer zweimal ausführen:

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

Nachdem wir sie generiert haben, erstellen wir unsere Geheimnisse . Ich werde Folgendes zweimal in der Tinker-Shell ausführen, um zwei für user_id 1 zu erstellen:

Jetzt, da wir sie generiert haben, erstellen wir unsere Geheimnisse. Ich habe den folgenden Befehl zweimal in Tinker ausgeführt, um zwei Schlüssel für Benutzer-ID 1 zu erstellen:

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

Aber was ist, wenn der zweite Schlüssel eine andere ID für den Benutzer hat? Das Überschreiben eines beliebigen Werts in einer Factory-Klasse ist einfach. Wir müssen lediglich das Überschreibungsarray an die Methode create() übergeben. Daher führen wir den folgenden Befehl zweimal aus, um zwei Schlüssel für den zweiten gefälschten Benutzer zu erstellen:

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

Sobald unsere Datenbank mit genügend gefälschten Daten gefüllt ist, fahren wir mit der Installation und Vorbereitung der Laravel Sanctum Software Bag fort.

Laravel Sanctum installieren

Die Installation ist ein Kinderspiel und kann durch die Ausführung einiger Befehle im Terminal durchgeführt werden. Zuerst installieren wir das Paket mit Composer:

composer require laravel/sanctum

Führen Sie anschließend den folgenden Befehl aus, um die Migrationsdatei zu veröffentlichen (und die Migration auszuführen):

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 应用的登录操作一样，每个请求都会携带用户状态。

Natürlich können Sie Token auch zur Implementierung der Authentifizierung für SPA-Single-Page-Anwendungen, mobile und Desktop-Anwendungen verwenden. Wie das Sprichwort sagt: Alle Wege führen nach Rom. Bei diesem Artikel handelt es sich lediglich um eine Diskussion und Übung rund um die Dokumentationserweiterung.

Ich hoffe, dass dieser Artikel Ihrer Entwicklung Erleichterung und Inspiration bringen kann.

Empfohlenes Tutorial: „PHP-Tutorial“

Das obige ist der detaillierte Inhalt vonAutorisieren Sie Vue-Anwendungen mit Laravel Sanctum. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!