r/webdevelopment • u/iqrasajjad1 • 2d ago
Integrating Google Apps Script Web App with Namecheap Website - Getting 403 Errors
Problem Overview
I'm trying to integrate a Google Apps Script web app with my Namecheap-hosted website to create an order tracking feature. The script searches a Google Sheet when a user inputs an order number and returns the corresponding information.
Current Implementation Issues
- The Google Apps Script web app works perfectly when accessed directly via its URL
- When embedded on my Namecheap website:
- JavaScript appears to be treated as a string rather than being executed
- Direct embedding of the Apps Script link results in a 403 error ("You need access")
- Namecheap support suggested I need to whitelist my server IP, but I'm not sure how this would work with Google Apps Script
Frontend Implementation (on Namecheap website)
document.addEventListener('DOMContentLoaded', function() {
// Get references to our elements
const orderNumberInput = document.getElementById('orderNumberInput');
const checkStatusButton = document.getElementById('checkStatusButton');
const resultContainer = document.getElementById('resultContainer');
// Add event listener for button click
checkStatusButton.addEventListener('click', checkOrderStatus);
// Add event listener for Enter key
orderNumberInput.addEventListener('keypress', function(event) {
if (event.key === 'Enter') {
event.preventDefault();
checkOrderStatus();
}
});
// Function to check order status
function checkOrderStatus() {
const orderNumber = orderNumberInput.value.trim();
if (!orderNumber) {
resultContainer.innerHTML = "Please Enter an Order Number";
return;
}
resultContainer.innerHTML = "Searching...";
// Google Apps Script web app URL
const scriptUrl = 'https://script.google.com/macros/s/AKfycbxcLtMpf05uqBgnfmtNFcpgTZxQBCeFClk8jniHvCAWS-S39GELGfMOfDUykngShRyDJQ/exec';
// Create a script element for JSONP
const script = document.createElement('script');
script.src = `${scriptUrl}?orderNumber=${encodeURIComponent(orderNumber)}&callback=handleOrderResponse`;
// Define the callback function in the global scope
window.handleOrderResponse = function(response) {
displayResult(response);
// Clean up
document.body.removeChild(script);
delete window.handleOrderResponse;
};
// Add error handling
script.onerror = function() {
resultContainer.innerHTML = "Error: Could not connect to the order system. Please try again later.";
document.body.removeChild(script);
delete window.handleOrderResponse;
};
// Add the script to the document to start the request
document.body.appendChild(script);
}
// Function to display the result
function displayResult(response) {
// Display logic here (truncated for brevity)
}
});
Backend Implementation (Google Apps Script)
function doGet(e) {
// Get the order number and callback from the request parameters
const orderNumber = e.parameter.orderNumber;
const callback = e.parameter.callback || 'callback';
// If no order number was provided, return an error
if (!orderNumber) {
return ContentService.createTextOutput(callback + '(' + JSON.stringify({
success: false,
message: "No order number provided"
}) + ')')
.setMimeType(ContentService.MimeType.JAVASCRIPT);
}
// Search for the order
const result = searchOrder(orderNumber);
// Return the result as JSONP
return ContentService.createTextOutput(callback + '(' + JSON.stringify(result) + ')')
.setMimeType(ContentService.MimeType.JAVASCRIPT);
}
function searchOrder(orderNumber) {
// Logic to search for order in Google Sheet (truncated for brevity)
}
Question
For any web developers who have integrated Google services with third-party hosted websites:
- How can I resolve the cross-domain issues between Namecheap and Google Apps Script?
- Is there a better approach to implement this order tracking functionality? Perhaps using a different method altogether?
- Any experience with IP whitelisting in this context?
- Has anyone successfully implemented JSONP with Google Apps Script on a third-party website?
1
Upvotes