Hi,
We are trying to get our legacy web app to comply with the changes required for it to show in admin. This is for a custom app. The following page list 3 things that are needed:
Updating Shopify App Bridge
- Ensure that the content security policy includes admin.shopify.com.
- Update App Bridge to version 2.0.5 or higher. We recommend updating to version 3.2.0 or higher.
- Initialize App-Bridge with the host parameter.
We have performed all of these steps. Added Content Security Policy header, added App Bridge 3, and initialized AppBridge with the host parameter, but we are still being redirected to the legacy page in admin. Any ideas would be appreciated. The code is shown below. We have replaced our store name with "demo" in the example below, and changed the API key, neither of them is what we are using.
<?php header("Content-Security-Policy: frame-ancestors https://demo.myshopify.com https://admin.shopify.com;"); ?>
<!DOCTYPE html>
<html lang="en">
<head>
<title>VPA Custom Orders</title>
<!-- Tell the browser to be responsive to screen width -->
<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
<!-- Bootstrap 3.3.6 -->
<link rel="stylesheet" href="<?= base_url() ?>public/bootstrap/css/bootstrap.min.css">
<!-- Font Awesome -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.5.0/css/font-awesome.min.css">
<!-- Ionicons -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/ionicons/2.0.1/css/ionicons.min.css">
<!-- Theme style -->
<link rel="stylesheet" href="<?= base_url() ?>public/dist/css/AdminLTE.min.css">
<!-- Custom CSS -->
<link rel="stylesheet" href="<?= base_url() ?>public/dist/css/style.css">
<!-- AdminLTE Skins. Choose a skin from the css/skins. -->
<link rel="stylesheet" href="<?= base_url() ?>public/dist/css/skins/skin-blue.min.css">
<meta name="shopify-api-key" content="f57172bc3677f" />
<script src="https://cdn.shopify.com/shopifycloud/app-bridge.js?apiKey=f57172bc3677f"></script>
<script src="https://unpkg.com/@shopify/app-bridge@3"></script>
<script>
<?php if(isset($_GET['host'])){
$_SESSION['admin_host'] = base64_decode($_GET['host']);
} ?>
document.addEventListener('DOMContentLoaded', function() {
const AppBridge = window['app-bridge'];
const createApp = AppBridge.createApp;
const app = createApp({
apiKey: 'f57172bc3677f',
shopOrigin: 'https://demo.myshopify.com',
host: '<?php if(isset($_SESSION['admin_host'])){ echo base64_encode($_SESSION['admin_host']); } else { echo base64_encode('admin.shopify.com/store/demo'); } ?>'
});
});
</script>
<!-- jQuery 2.2.3 -->
<script src="<?= base_url() ?>public/plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- jQuery UI 1.11.4 -->
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
</head>
<body class="hold-transition skin-blue sidebar-mini">
<div class="wrapper" style="height: auto;">
<?php if($this->session->flashdata('msg') != ''): ?>
<div class="alert alert-warning flash-msg alert-dismissible">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4> Success!</h4>
<?= $this->session->flashdata('msg'); ?>
</div>
<?php endif; ?>
<section id="container">
<!--header start-->
<header class="header white-bg">
<?php include('include/navbar.php'); ?>
</header>
<!--header end-->
<!--sidebar start-->
<aside>
<?php include('include/sidebar.php'); ?>
</aside>
<!--sidebar end-->
<!--main content start-->
<section id="main-content">
<div class="content-wrapper" style="min-height: 394px; padding:15px;">
<!-- page start-->
<?php $this->load->view($view);?>
<!-- page end-->
</div>
</section>
<!--main content end-->
<!--footer start-->
<footer class="main-footer">
<strong>© <?php echo date("Y"); ?> All rights reserved.</strong>
</footer>
<!--footer end-->
</section>
</div>
<!-- Bootstrap 3.3.6 -->
<script src="<?= base_url() ?>public/bootstrap/js/bootstrap.min.js"></script>
<!-- AdminLTE App -->
<script src="<?= base_url() ?>public/dist/js/app.min.js"></script>
<!-- AdminLTE for demo purposes -->
<script src="<?= base_url() ?>public/dist/js/demo.js"></script>
<!-- page script -->
<script type="text/javascript">
$(".flash-msg").fadeTo(2000, 500).slideUp(500, function() {
$(".flash-msg").slideUp(500);
});
</script>
</body>
</html>
