Accessing your applications frontend data with PDM turned on
Private data mode in Sandboxes
Private data mode (PDM) is a feature within the platform that allows us to protect our data on sandboxes from accidentally being seen by end-users.
Sometimes you would like to access information from the data-API that is considered restricted for end-users in a sandbox. You will bump into the error kind: “PDM”
Because you are working in a sandbox, you are always in need of a data_api_cookie. This information serves for logging in as a Betty user. Private Data Mode is turned on by default on any sandbox. The reason it is turned on is that we want to provide your application with a form of protection. With PDM turned off, external sources could access possible sensitive information. We still recommend that you use dummy-data in your sandbox applications.
How do I get a data_api_cookie?
In the previous topic about Getting Started with the data API, you have learned where you can set your HTTP Headers and what kind of format is needed.
We need to store this bearer token/data_api cookie like mentioned in the documentation.
There are three ways of creating a data_api_cookie to use in your HTTP Headers.
Log out of Betty
The first and easiest way to generate a data_api_cookie is to log out of your Betty blocks account.
You can find the log-out button at the bottom left of your My Betty blocks page, or in the IDE.
After being logged out, you will have to log in again and refresh all the pages that are Betty blocks related. Including the GraphQL playground.
Runtime GraphQL call
The second way is to have a page builder page that sends out a request to the Data-API. This is the preferred way and is suggested to follow by our Product department.
To do this, you would have to use a Datacontainer component on your canvas that is asking for information from one of your models.
-
Compile your page and inspect your network requests.
-
Refresh your runtime page and you will see a GraphQL request.
-
In the ‘Request Headers’ you will find the term “Cookie”.
The value format of the data_api_cookie will look something like this:
We can copy the value of this and use it in our header. Make sure that the value you insert into the Header is JSON. If your value is not correct JSON, you can see that the line(s) are marked red.
Follow the Data-API URL
The last method is to follow the redirect URL the data-API returns.
Important note: The URL does not have a redirect_uri parameter yet. This needs to be added by the user. Copy the URL the data-API provides and add a return parameter in the URL like so:
This will redirect you to the last URL provided, where you will have to log in.
If all else fails
If none of the above steps seem to work, there is a workaround to manually add your data_api_cookie to your cookies.
For this, we need to use the command cookieStore.set() function, and we need to use the Console.
The cookieStore.set function is a function that sets a cookie in your browser. You can find more information on the Develop mozilla cookieStore page.
We are going to copy the steps from our second step, but instead of setting the value of your “Cookie” into your HTTP Headers, we are going to insert this as a cookie directly into your browser.
You can do this, by using the following command in your Console by inspecting your page (F12, or Right click --> inspect) and press “Esc”:
Note: Make sure your values are in a JSON format as well.
cookieStore.set('data_api_cookie','{"4ab3574415b741ddbde97c90a3aff547":"eyJhbGciOiJIUzUxMiIsInR5cCI6IkpXVCJ9.eyJhcHBfdXVpZCI6IjRhYjM1NzQ0MTViNzQxZGRiZGU5N2M5MGEzYWZmNTQ3IiwiYXVkIjoiSm9rZW4iLCJidWlsZGVyIjp0cnVlLCJleHAiOjE2OTIyNzg3NjUsImlhdCI6MTY5MjI3NTE2NSwiaXNzIjoiSm9rZW4iLCJqdGkiOiIydHUybWl2Z2VqdWwwbXZxcHMwMDBuYzUiLCJuYmYiOjE2OTIyNzUxNjV9.abc123abc123"}')
If you did this correct, your console will return: Promise {<pending>}
After following these steps, we now have access to your private information!