Access a community of over 900,000 Shopify Merchants and Partners and engage in meaningful conversations with your peers.
Hello, I am trying to authenticate an embedded app with session tokens.
The backend is written in python with flask.
This is the frontend code with shopify app bridge:
var AppBridge = window['app-bridge'];
var utils = window['app-bridge-utils']
var Redirect = AppBridge.actions.Redirect;
const permissionUrl =
"/oauth/authorize?client_id={{ api_key }}&scope={{ scopes }}&redirect_uri={{ redirect_uri }}";
if (window.top == window.self) {
window.location.assign("https://{{ shop }}/admin" + permissionUrl);
} else {
const app = AppBridge.createApp({
apiKey: "{{ api_key }}",
shopOrigin: "{{ shop }}"
});
console.log(app)
//try {
const sessionToken = utils.getSessionToken(app);
sessionToken.then((successMessage) => {
console.log("Yay! " + successMessage);
if (successMessage === undefined)
Redirect.create(app).dispatch(Redirect.Action.ADMIN_PATH, permissionUrl);
else {
//const fetch = utils.authenticatedFetch(app);
console.log("Fetch: " + "https://{{ shop }}/admin" + permissionUrl);
var xhttp = new XMLHttpRequest();
xhttp.open("POST", "https://{{ shop }}/admin" + permissionUrl, true);
xhttp.setRequestHeader("Authorization", 'Bearer ' + sessionToken);
xhttp.setRequestHeader('Access-Control-Allow-Headers', '*');
xhttp.send();
}
});
I don't know if the ajax request is fine.
With this code I get this error on the frontend:
access to XMLHttpRequest at 'https://myshop.myshopify.com/admin/oauth/authorize?client_id=mycode&scope=read_products&redirect_uri=https://myngrok.ngrok.io/auth/shopify/callback' from origin 'https://myngrok.ngrok.io' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.
After I've got the token what is the next step?