onairos 0.0.7 → 0.1.0

package/README.md

@@ -3,7 +3,7 @@
 
 ### 1. Create a Developer Account
 
-Create a Developer account and retrieve your Onairos developer ID and access token
+Create a Developer account to access Onairos services. Register your domain to ensure secure API access.
 
 https://Onairos.uk/dev-board
 
@@ -48,13 +48,11 @@ Individual Request Information:
 
 Then instantiate the Onairos object from the Onairos package - passing in your Onairos Developer ID and your Request Object
 ```jsx
-<Onairos requestData={requestData} onairosID={onairosID} access_token={access_token} webpageName={webpageName} proofMode={proofMode} />
+<Onairos requestData={requestData} webpageName={webpageName} proofMode={proofMode} />
 ```
 
 Onairos Object fields:
  - `requestData` - Request Object - Json
- - `onairosID` - App Assigned Onairos ID - String
- - `access_token` - App Assigned Access Token - String
  - `webpageName` - App Display Name - String 
  - `proofMode` - Wish to recieve ZK proof after recieving Data , default FALSE - boolean
 
@@ -69,11 +67,15 @@ event.data.source === 'content-script'
 event.data.type === 'API_URL_RESPONSE'
 ```
 
+You will also be given an ACCESS TOKEN which you must use in any API requests from that specific client.
+This is a short lived token, for usage on your developer registered domain only, and lasts for 1 hour from issue.
+
 For example:
 
 ``` jsx
 export default async function UseAPIURL(event){
     if (event.data && event.data.source === 'content-script' && event.data.type === 'API_URL_RESPONSE') {
+      const { APIurl } = event.data;
       //Fetch Onairos Data from Returned API url
   }
 }
@@ -97,6 +99,8 @@ Send a POST request to the API endpoint with a JSON payload containing a set of
 - `category`: The category to which the content belongs (String) - required
 - `img_url`: The URL of an image associated with the content (String) - optional
 
+You should also send the access token as part of this request, from your **backend**
+ - `access_token` - App Assigned Access Token - String     
 Example JSON body for the POST request:
 
 ```json
@@ -116,14 +120,16 @@ Example JSON body for the POST request:
       "text": "Example text input 3",
       "category": "Example Category 3",
       "img_url": "http://example.com/image3.jpg"
-    }
+    },
+    "AccessToken":"access_token"
   }
     // Additional entries can be added here
   
 
 ```
 
-You can then call the Inference API with the Inference object created above
+You can then call the Inference API with the Inference object created above.
+You must also include the Access Token in the request Header
 
 ```jsx
 export default async function UseAPIURL(event){
@@ -133,6 +139,7 @@ export default async function UseAPIURL(event){
           method: 'POST',
           headers: {
               'Content-Type': 'application/json',
+              'Authorization': `Bearer ${accessToken}` // Include the access token in the Authorization header
           },
           body: JSON.stringify(InputData),
       }).then(async (data)=>{
@@ -186,6 +193,7 @@ function App() {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
+               'Authorization': `Bearer ${accessToken}` // Include the access token in the Authorization header
            },
            body: JSON.stringify(InputData),
        }).then(async (data)=>{
@@ -210,8 +218,8 @@ function App() {
       type:"Personality",
       descriptions:"Insight into your Interests",
       reward:"2 USDC"
-    }
-  }
+    },
+    AccessToken:access_token
   };
   useEffect(() => {
     window.addEventListener('message', UseAPIURL);
@@ -222,7 +230,8 @@ function App() {
 
   const onairosID = 'test';
   return (
-      <Onairos sendData={sendData} onairosID={onairosID} />
+      <Onairos sendData={sendData} webpageName={webpageName} proofMode={proofMode} />
+
   );
 }
 export default InferenceComponent;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "onairos",
-  "version": "0.0.7",
+  "version": "0.1.0",
   "dependencies": {
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",

package/src/onairos.jsx

@@ -1,7 +1,8 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import onairosLogo from "./OnairosBlack.png";
 
-function Onairos( {requestData, onairosID, proofMode=false,webpageName}) {
+function Onairos( {requestData, proofMode=false,webpageName}) {
+  const [token,setToken] = useState();
   const OnairosAnime = async () => {
     try {
       console.log("Clicked Onairos Connect")
@@ -12,16 +13,38 @@ function Onairos( {requestData, onairosID, proofMode=false,webpageName}) {
     }
   };
 
+  const requestToken = async () =>{
+    const domain = window.location.hostname;
+    const response = await fetch('https://api2.onairos.uk/dev/request-token', {
+        method: 'POST',
+        headers: {
+            'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({ domain }),
+    });
+
+    if (!response.ok) {
+        throw new Error('Token request failed: ' + response.statusText);
+    }
+
+    const data = await response.json();
+    setToken(data.token);
+    // this.token = data.token; // Store the token
+}
+
   const ConnectOnairos = async () => {
     // Title here has to match a model in the Users : accountInfo.AccountInfo.models
     // Prepare the data to be sent
     // Send the data to the content script
+    
+    await requestToken();
+
     window.postMessage({
       source: 'webpage',
       type: 'GET_API_URL',
       webpageName: webpageName,
-      onairosID:onairosID,
-      access_token:"access_token",
+      onairosID:'onairosID', // Remove
+      access_token:token,
       account:"ConnectedAccountRef.current", //No Longer needed, REMOVE
       requestData: requestData,
       proofMode:proofMode
@@ -42,3 +65,72 @@ function Onairos( {requestData, onairosID, proofMode=false,webpageName}) {
 }
 
 export default Onairos;
+
+
+// import React from 'react';
+// import onairosLogo from "./OnairosBlack.png";
+
+// class Onairos {
+//   constructor({ requestData, onairosID, proofMode = false, webpageName }) {
+//     const OnairosAnime = async () => {
+//       try {
+//         console.log("Clicked Onairos Connect");
+//         await ConnectOnairos();
+//       } catch (error) {
+//         // Handle any errors here
+//         console.error("Error connecting to Onairos", error);
+//       }
+//     };
+
+//     const requestToken = async () => {
+//       const domain = window.location.hostname;
+//       // const response = await fetch('https://api2.onairos.uk/request-token', {
+//         const response = await fetch('http://localhost:8000/request-token', {
+//           method: 'POST',
+//         headers: {
+//           'Content-Type': 'application/json',
+//         },
+//         body: JSON.stringify({ domain }),
+//       });
+
+//       if (!response.ok) {
+//         throw new Error('Token request failed: ' + response.statusText);
+//       }
+
+//       const data = await response.json();
+//       this.token = data.token; // Store the token
+//     };
+
+//     const ConnectOnairos = async () => {
+//       // Title here has to match a model in the Users : accountInfo.AccountInfo.models
+//       // Prepare the data to be sent
+//       // Send the data to the content script
+//       await requestToken();
+
+//       window.postMessage({
+//         source: 'webpage',
+//         type: 'GET_API_URL',
+//         webpageName: webpageName,
+//         onairosID: onairosID,
+//         access_token: "access_token",
+//         account: "ConnectedAccountRef.current",
+//         requestData: requestData,
+//         proofMode: proofMode
+//       });
+//     };
+
+//     return (
+//       <div>
+//         <button
+//           className="OnairosConnect w-20 h-20 flex flex-col items-center justify-center text-white font-bold py-2 px-4 rounded cursor-pointer"
+//           onClick={OnairosAnime}
+//         >
+//           <img src={onairosLogo} alt="Onairos Logo" className="w-16 h-16 object-contain mb-2" /> {/* Adjust size as needed */}
+//           <span className="whitespace-nowrap">Connect to Onairos</span> {/* Prevent text from wrapping */}
+//         </button>
+//       </div>
+//     );
+//   }
+// }
+
+// export default Onairos;