onairos
Version:
The Onairos Library is a collection of functions that enable Applications to connect and communicate data with Onairos Identities via User Authorization. Integration for developers is seamless, simple and effective for all applications. LLM SDK capabiliti
266 lines (212 loc) • 6.92 kB
Markdown
- **Popup-based Data Requests**: No more cutoff issues with improved popup window implementation
- **AutoFetch by Default**: Automatic API calls after user approval - no manual handling required
- **Simplified Integration**: Much cleaner and easier to use
- **Enhanced UX**: Better positioning, loading states, and error handling
Create a Developer account to access Onairos services. Register your domain to ensure secure API access.
https://Onairos.uk/dev-board
```bash
npm install onairos
```
Import and use the OnairosButton component:
```jsx
import { OnairosButton } from 'onairos';
function MyApp() {
return (
<OnairosButton
requestData={['email', 'profile', 'social']}
webpageName="My Application"
autoFetch={true} // Default - automatically makes API calls
onComplete={(result) => {
console.log('Data approved:', result.approved);
console.log('API Response:', result.apiResponse); // Available when autoFetch is true
if (result.apiResponse) {
// Use the API response data directly
console.log('User data:', result.apiResponse);
}
}}
/>
);
}
```
- **`requestData`** (Array): Specific data types to request
- Available types: `'email'`, `'profile'`, `'social'`, `'activity'`, `'preferences'`
- **`webpageName`** (String): Your application name displayed to users
- **`autoFetch`** (Boolean, default: `true`): Enable automatic API calls after approval
- **`onComplete`** (Function): Callback when data request completes
- **`proofMode`** (Boolean, default: `false`): Enable proof mode for verification
When `autoFetch` is enabled (default), the `onComplete` callback receives:
```javascript
{
approved: ['email', 'profile'], // Array of approved data types
timestamp: "2024-01-15T10:30:00.000Z",
userEmail: "user@example.com",
appName: "My Application",
apiResponse: { /* Your data here */ }, // API response (on success)
apiError: "Error message", // Error message (on failure)
apiUrl: "https://api2.onairos.uk/inferenceTest"
}
```
```jsx
<OnairosButton
requestData={['email', 'profile']}
webpageName="My Application"
autoFetch={false}
onComplete={(result) => {
if (result.approved) {
// Handle approved data manually
makeCustomApiCall(result.dataTypes);
}
}}
/>
```
```jsx
<OnairosButton
requestData={['profile', 'social']}
webpageName="Social Analytics App"
textColor="black"
textLayout="right"
visualType="full"
buttonType="pill"
onComplete={handleDataResponse}
/>
```
**Before (v1.x - Complex)**:
```jsx
// Old complex setup with manual event listeners
useEffect(() => {
const handleMessage = (event) => {
if (event.data?.source === 'content-script' && event.data?.type === 'API_URL_RESPONSE') {
const { APIurl, accessToken } = event.data;
// Manual API call handling
fetch(APIurl, {
method: 'POST',
headers: { 'Authorization': `Bearer ${accessToken}` },
body: JSON.stringify(InputData),
});
}
};
window.addEventListener('message', handleMessage);
return () => window.removeEventListener('message', handleMessage);
}, []);
<Onairos requestData={complexRequestObject} webpageName={webpageName} />
```
**After (v2.0 - Simple)**:
```jsx
// New simplified approach
<OnairosButton
requestData={['email', 'profile']}
webpageName="My App"
onComplete={(result) => {
// API call already made automatically
console.log('User data:', result.apiResponse);
}}
/>
```
- **`email`**: Email address for account identification
- **`profile`**: Basic profile information and preferences
- **`social`**: Connected social media accounts
- **`activity`**: Usage patterns and interactions
- **`preferences`**: User settings and customization choices
The component includes comprehensive error handling:
```jsx
<OnairosButton
requestData={['email']}
webpageName="My App"
onComplete={(result) => {
if (result.apiError) {
console.error('API Error:', result.apiError);
// Handle error appropriately
} else if (result.apiResponse) {
console.log('Success:', result.apiResponse);
// Process data
}
}}
/>
```
- ✅ Chrome 80+
- ✅ Firefox 75+
- ✅ Safari 13+
- ✅ Edge 80+
**Popup Blocked**: Ensure popups are allowed for your domain in browser settings.
**API Calls Failing**: Verify your domain is registered in the developer console.
**Data Not Loading**: Check browser console for errors and ensure proper integration.
For issues or questions:
- Check the [troubleshooting guide](./POPUP_IMPLEMENTATION_README.md)
- Review browser console for errors
- Contact support with detailed error information
---
*The following sections document the previous complex implementation for reference:*
Previously required complex request objects:
```json
"RequestObject":{
"Small": {
"type":"Personality",
"descriptions":"Insight into your Interests",
"reward":"10% Discount"
},
"Medium":{
"type":"Personality",
"descriptions":"Insight into your Interests",
"reward":"2 USDC"
},
"Large":{
"type":"Personality",
"descriptions":"Insight into your Interests",
"reward":"2 USDC"
}
}
```
Previously required manual event handling:
```jsx
export default async function UseAPIURL(event){
if (event.data && event.data.source === 'content-script' && event.data.type === 'API_URL_RESPONSE') {
const { APIurl, accessToken } = event.data;
await fetch(APIurl, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'Authorization': `Bearer ${accessToken}`
},
body: JSON.stringify(InputData),
}).then(async (data)=>{
// process Onairos Data
})
.catch(error => console.error(error));
}
}
```
*This manual approach is no longer needed with v2.0's autoFetch functionality.*
API still responds with the same format:
```json
{
"output": [
[[0.9998]],
[[0.9999]],
[[0.9922]],
[[0.0013]]
]
}
```
When integrating the onairos package into your application, ensure your Webpack configuration handles dynamic imports correctly and serves the necessary chunk files from `node_modules/onairos/dist`.