Spinwheel CDN Tutorial

Quickstart Intro
Hooking Up the Connect DIM

A Brief Note on Accessing DIMs

If you haven't already done so, you'll need to get a set of Spinwheel credentials to use this tutorial properly. A set of Spinwheel credentials

tl;dr - You need a single-use DIM token every time you render a DIM. If you don't need to know any more than that, you can go straight to Option #2 at the bottom of this page

🗝 The DIM Token

If this is your first interaction with the Spinwheel platform, first off welcome! We're thrilled you found us and have decided to kick the tires. 👟 🚘

When you got your Spinwheel credentials, you should've received a SecretKey which will act as your passkey to all our products. Whenever you call a Spinwheel API, you'll pass that SecretKey as a bearer token in an auth header like this:

Authorization: Bearer 8ae8d6fa-df8d-4c5d-9f9b-c4e4c10968b0
☝️ Not a real secretKey, for all you clever hackers out there...

To access any of our Drop-In Modules, you'll make an API call to retrieve a DIM Token. DIM Tokens are single-use JWT tokens, which means as soon as you call a DIM you'll need to get a new DIM Token if you want to call another module.

What else?

  • Well, until you decide to "put a ring 💍 on it" and move to production with us, you'll be using our sandbox environment. The base URL for the sandbox is https://sandbox-swsl-api.spinwheel.io.
  • Last but not least, DIMs are specific to one of your individual users, so when you make the call for a token, you need to tell us which user you want it for by specifying extUserId or userId.
ParameterDescription
extUserIdA unique Id that you use to identify a user in your application. The value is a string, so you can use an email, uuid, or whatever else is convenient.
userIdA Spinwheel UserId that is returned to you when a user logs in using the Connect DIM.

Without further ado, here's a sample cURL request for a DIM Token:

curl --location --request POST 'https://sandbox-swsl-api.spinwheel.io/v1/dim/token' \
--header 'Authorization: Bearer 8ae8d6fa-df8d-4c5d-9f9b-c4e4c10968b0' \
--header 'Content-Type: application/json' \
--data-raw '{
  "extUserId": "158a3456-5eda-429c-8759-b20f9493d841"
}'

Not that it's all that cumbersome to plug that into Postman yourself, but because we're all about making your life easy, here's a Postman collection with that single request in it.

🤝 DIM Tokens in Action

Since your SecretKey should remain... you know, secret 🥸, any API calls to Spinwheel should be server-to-server. Just to be clear! The code that you see in the sandbox on the right is a sample for a backend application. If you try to run it in a frontend you'll get a CORS error. For the purposes of this tutorial, that means you have two options.

Option #1 - A.K.A. The one that doesn't require any setup, but gets old really quick

If you really want, you can plug your SecretKey into the above request/Postman collection and hit it every time you want to render a new DIM. Take our word for it, you will get tired of doing this. You can start with this option to play around and it won't cost you anything but time, but don't say we didn't warn you...

Option #2 - A.K.A. The one that requires a tiny bit of setup, but will ultimately make you happier 🏅

You may have noticed that CodeSandbox on the right side of the screen while you were reading this. While that's just an example set in a NextJS application, we have, in fact, put together a batteries-included, ultra-lightweight Express backend for you to use.

There's not much to it, but the included README will tell you all you need to know about how to run it. Clone down a copy here. Just remember, without a set of Spinwheel credentials, none of this will work, so be sure to grab those first.

NOTE: For simplicity's sake, the rest of the tutorial is written as if you're using Option #2 ☝️. If you chose Option #1, ignore the fetches and just copy/paste the token directly each time.

Alrighty! Let's get on to the next step of this tutorial

View the example on CodeSandbox