README

此包为您的网站添加了管理cookie对话框的简单功能。它包括一个控制器，该控制器期望请求指示是否允许第三方cookie，并相应地在用户的机器上设置cookie。

您可以使用自己的前端实现，或者使用本页底部的示例（vuejs/inertiajs/pinia/tailwindcss）。

安装

composer require sebastiansulinski/laravel-cookies-dialog

php artisan vendor:publish --tag=laravel-cookies-dialog

现在您将有一个可用的 config/cookies-dialog.php 文件 - 您可以随意更新它。

将共享变量传递给inertia的组件

// App\Http\Middleware\HandleInertiaRequests.php

public function __construct(Request $request, private Share $share)
{
    //...
}

public function share(Request $request): array
{
    return array_merge(parent::share($request), $this->share->get());
}

包含的 ServiceProvider（使用包发现加载）自动使所有这些变量对所有视图可用。

添加变量到共享

您可以通过在 AppServiceProvider 中使用 Share::set() 方法来将更多变量添加到共享池中。

// App\Providers\AppServiceProvider

use SSD\CookiesDialog\Utilities\Share;

public function boot(): void
{
    Share::set('googleTagID', config('services.google.tag_id'));
}

用法

在视图文件中

@if($thirdPartyCookies)
    // your scripts go here
@endif

Js存储

使用 Pinia 存储 InertiaJs

import { defineStore } from 'pinia';
import { usePage } from '@inertiajs/inertia-vue3';

export const useCookieStore = defineStore('cookies', {
  state: () => ({
    visible: usePage().props.value.showCookiesDialog,
    thirdParty: usePage().props.value.thirdPartyCookies,
  }),
  actions: {
    toggle() {
      this.thirdParty = !this.thirdParty;
    },
    agree() {
      axios.post('/ssd/cookie', { third_party: Number(this.thirdParty) })
        .then(() => window.location.reload())
        .catch(error => console.log(error));
    },
  },
});

确保如果您已覆盖这些变量，则 showCookiesDialog 和 thirdPartyCookies 与您的配置变量名称匹配。

VueJs Dialog 组件

<script setup>
import Settings from './Settings.vue';
import { useCookieStore } from '@/stores/cookies';
import { Link } from '@inertiajs/inertia-vue3';
import { ref } from 'vue'

const store = useCookieStore();

const revealed = ref(false);

</script>
<template>
    <div v-if="store.visible" class="w-full fixed inset-x-0 bottom-0 bg-neutral-900 bg-opacity-90 py-8 text-white z-20">
      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
            <div class="flex flex-col lg:flex-row space-y-4 lg:space-y-0">
                <div class="flex-auto">
                    <h2 class="text-2xl font-semibold">Cookies</h2>
                    <p class="text-neutral-300 mt-4">
                        We use cookies to help provide you with the best possible online experience.<br />
                        By using this site, you agree that we may store and access cookies on your device.
                    </p>
                    <p class="text-neutral-300 mt-4">
                        <Link
                            href="/cookies"
                            class="text-yellow-300 hover:text-yellow-400"
                        >
                            Cookie policy</Link>.
                        <span
                            @click.prevent="revealed = !revealed"
                            class="text-yellow-300 hover:text-yellow-400 cursor-pointer"
                        >
                            Cookie settings
                        </span>.
                    </p>
                </div>
                <div>
                    <button
                        v-if="!revealed"
                        @click="store.agree"
                        type="button"
                        class="inline-flex rounded-md border px-4 py-2 text-base font-medium shadow-sm bg-white text-gray-800 border-gray-200 hover:border-gray-400"
                    >I Agree</button>
                </div>
            </div>
            <Settings class="py-8" v-if="revealed" />
        </div>
    </div>
</template>

VueJs Settings 组件

<script setup>
  import { useCookieStore } from '@/stores/cookies';

  const store = useCookieStore();
</script>
<template>
  <div>
    <div class="grid lg:grid-cols-2 gap-8">
      <div>
        <div class="flex items-center">
          <input
            id="cookies-functional"
            aria-describedby="functional-description"
            name="comments"
            type="checkbox"
            class="h-4 w-4 mr-2 rounded border-neutral-600 border-2 bg-neutral-900 text-primary focus:ring-primary-hover opacity-50"
            checked="checked"
            disabled
          />
          <label for="cookies-functional" class="text-xl text-white">
            Functional cookies
          </label>
        </div>
        <p class="text-neutral-300 mt-6" id="functional-description">
          Functional Cookies are enabled by default at all times so that we can save your preferences for cookie settings and ensure site works and delivers best experience.
        </p>
      </div>
      <div>
        <div class="flex items-center">
          <input
            id="cookies-third-party"
            aria-describedby="third-party-description"
            name="comments"
            type="checkbox"
            class="h-4 w-4 mr-2 rounded border-neutral-600 border-2 bg-neutral-900 text-primary focus:ring-primary-hover"
            @change="store.toggle"
            :checked="store.thirdParty"
          />
          <label for="cookies-third-party" class="text-xl text-white">
            Third party cookies
          </label>
        </div>
        <p class="text-neutral-300 mt-6" id="third-party-description">
          This website uses Google Analytics to collect anonymous information such as the number of visitors to the site, and the most popular pages.
          Keeping this cookie enabled helps us to improve our website.
        </p>
      </div>
    </div>
    <div class="flex justify-end mt-6">
      <button
        type="button"
        @click="store.agree"
        class="inline-flex rounded-md border px-4 py-2 text-base font-medium shadow-sm bg-white text-gray-800 border-gray-200 hover:border-gray-400"
      >Agree to selected</button>
  </div>
</div>
</template>

最后，将组件添加到模板的页脚中，您就完成了。