Mapkit JS Tokens - Help!

TonyRS: This video will walk you through creating a token with your key. If you still have trouble accessing MapKit JS with your token, please share some details, including browser version and errors seen in the web inspector. Thanks!

KMT: This is an appropriate forum for questions about MapKit JS Beta as well as other Maps and Location frameworks.

>stuggling to generate 'tokens'

Should be discussion about tokens here: https://developer.apple.com/documentation/mapkitjs/setting_up_mapkit_js

Eric G: Understood, thanks.

Hi Eric,

Thanks for that...

I had no problem accessing the map with my token. My problem was generating my token.

I searched around and came across this article https://blog.beezwax.net/2018/10/05/apple-maps-in-filemaker-with-mapkit-js/

which I found emensly helpful. Consequently, I have installed node and npm on my iMac and installed the mapkit-token package.

I have no access to any public server that would enable to host script to generate 'short term' tokens so have resorted to using a 'long term' token with the mapkit js api which I managed to generate using code/steps contained in above article.

I'm now able to show a mapkit map on a public website

Many thanks

TonyRS

Using a long term token for a static website makes sense. Longer term tokens are more vulnerable to misuse because they do not expire as quickly. To reduce risk of misuse, you can add an "origin" claim to your token's payload object.

const payload = {
  iss: teamId /* Issuer: Your Apple Developer Team ID */,
  iat: Date.now() / 1000 /* Issued at: Current time in seconds */,
  exp: Date.now() / 1000 + 31536000 /* One year after iat */
  origin: yourOriginString /* https://yourdomain.com */
};

The value of this must match the Origin header of the browser visiting the page. For example: if we had a map on this page the value would be "https://forums.developer.apple.com".

Using an origin will help ensure that your token can't be used for other websites.