Secrets Manager

Store API keys in a secure manner using Secrets Manager.

Code Level

Intermediate

Published

 

Example Description

This example demonstrates how to use an API key stored in the Secrets Manager. 

The secret key is used to fetch the current weather in New York City, which is then displayed on screen.

Important note: The secret key used in this example will not be available under your account. In order to make the example work please go to https://darksky.net/dev in order to get your own secret key and place it in the secrets manager.

Example Code

How We Built It

Secrets Manager

We added a secret API key to the Secrets Manager, which is accessed using the Settings section of the site dashboard.

Page Elements

On our site we added the following page elements:

  • Button: To fetch the current weather.

  • Labels: To display the weather on screen.

 

Backend Code

In getWeather.jsw, the getWeatherJson() function first gets a secret API key using the name given to it in the Secrets Manager. That key is then used in the getJson() function to fetch weather data and return it in JSON format.


Page Code

  • In the $w.onReady() function, we set an onClick event handler for the getWeatherButton button, which calls the updateWeather() function when the button is clicked. Also in $w.onReady(), we call the updateWeather() function when the page loads to get and display the weather when the page is rendered.

  • The updateWeather() function calls the backend getWeatherJson() function to retrieve the weather data. When the weather is retrieved, we pass the JSON response to the displayWeather() function.

  • The displayWeather() function pulls the desired information out of the JSON and uses it to set the text property of the text elements that display the weather. We use hide() and show() with a fade effect to indicate that the display has been updated.

APIs We Used

Related Articles

Related Examples

Add to Cart Gallery

Let customers to add products to their cart

INTERMEDIATE

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER

Hide and Show Elements

Hide and show elements in response to user interactions

BEGGINER

 

This website was designed with Corvid by Wix.