14 Aug 2023

Getting a Token with PKCE - Single Page App

Default blog image

Introduction

The purpose of this blog is to share a quick way to test and obtain your three legged tokens using PKCE method in the context of a single page app (you can refer here for more details).

Why PKCE?

As said by Petr Broz in this blog post:

This option is recommended for scenarios where your application is running natively on a desktop or a mobile device, in other words, for scenarios where you cannot protect your app's credentials. This application type uses Proof Key for Code Exchange (PKCE) for increased security.

The blog also covers a basic snippet that you can use to generate a token with this flow. With only a few modifications we can make a simple app hosted in github pages so you can better understand how it works (and generate your own tokens for testing).

How it works?

To do that in a single page app without server side, we need no handle the steps below:

PKCE flow

If we use the localStorage to store the client id and the code verifier, we can manage the 3LO token acquisition from our app.

Pre-requisite

If you wanna give it a try, you just need to add https://autodesk-platform-services.github.io/aps-pkce-webapp as a callback option in your APS app and click to save the changes, just like in the image below:

callback url

And with that you're able to obtain a valid token through this sample app.

Also, as long as you have this app provisioned in your hub, this token can be used to view the contents you have access to.

Retrieving your token

Now you just need to type your client id at https://autodesk-platform-services.github.io/aps-pkce-webapp and start the process to get your token.

thumbnail

Related Article