30:T60b,md`# Zapier Cell Trigger Trigger actions on the Zapier platform from a notebook. Send an arbitrary JSON payload down the tubes to invoke actions such as _"Send Email"_, _"Tweet"_ in a general way.

Import the createTrigger function. ~~~js import {createTrigger} from '@endpointservices/zapier' ~~~ Create a trigger ~~~js defaultTrigger = createTrigger({ name: "default", authorized_public_keys: ["CffdcxB8733cSSoJxRrhEiTmzy5ZU1DmyXwGqifuNmo="], checkPayload: (payload) => payload.value !== undefined, sample: { value: "This message appears in Zapier UI when setting up a new Zap, the sample payload fields populates the autocomplete for output variables" } }) ~~~ Which will return a function that sends data to Zapier. ~~~js defaultTrigger: (payload) => {} ~~~ You can prevent malformed data with the _checkPayload_ field ~~~js checkPayload: (payload) => throw new Error(msg) ~~~ which is run both client side and server side (serverside is tamper proof). #### Privacy Only the secret holder to an authorized public key can receive payload data in a Zap. You can generate a public/secret key pairs in this notebook below. The app that receives data Zapier side is called Endpoint Services and is not public, but you can get access with this [invite link](https://zapier.com/developer/public-invite/123889/486258a91f4b504a0b025cb085077318/). Use a generate secret key to authenticate a connection with a Notebook. `31:Tf4d,function createTrigger({ name = "default", allowOrigin = location.origin, sample = {}, checkPayload = () => {}, authorized_public_keys = [] } = {}) { const trigger_name = "cell_trigger_" + name try { // If we are embedded none of the deploy's can work // Create a function for serving the Zapier event sample const name_spec = "perform_list_cell_trigger_" + name const a_spec = deploy(name_spec, async (req, res) => { // We do an auth check too so the user has to have the keys correct const api_key = req.query.api_key; const public_key = await sha256_b64(api_key) if (!authorized_public_keys.includes(public_key)) { res.status(401).send("Connections public key not found in authorized_public_keys"); } else { res.json([sample]); } }); // Create a *common* notebook level function for listing ALL triggers in this notebook. // Note each function will be redeclaring this implementation needlessly (but harmlessly). // Each function idempotently appends to the cell_triggers map though window.cell_triggers = Object.defineProperty(window.cell_triggers || {}, name, { value: authorized_public_keys, configurable: true, enumerable: true }); // The common implementation returns the array of triggers const list_triggers = deploy("list_cell_triggers", async (req, res, ctx) => { res.header("Access-Control-Allow-Origin", `https://${ctx.namespace}.static.observableusercontent.com`); res.json(Object.keys(window.cell_triggers).map(name => ({ id: name, trigger_name: name }))); }); const a = deploy(trigger_name, async (req, res, ctx) => { // Default CORS for same notebook origin res.header('Access-Control-Allow-Origin', allowOrigin); res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept"); if (req.method == 'OPTIONS') res.send(); if (req.method != 'POST') res.status(500).json({msg: "POST only"}); // validate body if (await checkPayload(JSON.parse(req.body)) === false) { throw new Error("Validate was false"); } const cell_trigger = `${req.query.notebook_id}#${name}` const snapshot = await db.collection( `/services/zapier` + `/cell_trigger_subs64/${encodeURIComponent(cell_trigger)}` + `/hookUrls64`) .get() let rejected = 0; const triggers = snapshot.docs.map( async (doc) => { // Only propogate to subscriber if authorized const hookURL = decodeURIComponent(doc.id); const public_key = doc.data().api_key; // Is the public_key authorized for this trigger at this time? if (!authorized_public_keys.includes(public_key)) { // No! Do not propogate rejected++; return Promise.resolve("Unauthorized") } // Call Zapier's callback const zapier_response = await fetch(hookURL, { method: "POST", body: req.body }) return zapier_response; } ); await Promise.all(triggers); res.json({ 'mgs': 'ok' }); }, { modifiers: ["terminal"] }); console.log(`Deploying: ${a.href}, ${a_spec.href}, ${list_triggers.href}`) } catch (err) { console.log(err) } const trigger = async (payload) => { if (await checkPayload(payload) === false) { throw new Error("Validate was false"); } const triggerURL = `https://endpointservice.web.app/notebooks/${notebookID()}/deployments/${trigger_name}` const response = await fetch(`${triggerURL}?notebook_id=${notebookID()}`, { method: 'POST', body: JSON.stringify(payload) }); if (response.status !== 200) throw new Error(await response.text()) } return trigger }32:T495,md`### Our Zap writes to a Google sheet, you can check it out Our test Zap updates a [Google spreadsheet](https://docs.google.com/spreadsheets/d/1S-Z66kzXB1_2J_3AUZ_bMBLDoW7zL8_GmFFD9qbPfaU) with your value within 20 seconds or so. ## Demo of emailing. Here is another small [example which sends an email](https://observablehq.com/@tdlgkjfhdljovtttqrzu/trigger-sample). ## Privacy and Security Note about privacy: you are unable to subscribe to other notebook's triggers, as you do not have knowledge of the secret key. This means you cannot evesdrop on other notebook's payloads. If you inspect our source code you will see the secret is never persisted to our storage systems. Note about security: an attacker can, however, use a _HTTP client_ to manually trigger a cell trigger with their own data. This is analogous to a public API endpoint being scripted. So you need to either design your application so that this is not a vunerability, or add an additional layer of security. The _checkPayload_ hook is for integrating custom auth logic (e.g. [Firebase Auth]() checks, [encrypted passwords](https://observablehq.com/@tomlarkworthy/aws-serverless-password)). `33:[{"id":"e489c027a94f63bdf02166d09611dc04f13681617393d806fb9b4fc52cc09aa4a7f8114000355e2c5813a388a547c0d2154e197be1fb7739f1285c26cf721b20","href":"https://static.observableusercontent.com/files/e489c027a94f63bdf02166d09611dc04f13681617393d806fb9b4fc52cc09aa4a7f8114000355e2c5813a388a547c0d2154e197be1fb7739f1285c26cf721b20","name":"zapier.png","type":"image/png","lastModified":1609440317923.182,"size":847356}] 2e:{"title":"Zapier Cell Trigger","cells":[{"id":0,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":52,"value":"md `## Cell Triggers\n\nSend a JSON payload to Zapier.\n\n1. Generate an Endpoint Service Key Pair (or reuse an existing one)\n- Use _createTrigger_ in a notebook. Include your _public key_ in the *authorized_public_keys* field.\n- _Publish_ or _link share_ the notebook. The Notebook **must** be on the public internet for Zapier to find.\n- On Zapier.com side add Endpoint Services connection using your *secret_key* ([invite link](https://zapier.com/developer/public-invite/123889/486258a91f4b504a0b025cb085077318/)).\n- Create a zap using a **Observable Notebook Cell Trigger**, and follow the instructions in Zapier.\n- Once setup, calling _createTrigger_ will send the first argument to the Zap. \n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":352,"value":"md`## API Key Pair Generator\n\nPrivate triggers have authorized public keys associated which can only be read with matching secret API keys. Use this form to generate a public/secret key pair. You can use triggers to relay sensitive information as long as you keep your secret key safe (or throw it away after authenticating with Zapier).\n\n**Place the** *public_key* **in the** *authorized_public_keys* **array when calling** *createTrigger* **in a notebook.**\n\n**Use the** *secret_key* ** to authenticate a Zapier connection to Endpoint Service.** You only need to do this once and can then dispose of the key. Our systems never store the secret key.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":359,"value":"{\n async function generate() {\n const keys = await generateKeyPair()\n console.log(keys)\n document.getElementById(\"public_key\").innerHTML = keys.public;\n document.getElementById(\"secret_key\").innerHTML = keys.secret;\n }\n async function copy(evt) {\n document.getElementById(\"copyMsg\").innerHTML = \"Copied to clipboard\";\n clipboard(evt.target.innerHTML);\n async function sleep(secs) {\n await new Promise(resolve => setTimeout(resolve, secs * 1000));\n }\n await sleep(1);\n document.getElementById(\"copyMsg\").innerHTML = \"Click a key to copy.\";\n }\n return html`

Generate a Public/Secret pair.

\n \n \n \n \n \n \n \n \n

Public Key (for notebook)	---
Secret Key (for Zapier)	---

\n \n

`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":143,"value":"md`## Demo of writing to a spreadsheet.\n\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":159,"value":"md`### We have created a trigger`","pinned":false,"hidden":false,"mode":"ojs"},{"id":8,"value":"defaultTrigger = createTrigger({\n name: \"default\",\n authorized_public_keys: [\"RJ5BhyVkkiSAUPUlnhBQioT1a0F238ayYBfpUJb7t6I=\"],\n checkPayload: (payload) => payload.value !== undefined,\n sample: {\n value: \"This message appears in Zapier UI when setting up a new Zap, the sample payload fields populates the autocomplete for output variables\"\n }\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":162,"value":"md`### Write to test [Google spreadsheet](https://docs.google.com/spreadsheets/d/1S-Z66kzXB1_2J_3AUZ_bMBLDoW7zL8_GmFFD9qbPfaU)`","pinned":false,"hidden":false,"mode":"ojs"},{"id":167,"value":"{\n function keyup(evt) {\n if (evt.key === \"Enter\") {\n const value = evt.target.value;\n console.log(\"Triggering with \", value)\n defaultTrigger({value})\n evt.target.value = \"\";\n }\n }\n return html``\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":184,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":43,"value":"md`## Backend Implementation: Instant Trigger Hooks for Zapier\n\nThis section is for our integration with Zapier. Users do not need to understand this, but if you would like to make your own integration or understand how we process data it might be an interesting read.\n\nSee https://zapier.com/help/create/basics/set-up-your-zap-trigger\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":26,"value":"subscribe_cell_trigger = deploy(\"subscribe_cell_trigger\", async (req, res) => {\n // Anyone can call this URL, but it doesn't send data anywhere *unless* the API key matches. \n const api_key = req.query.api_key;\n const public_key = await sha256_b64(api_key)\n const body = JSON.parse(req.body);\n const cell_trigger = body.cell_trigger;\n const hookUrl = body.hookUrl;\n await db.doc(\n `/services/zapier` + \n `/cell_trigger_subs64/${encodeURIComponent(cell_trigger)}` + \n `/hookUrls64/${encodeURIComponent(hookUrl)}`\n ).set({api_key: public_key}, {merge: true});\n res.json({\"msg\": \"subscribe ok\"})\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":41,"value":"unsubscribe_cell_trigger = deploy(\"unsubscribe_cell_trigger\", async (req, res) => {\n // Anyone can call this URL, but unless you know a hookUrl, which is a Zapier-ES secret,\n // it doesn't do anything. \n const body = JSON.parse(req.body);\n const cell_trigger = body.cell_trigger;\n const hookUrl = body.hookUrl;\n await db.doc(\n `/services/zapier` + \n `/cell_trigger_subs64/${encodeURIComponent(cell_trigger)}` + \n `/hookUrls64/${encodeURIComponent(hookUrl)}`\n ).delete()\n res.json({\"msg\": \"unsubscribe ok\"})\n});","pinned":false,"hidden":false,"mode":"ojs"},{"id":381,"value":"md`## Backend Implementation: API Key Generation`","pinned":false,"hidden":false,"mode":"ojs"},{"id":389,"value":"async function sha256_b64(message) {\n // encode as UTF-8\n const msgBuffer = new TextEncoder().encode(message); \n\n // hash the message\n const hashBuffer = await crypto.subtle.digest('SHA-256', msgBuffer);\n\n // convert ArrayBuffer to base64\n return btoa(String.fromCharCode.apply(null, new Uint8Array(hashBuffer)));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":402,"value":"function generateId () {\n // https://stackoverflow.com/questions/1349404/generate-random-string-characters-in-javascript\n function dec2hex (dec) {\n return dec.toString(16).padStart(2, \"0\")\n }\n var arr = new Uint8Array(36)\n window.crypto.getRandomValues(arr)\n return btoa(String.fromCharCode.apply(null, arr));\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":400,"value":"async function generateKeyPair() {\n do {\n var secret = generateId();\n var pub = await sha256_b64(secret)\n } while ( pub.includes(\"/\") || secret.includes(\"/\"))\n // We store public key for UX reasons (testing validity of secret key).\n // We avoid storing the secret key.\n await db.doc(`services/zapier/keypairs/${pub}`).set({}) \n return {\n public: pub,\n secret\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":14,"value":"testAPIKey = deploy(\"testAPIKey\", async (req, res) => {\n const api_key = req.query.api_key;\n const pub = await sha256_b64(api_key)\n const snap = await db.doc(`services/zapier/keypairs/${pub}`).get();\n if (snap.exists) {\n res.json({\n public_key: pub\n }) // ok\n } else {\n res.status(404).end();\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":57,"value":"db = firebase.firestore()","pinned":false,"hidden":false,"mode":"ojs"},{"id":233,"value":"notebookID = () => {\n const ctx = getContext(); \n return `@${ctx.namespace}/${ctx.notebook}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":170,"value":"import {html} from '@observablehq/htl'","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"import {deploy, getContext} from '@tomlarkworthy/serverside-cells'","pinned":false,"hidden":false,"mode":"ojs"},{"id":48,"value":"import {firebase, DocView} from '@tomlarkworthy/firebase'","pinned":false,"hidden":false,"mode":"ojs"},{"id":556,"value":"import {copy as clipboard} from '@mbostock/copy-to-clipboard'","pinned":false,"hidden":false,"mode":"ojs"},{"id":754,"value":"import { footer } from \"@endpointservices/footer-with-backups\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":758,"value":"footer","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}