為什麼我在發出請求時在 Shopify 應用程式中收到「無效會話令牌」錯誤？

Question

我正在嘗試從我的shopify應用程式發出請求，將方法發佈到我的後端，即laravel和我的前端vue.js，我正在使用Inertia，我明白了。

Answer 1

為了澄清問題是什麼以及如何解決，首先我認為有人會面臨與我相同的問題，因此我認為不需要任何代碼，因為這基本上是非常自我的錯誤解釋說會話令牌已過期，您還想要什麼？

發生此錯誤的原因是 Shopify 正在 Iframe 中運行應用程序，並且發出請求的令牌不匹配，因此您必須手動將令牌新增至請求中。我建議在呼叫方法時始終獲取令牌，因為令牌每次都會更改一會兒。我添加了一些程式碼範例，我如何使用 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);
                });
            });
        },

這是在我的 app.blade.php 中，我在 Osiset github 上找到了它，不確定這是否是最佳解決方案 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>

或者，您可以停用 csrf 令牌（不建議）