Pourquoi est-ce que je reçois une erreur « Jeton de session invalide » dans mon application Shopify lorsque j'effectue une demande ?

Question

J'essaie de faire une demande depuis mon application Shopify, de publier une méthode sur mon backend qui est laravel et mon frontend vue.js, j'utilise Inertia, je comprends.

Answer 1

Pour clarifier quel est le problème et comment le résoudre, j'ai d'abord pensé que quelqu'un serait confronté au même problème que moi, donc je ne pense pas qu'aucun code soit nécessaire car il s'agit fondamentalement d'une erreur très explicite indiquant que le jeton de session a expiré, que veux-tu d'autre Que veux-tu ?

Cette erreur se produit car Shopify exécute l'application dans un Iframe et le jeton effectuant la demande ne correspond pas, vous devez donc ajouter manuellement le jeton à la demande. Je recommande de toujours obtenir le jeton lors de l'appel de la méthode, car le jeton changera pendant un certain temps à chaque fois. J'ai ajouté quelques exemples de code sur la façon dont je le gère en utilisant 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);
                });
            });
        },

C'est dans mon app.blade.php, je l'ai trouvé sur le github Osiset, je ne sais pas si c'est la meilleure solution 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>

Alternativement, vous pouvez désactiver le token csrf (non recommandé)