استفاده از API در JavaScript

هنگام ساختن API، بسیار مفید است که بتوانید API شخصی خود را در برنامه‌های JavaScript خود استفاده کنید. این رویکرد در توسعه API به برنامه شما این امکان را می‌دهد که از همان API ای که به طور عمومی در اختیار کاربران سراسر جهان گذاشته‌اید، استفاده کنید. چرا که همان API ممکن است توسط برنامه وب، موبایل، برنامه‌هایthird party  (شخص ثالث) و حتی در package های شما استفاده شود.

اما، Passport شامل یک middleware است که می‌تواند این کار را برای شما انجام دهد. تمام کاری که باید انجام دهید این است که middleware به نام CreateFreshApiToken  را به گروه middleware وب خود در فایل app/Http/Kernel.php اضافه کنید. پس در برنامه Todo، فایل app/Http/Kernel.php را باز کرده و کد زیر را در آن قرار می‌دهیم.

protected $middlewareGroups = [
    'web' => [
        // …
        \Laravel\Passport\Http\Middleware\CreateFreshApiToken::class,
    ],

        // …

باید اطمینان حاصل کنید کهCreatFreshApiToken  آخرین middleware ذکر شده در آرایه middleware ها است.

این middleware در Passport یک کوکی laravel_token را به پاسخ‌های خروجی متصل می‌کند. این کوکی حاوی JWT  رمزگذاری شده ای است که Passport، از آن برای تایید صحت درخواست‌های API از برنامه JavaScript استفاده می‌کند. JWT یک طول عمر برابر با مقدار پیکربندی session.lifetime دارد. اکنون می‌توانید درخواست‌های خود را به API  برنامه خود بدهید بدون این که صریحا یک Access Token داشته باشید:

// … 
axios.get('/api/user')
    .then(response => {
        console.log(response.data);
    });
// …

بسیار خوب. حال می‌خواهیم برای دریافت اطلاعات کاربران با استفاده از این روش عمل کنیم. فایل resources/js/components/Client.vue/ خود را باز کرده و بخش template را به صورت زیر می‌نویسیم:

<template>
    <div>
        <div class="col-md-9" align="center">
            <div class="panel-heading">
                <div>
                    <label>Please get user's tasks through SPA Client</label>
                </div>
                <div>
                    <button type="button" @click="login" class="btn btn-primary">Get data with SPA client</button>
                </div>
            </div>
        </div>
        <p></p>
        <div id="app">
            <table class="table table-borderless mb-1">
                <thead class="thead-dark">
                <tr>
                    <th>ID</th>
                    <th>Description</th>
                </tr>
                </thead>
                <tbody>
                <tr v-for="task in tasks">
                    <td>{{task.id}}</td>
                    <td>{{task.description}}</td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

کد‌های زیر را در بخش script قرار می‌دهیم:

<script>
    export default {
        data() {
            return {
                tasks: [],
            }
        },

        methods: {
            login() {

                axios.get('/api/todos')
                    .then(response => {
                        this.tasks = response.data
                        console.log(response.data);
                    });
            }
        }
    }
</script>

سپس دستورات زیر را به ترتیب وارد نمایید:

npm run dev
php artisan serve

حال به مرورگر رفته و در برنامه Login می‌کنیم، سپس مسیر http://localhost:8000/client را باز کرده و تصویری مشابه شکل زیر را خواهیم دید. همان‌طور که مشاهده می‌کنید، ما یک جدول برای دریافت اطلاعات کاربر ایجاد کرده‌ایم.

با کلیک بر روی کلید موجود در شکل بالا، خروجی ما شبیه شکل زیر خواهد بود. همان‌طور که مشاهده می‌کنید اطلاعات کاربر در جدول نشان داده شده‌اند:

شخصی سازی نام کوکی

در صورت نیاز می‌توانیم نام کوکی laravel_token را با استفاده از متد Passport::cookie شخصی سازی کنیم. برای این کار، کلاس AuthServiceProvider را باز کرده و متد Passport::cookie را با نام دلخواه برای کوکی در متد boot به صورت زیر می‌نویسیم:

/**
 * Register any authentication / authorization services.
 *
 * @return void
 */
public function boot()
{
    $this->registerPolicies();

    Passport::routes();

    // …

    Passport::cookie('custom_name');
}

برای مشاهده نتیجه، بخش Web Developer/Network مرورگر را باز می‌کنیم (می‌توانید کلید های ctrl+shift+I را فشار دهید). سپس بر روی کلید موجود در تصاویر قبلی، مجددا کلیک می‌کنیم. همان‌طور که در شکل زیر دیده می‌شود، مقدار توکن با نام custom_name ایجاد شده است:

محافظت در برابر حملات CSRF

هنگامی که از این روش احراز هویت استفاده می‌کنید، باید اطمینان حاصل کنید که یک هدر معتبر CSRF در درخواست‌های شما گنجانده شده باشد. JavaScript ای که به طور پیش‌فرض در لاراول وجود دارد شامل یک نمونه Axios است که به طور خودکار از مقدار کوکی رمزگذاری شده XSRF-TOKEN برای ارسال یک هدر X-XSRF-TOKEN در درخواست‌های same-origin استفاده می‌کند.

تذکر: اگر می‌خواهید به جایX-XSRF-TOKEN ، هدر X-CSRF-TOKEN را ارسال کنید، لازم است از توکن رمزگذاری نشده تهیه شده توسط ()csrf_token استفاده کنید.