Mengapa saya mendapat ralat "Token sesi tidak sah" dalam apl Shopify saya semasa membuat permintaan?

Question

Saya cuba membuat permintaan daripada apl shopify saya, siarkan kaedah ke bahagian belakang saya iaitu laravel dan vue.js bahagian hadapan saya, saya menggunakan Inertia, saya faham.

Answer 1

Untuk menjelaskan apa masalahnya dan bagaimana untuk membetulkannya, mula-mula saya fikir seseorang akan menghadapi masalah yang sama seperti saya, jadi saya tidak fikir sebarang kod diperlukan kerana ini pada asasnya adalah ralat yang sangat jelas dengan mengatakan bahawa token sesi mempunyai tamat tempoh, apa lagi yang anda mahu Apa yang anda mahu?

Ralat ini berlaku kerana Shopify menjalankan aplikasi dalam Iframe dan token yang membuat permintaan tidak sepadan, jadi anda perlu menambah token secara manual pada permintaan. Saya mengesyorkan sentiasa mendapatkan token semasa memanggil kaedah kerana token akan berubah seketika setiap kali. Saya telah menambah beberapa contoh kod tentang cara saya mengendalikannya menggunakan Vue.js, Laravel, Inertia.js, Axios

submit() {
            let sessionToken = getSessionToken(app);
            sessionToken.then((token) => {
                axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;
                axios.get(route('login',{'form' : this.form,'email':this.form.email,'password':this.form.password})
                ).then(
                    response => {
                        console.log(token);
                        Inertia.visit('/home', {
                            method: 'get',
                            only: ['auth'],
                            headers: {
                                'Authorization': `Bearer ${token}`,
                            },
                        });
                    }).catch(error => {
                    alert(error);
                });
            });
        },

Ini dalam app.blade.php saya, saya menemuinya di Osiset github, tidak pasti sama ada ini penyelesaian terbaik https://github.com/osiset/laravel-shopify/issues/594

@if(\Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_enabled'))
            <script src="https://unpkg.com/@shopify/app-bridge{{ \Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_version') ? '@'.config('shopify-app.appbridge_version') : '' }}"></script>
            <script src="https://unpkg.com/@shopify/app-bridge-utils{{ \Osiset\ShopifyApp\Util::getShopifyConfig('appbridge_version') ? '@'.config('shopify-app.appbridge_version') : '' }}"></script>
            <script
                @if(\Osiset\ShopifyApp\Util::getShopifyConfig('turbo_enabled'))
                    data-turbolinks-eval="false"
                @endif
            >
                var AppBridge = window['app-bridge'];
                var actions = AppBridge.actions;
                var utils = window['app-bridge-utils'];
                var createApp = AppBridge.default;
                var app = createApp({
                    apiKey: "{{ \Osiset\ShopifyApp\Util::getShopifyConfig('api_key', $shopDomain ?? Auth::user()->name ) }}",
                    shopOrigin: "{{ $shopDomain ?? Auth::user()->name }}",
                    host: "{{ \Request::get('host') }}",
                    forceRedirect: true,
                });
                $.ajaxSetup({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    }
                });

            </script>
    

            @include('shopify-app::partials.token_handler')
            @include('shopify-app::partials.flash_messages')
        @endif
        @inertia
    </body>
    <script>
        const getSessionToken = window['app-bridge-utils'].getSessionToken;
    </script>

Sebagai alternatif, anda boleh melumpuhkan token csrf (tidak disyorkan)