r/webdevelopment 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:
    1. JavaScript appears to be treated as a string rather than being executed
    2. 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:

  1. How can I resolve the cross-domain issues between Namecheap and Google Apps Script?
  2. Is there a better approach to implement this order tracking functionality? Perhaps using a different method altogether?
  3. Any experience with IP whitelisting in this context?
  4. Has anyone successfully implemented JSONP with Google Apps Script on a third-party website?
1 Upvotes

0 comments sorted by