API is too difficult for WIX beginneršŸ„ŗ : [error] Incorrect API key provided

Ask the community
,
1

I wanted to put a chat GPT chat window on the Wicks homepage, so I studied hard while watching the YouTuberā€™s video(The Wix Wiz - How To Create an AI Chatbot with OpenAI and WIX). However, there is an error when trying to run it. I even used a new API code just in case. Whatā€™s wrong with my code? :face_holding_back_tears:

IMG_3033
IMG_30331799Ɨ1241 190 KB

(sorryā€¦ i canā€™t put over 2 pictures because iā€™m new userā€¦ :frowning: So)

2

Hi,

Your code looks mostly correct! I noticed that you used the Wix-Secrets-Backend API which is a great way to make sure your authorization key stays secure.

The issue I see is that the authorization header uses single quotes (') instead of backquotes (`) which is required for template literals in JavaScript. Additionally, you have to make sure your API Key is stored in a variable named ā€œapiKeyā€ instead of ā€œapiKeiā€ based on your authorization header.

The following modifications should fix your code:

Line 6

const apiKey = await getSecret("OPENAI-API-KEY");

Line 17

'Authorization': `Bearer ${apiKey}`
3

  1. Instead of passing your API, key from backend (where it WAS secure) to frontend, do both processes on ā€”> BACKEND ā†’ a) FETCH-REQUEST including b) SECRETS-REQUEST and send only the RESULTS you got from CHAT-GPT back to FRONT-END.

  2. Your structure should look likeā€¦
    a) backend-code-1 jsw-module ā€”> openAi.jsw
    b) backend-code-2 jsw-module ā†’ secrets.jsw

  3. Process-flowā€¦

Step-1:
Calling the fetch-request on FRONT-END to start the fetch-process on BACKEND.

Step-2: Inside of your fetch-request, you first call (asynchronous) ā†’ wix-secrets from secrets.jsw (which is also on backend) to get your API-Key first.

Step-3: You got your API-KEy from SECRETS.JSW ā†’ your fetch-process continues and gets all data from OPEN-AI.

Step-4: You return the found OPEN-AI-RESULTS back to ā†’ FRONT-END.

ABSOLUTELY SAFE PROCESS, WITHOUT ANY RISKS TO EXPLOITE YOUR SECRETS (API-KEYS) on ā€”> FRONTEND !!! ā€”> SAFE-PROCESS.

If you need a complete Open-Ai CHAT-GPT-Manager ā†’ velo-ninja@outlook.com

Fully integrated into your Wix-Website with lot of features and functions.