Use a token in the browser

Hand a browser application's token to the quote form or your own page scripts through a small token endpoint on your server, without ever showing the client secret.

Hand a token to the quote form#

The quote form normally starts with its own key. To have it use your API application instead, for example to offer any of your live products on one page, give it getToken. The browser must never see your client secret, so set it up like this:

  1. Create a browser application. Tick read and write, and list your website under Allowed origins (see Create your API applications).
  2. Add a small token endpoint to your own server, such as /subcontext-token. It asks Subcontext for a token with the application's client id and secret, and returns only { "access_token": "...", "expires_in": 7200 }. token-server.mjs (Node), token-server.php (PHP) and dotnet token-server in Program.cs (C#) are working examples. Each keeps one token for all visitors until it nearly runs out, and tells each page how many seconds are left.
  3. On your page, give the quote form a getToken that calls your endpoint:
html 
   <div id="quote"></div>
   <script src="https://js.subcontext.com/quoteform-latest.js"></script>
   <script>
     Subcontext.Quote.init({
       container: '#quote',
       productSlug: 'YOUR_PRODUCT_SLUG',
       journeySlug: 'YOUR_JOURNEY_SLUG',
       getToken: () =>
         fetch('/subcontext-token').then((response) => {
           if (!response.ok) throw new Error('Could not get a token (' + response.status + ')')
           return response.json() // { access_token, expires_in }
         })
     })
   </script>

The form asks again 30 seconds before the token runs out, and once more if Subcontext answers 401. Put the endpoint on the same website as the page, so the browser needs no extra cross-origin setup.

The whole quote form, with all its options, is in the quote form guide. The example page here is quote-form-with-your-token.html.

Use a token in your own JavaScript#

Your own page scripts can use a browser application's token the same way: get it from your token endpoint and send it in the Authorization header.

js 
const { access_token } = await fetch('/subcontext-token').then((r) => r.json())
const products = await fetch('https://subcontext.com/api/v1/products', {
  headers: { Authorization: 'Bearer ' + access_token }
}).then((r) => r.json())

The page must be on one of the application's allowed origins. The browser adds the Origin header and Subcontext checks it. The example page call-the-api-from-the-browser.html lists your products this way, keeps the token until shortly before it runs out, and tries once more after a 401.

A browser application's token is one anyone can get, so it doesn't reach an application that already exists on its own. Keep the share_token from the answer that started the application, and send it in an X-Share-Token header with every later request about the application or its quotes:

js 
const answers = await fetch('https://subcontext.com/api/v1/applications/' + application.id + '/answers', {
  method: 'PATCH',
  headers: {
    Authorization: 'Bearer ' + access_token,
    'Content-Type': 'application/json',
    'X-Share-Token': application.share_token
  },
  body: JSON.stringify({ answers: { smoker: false } })
}).then((r) => r.json())

Without it, or with another application's, Subcontext answers 404 not_found, as it does for an id that doesn't exist. The quote form sends it for you.

To try either page on your own computer, see Trying the pages.

Stuck, or something missing?

Get in touch and a person on the team will help.

Contact us