Glyue User Docs
  • What is Glyue?
  • Tutorials
    • Start Here
    • Building a Single-Step Integration
      • 1. Creating the Integration
      • 2. Calling the External System
      • 3. Running the Integration
      • 4. Crafting the Output
    • Building a Multi-System Integration
      • 1. Connecting to the Core
      • 2. Field Mapping
      • 3. Running the Integration
    • Building an Event-Driven Integration
      • 1. Setting up the Mock CRM
      • 2. Receiving Inbound Requests
      • 3. Triggering the Integration from the CRM
    • Building an Email Integration
      • 1. Create and Configure the Integration
      • 2. Input Validation
      • 3. Get Story IDs from Hacker News
      • 4. Get Story Content
      • 5. Sending the Email
      • 6. Wrapping Up
      • 7. Extra credit
        • extra_credit.json
    • Building a RESTful CRUD Web Service
      • 1. Integration Setup
      • 2. Vault Setup
      • 3. Create Web Service Endpoints
      • 4. Execute Web Service Endpoints with Vault Methods
      • 5. Vault Code Examples and Explanation
    • Building a Retrieval API against FIS CodeConnect
      • 1. Integration Setup
      • 2. Service Request Setup
      • 3. Field Mapping Setup
      • 4. Integration and Service Request Hook Setup
      • 5. Testing the Integration
      • 6. Common Errors
    • What is Pre-Mapping?
      • Before you start
      • Bookmarks
      • Source and Targets
      • Field Mapping Status
      • Field Mapping Comments
      • Summary
  • How-To Guides
    • How to Run an Integration from Glyue
    • How to Invite New Users
    • How to Create a Value Mapping Set
    • How to Build and Deploy a Custom Frontend
    • How to Migrate an Integration
    • How to Set Up Single Sign On (SSO)
      • Glyue Setup
      • JumpCloud Setup
      • Azure Setup
      • Okta Setup
      • Glyue SAML Config Reference
    • How to Install the Glyue App for Zoom Contact Center
    • How to use the Vault
  • Reference
    • Integration Builder Page
    • Integration Anatomy
    • Integration Components
      • Integration
      • Service Request
      • Field Mapping
      • Value Mapping Set
      • Value Mapping
      • Validation Rule
      • Mask
      • Integration Config
      • Integration Engine Versions
    • Integration Lifecycle
    • Special Functions
      • add_run_label
      • callint
      • debug
      • end
      • get_namespace
      • humanize
      • import_helper
      • keep
      • list_files
      • map_value
      • open_glyuefile
      • open_vault
      • Data Manipulation Utilities
      • calladapter
    • Special Variables
      • __adapter_config__
      • input
      • parentint
      • retvalue
      • run_history_id
      • Iterables
        • fitem/fidx
        • sritem/sridx
        • vritem/vridx/vrmsg
    • Adapters
      • Generic HTTP Adapter
      • Email SMTP Adapter
    • Web Service Endpoints
    • Vault Reference
  • Glyue Platform Reference
    • Banking Core Connectivity Guide
    • Authentication
    • Permissions
      • Service Accounts
      • Organizations
    • Frontends
    • Idempotency Layer
    • Integration Scheduler
    • Governance Reports
    • Arbitrary Integration Request Content Support
    • Admin Components
    • Logging
  • ETL
    • Glyue ETL Overview
    • Data Connectors
    • Workflows
    • Run History
    • Scheduler
Powered by GitBook
On this page
  • Using React with Frontends
  • Query Parameters
  • Code Snippets
  • Getting the CSRF Token
  • Logging Out
  • Executing an Integration

Was this helpful?

  1. Glyue Platform Reference

Frontends

PreviousOrganizationsNextIdempotency Layer

Last updated 9 months ago

Was this helpful?

Using React with Frontends

When using React to build your Frontend, ensure that the "public path" or "base directory" of your React app is set to frontends/example-frontend to ensure all linked resources are loaded correctly.

Using Vite

If you're using to build your React app, you can edit the vite.config.js file (or vite.config.ts if you're using TypeScript) to set the public path, like so:

import { defineConfig } from "vite"
import react from "@vitejs/plugin-react"

export default defineConfig({
  plugins: [react()],
  base: "/frontends/example_dashboard" <--
})

Using Create-React-App

If you bootstrapped you're React app using , you can specify the homepage key in your project's package.json file to set the public path, for example:

"homepage": "https://glyueprod.examplebank.sandboxbanking.com/frontends/example_dashboard"

Using Webpack

If you're using to bundle your React app, you'll just need to modify output.publicPath in your Webpack configuration file (most likely webpack.config.js), like so:

export default {
  output: {
    publicPath: "https://glyueprod.examplebank.sandboxbanking.com/frontends/example_dashboard"
  }
}


Query Parameters

Frontends accept query parameters. As an example,

glyueprod.mybank.sandboxbanking.com/frontends/example-dashboard?customer_id=1234&branch=west

To access these query parameters in your frontend's Javascript, use the window object's location property. For example:

const params = new URLSearchParams(window.location.search);
const customerId = params.get('customer_id'); // 1234
const branch = params.get('branch'); // west

Code Snippets

Below are provided code snippets for common actions within a Frontend.

Getting the CSRF Token

For Glyue to accept any POST requests made to its API endpoints, you must provide the X-CSRFToken header using the value of the csrftoken cookie with your request.

Using js-cookie

import Cookies from "js-cookie"

const CSRFToken = Cookies.get("csrftoken")

Using document.cookie

If you're unable to use an external library, below is sample code for getting the value of cookies using the built-in document.cookie:

function getCookie(name) {
  const cookies = document.cookie.split("; ")

  return cookies
    .map((cookie) => cookie.split("="))
    .find(([key, _]) => key === name)
    ?.[1] ?? null
}

Logging Out

While authentication for Frontends is built-in and enforced automatically, explicit logout is not. The following function logs a user out of a Frontend.

async function logout() {
  await fetch(
    "/integrations/services/auth/logout",
    {
      method: "POST",
      headers: {
        "X-CSRFToken": getCookie("csrftoken"),
      }
    }
  )
}

Executing an Integration

async function executeIntegration(pathName, payload) {
  const response = await fetch(
    `/integrations/execute/${pathName}`,
    {
      body: JSON.stringify(payload),
      method: "POST",
      headers: {
        "Content-Type": "application/json",
        "X-CSRFToken": getCookie("csrftoken"),
      }
    }
  )

  if (response.ok) {
    return await response.json()
  } else {
    return null
  }
}

If you choose to use an external library with your Frontend, provides a simple way to get the value of cookies:

To execute an integration, make a POST request to /integrations/execute/{pathName} with its JSON payload and the X-CSRFToken header set. You may also use the integration's if set up.

The integration will run as the logged-in user. The logged-in must have execute on the integration.

Vite
Create-React-App
Webpack
js-cookie
webservice endpoints
permissions