Как я могу передать запрос с предъявителем/аутентификацией с помощью API-интерфейса fetch (или axios) и иметь возможность проверить авторизацию?
У меня есть страница в приложении Shopify Remix React, использующая код, подобный приведенному ниже. Мой вопрос: как добавить заголовки запросов, которые Shopify ожидает для аутентификации запроса администратора?
fetch('/api/geocode', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({orders})
}).then(res => res.json()).then(data => {
console.info('geocode data', data)
})
На моем api.geocode.js я хочу подтвердить, что они авторизованы:
export async function action({request}) {
const { admin } = await authenticate.admin(request); // does not work
const data = await request.json();
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Вы можете получить токен из localstorage, если вы уже вошли в приложение.
const token = localStorage.getItem('token');
После этого вы можете легко проверить, имеет ли токен заголовок Auth.
const authHeader = request.headers.get('Authorization');
if (!authHeader) {
return json({ error: 'Authorization header missing' }, { status: 401 });
}
Но если вы хотите проверить, действителен ли этот токен, вы можете использовать jsonwebtoken со своим секретным ключом.
Это будет что-то вроде этого
const decoded = jwt.verify(token, secretKey);
Чтобы аутентифицировать запрос к API администратора Shopify, вам необходимо включить в свой запрос на выборку соответствующие заголовки, такие как X-Shopify-Access-Token. Эти заголовки будут использоваться на стороне сервера для проверки запроса. Вот как вы можете изменить свой код, включив в него эти заголовки и аутентифицируя запрос на стороне сервера.
#Frontend Code
#Update your fetch call to include the necessary headers for authentication:
fetch('/api/geocode', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-Shopify-Access-Token': 'YOUR_ACCESS_TOKEN', // Replace with your access token
},
body: JSON.stringify({ orders })
})
.then(res => res.json())
.then(data => {
console.info('geocode data', data);
})
.catch(error => {
console.error('Error:', error);
});
#Backend Code
#On the server side, you will validate the request by checking the headers. Here’s how you can update the api.geocode.js:
import { authenticate } from './path-to-your-authentication-module';
export async function action({ request }) {
const authHeader = request.headers.get('X-Shopify-Access-Token');
// Validate the access token
if (!authHeader || authHeader !== process.env.SHOPIFY_ACCESS_TOKEN) {
return json({ error: 'Unauthorized' }, { status: 401 });
}
const data = await request.json();
// Proceed with your logic...
return json({ success: true, data });
}Дайте мне знать, если это поможет :D
Спасибо, да, это полезно. Итак, странная вещь: теперь я могу делать запросы на выборку без добавления каких-либо заголовков, а токен носителя (JWT) автоматически добавляется к моим запросам, и я могу авторизоваться, используя import {authenticate} from "../shopify.server.js"; and const { admin } = await authenticate.admin(request); Я пробовал с моим X-Shopify-Access-Token и без него. добавление к заголовкам выборки, как вы показали, и это работает в любом случае. Когда я декодирую токен носителя на сайте jwt.io, внутри этого токена отображается X-Shopify-Access-Token, который он называет «audi».
Подход с использованием import { authenticate } from "../shopify.server.js" и const { admin } = await authenticate.admin(request) является правильным и гарантирует правильную аутентификацию запроса. Наличие X-Shopify-Access-Token в утверждении aud декодированного токена JWT должно подтверждать, что запрос разрешен для действий администратора.
Ваш ответ является общим ответом, не специфичным для Shopify, Shopify необходимо аутентифицировать запрос следующим образом: await authentate.admin(request)