> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Use External API Keys Stored in the Secrets Manager to Call the OpenWeatherMap API

## Article: Use External API Keys Stored in the Secrets Manager to Call the OpenWeatherMap API

## Article Link: https://dev.wix.com/docs/develop-websites/articles/code-tutorials/wix-editor-elements/use-external-api-keys-stored-in-the-secrets-manager-to-call-the-open-weather-map-api.md

## Article Content:

# Tutorial: Use External API Keys Stored in the Secrets Manager to Call the OpenWeatherMap API 

In this tutorial, you'll learn how to securely use external API keys stored in the [Secrets Manager](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/secrets-manager/about-the-secrets-manager.md) to call the [OpenWeatherMap API](https://openweathermap.org/api). 
By keeping your API keys safe and confidential with the Secrets Manager, you can make secure API requests without exposing sensitive information in your code. 

We'll use the following steps to call the OpenWeatherMap API with external API keys:
1. Save your API key in the Secrets Manager.
2. Configure your code to retrieve the API key and call OpenWeatherMap.

## Step 1 | Save your API key in the Secrets Manager

1. Access the Secrets Manager. There are 2 ways to navigate to the Secrets Manager:
  - Select **Developer Tools** from the code panel. Under the Security section, select **Secrets Manager**.   
  - Select **Developer Tools** in your site's dashboard, and then select **Secrets Manager**.
2. Add and save the API key for the OpenWeatherMap API. For purposes of this tutorial we have named this key "WeatherApiKey".

## Step 2 | Write code to retrieve the API key and call OpenWeatherMap 

Create a function in a web method to call the weather service and retrieve the data:
1. Import the functions needed to make `https` requests and to get secrets from the Secrets Manager.   
  For example:  
   ```javascript
   import {Permissions, webMethod} from "wix-web-module";
   import {fetch} from 'wix-fetch'; 
   import {getSecret} from 'wix-secrets-backend';
   ```

2. Create a new function and do the following:  
   a. Takes in a `city` whose weather you want to look up.   
   b. Defines the service's address.  
   c. Retrieves the API key from the Secrets Manager.    
  For example:  
   ```javascript
   export const getCurrentTemp = webMethod(Permissions.Anyone, async (city) => {
     const url = 'https://api.openweathermap.org/data/2.5/weather?q=';
     const key = await getSecret(WeatherApiKey); 
     
     // ...
   }
   ```

3. Continue the function by constructing the full URL for the fetch request. The URL is made up of the service's address and an API key.  
  For example:
   ```javascript
   let fullUrl = url + city + '&APPID=' + key + '&units=imperial'; 
   ```
4. Finish the function by receiving a response from the API call. When you receive the response, pull out the temperature data and return it.  
  For example:  
   ```javascript
    return fetch(fullUrl, {method: 'get'})
       .then(response => response.json())
       .then(json => json.main.temp);
   ```

### Example Code
Here is the complete code for this example, without comments:

```javascript
// serviceModule.web.js

import {Permissions, webMethod} from "wix-web-module";
import {fetch} from 'wix-fetch'; 
import {getSecret} from 'wix-secrets-backend';

export const getCurrentTemp = webMethod(Permissions.Anyone, async (city) => {
  const url = 'https://api.openweathermap.org/data/2.5/weather?q=';
  const key = await getSecret(WeatherApiKey);
    
  let fullUrl = url + city + '&APPID=' + key + '&units=imperial'; 
  
  return fetch(fullUrl, {method: 'get'})
    .then(response => response.json())
    .then(json => json.main.temp);
});
```
## See also
- [Wix Fetch API](https://dev.wix.com/docs/velo/api-reference/wix-fetch/introduction.md)
- [Wix Secrets Manager](https://dev.wix.com/docs/develop-websites/articles/workspace-tools/developer-tools/secrets-manager/about-the-secrets-manager.md)