Accessing your application's 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 always need 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. It is turned on because 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 as mentioned in the documentation.
3 ways of creating a data_api_cookie to use in your HTTP headers
Log out of Betty
To generate a data_api_cookie easily, start by logging out of your Betty Blocks account. You can find the log-out button at the bottom left of your My Betty Blocks page or within the IDE. Once you are logged out, log back in and refresh all pages related to Betty Blocks, 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 Data container 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 pressing “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 correctly, your console will return: Promise {<pending>}
After following these steps, we now have access to your private information!