# Getting Started

## Step 1. Register and Obtain a Fotor API Key
To use the Fotor AI Editor SDK, you first need to obtain a Fotor API Key. Please refer to the [How to Obtain an API Key](https://docs.fotor.com/getting-started/auth.md) guide for detailed instructions.

## Step 2. Generate a Temporary Token via Server
To ensure security, it is recommended to handle the API Key on the server side and generate temporary tokens for frontend use. Follow these steps:

1. **Implement a Server-Side Endpoint**:
   - Create an endpoint on your server that authenticates users based on your system and exchanges the obtained API Key for a temporary token from Fotor (refer to [Get Sdk Temporary Token](https://docs.fotor.com/sdk/temp-token.md)).
   
2. **Ensure Sufficient Available Tokens**:
   - Make sure your account has enough tokens available for usage.

3. **Security Recommendation**:
   - It is strongly advised not to hardcode the API Key in frontend code to prevent exposure.

## Step 3. Integrate Fotor AI Editor SDK
Embed Fotor AI Editor’s editing functionalities into your project.

```html
<input type="file" id="imgList" multiple accept="image/*" />
<button id="openBtn">Open Fotor AI Editor</button>

<script src="https://sdk.fotor.com/apps/api/sdk.js"></script>
<script>
  (function () {
    const imgInput = document.getElementById('imgList');
    const openBtn = document.getElementById('openBtn');
    let imgList = [];

    // TODO: Replace with your own logic to obtain a temporary token
    const getToken = async () => {
      const response = await fetch('Your server endpoint to obtain a temporary token');
      const json = await response.json();
      return json.data.token;
    };

    imgInput.addEventListener('change', (e) => {
      if (e.target) {
        imgList = e.target.files;
      }
    });

    openBtn.addEventListener('click', async () => {
      if (imgList.length === 0) {
        alert('Please select images');
        return;
      }
      const token = await getToken();
      FotorContent.open({
        type: 'editor',
        fileList: imgList,
        token: token,
        onTokenRefresh: () => {
          // TODO: Replace with your own logic to obtain a new token
          return getToken();
        },
        onMessage: (message) => {
          // TODO: Handle received messages, including image processing results
          const { action, payload } = message;
          console.log('Message received', action, payload);
        }
      });
    });
  })();
</script>
```

**Note:**
Please replace the `getToken` function in the above code with your own logic for obtaining a temporary token to ensure security and proper functionality.

You have now successfully integrated the Fotor AI Editor SDK!