I am trying to get the browser fingerprint from react application using clientJS. When I import clientJS module and try to access get fingerprint function, it's throwing error saying Get Finger Print is not a function. But If i create a clientJS instance from window.ClientJS(). I am able to generate the fingerprint. Why am i not able get the fingerprint function from instance of ClientJS?
Not working
import ClientJS from "clientjs";
const client = new ClientJS()
const fingerPrint = client.getFingerprint()
console.log(client)
Working
import ClientJS from "clientjs";
const client = new ClientJS()
const windowClient = new window.ClientJS();
const fingerPrint = windowClient.getFingerprint()
console.log(windowClient);
I haven't done much with client Js but I have a tiny package I built that you can use to get a browser fingerprint with ease.
You can use it in any of your frontend application.
It is available here https://github.com/successtar/browser-signature
This worked for me in a react application
import ClientJS from 'clientjs'
import { useState, useEffect } from 'react'
let clientJs: any
const MyComponent = () => {
const [fingerprint, setFingerprint] = useState('')
useEffect(() => {
clientJs = new ClientJS()
}, []) // initiate on the first load
setFingerprint(clientJs.getFingerprint)
}
Code below is working for me in React.
import ClientJS from 'clientjs';
var client = new ClientJS();
client.getBrowser()
Related
I want to make a recipes website and got the API key from spoonacular. when I run the website it says I have unauthorized access. I tried canceling and restarting the npm, flushing my DNS, clearing my cache, restarting my computer, and generating a new key, i even deleted the application and rewrote the code but nothing seems to work.
I'm using vs code.
here's the code:
import React from 'react'
import {useEffect} from "react";
function Pop() {
useEffect(() => {
getPop();
},[]);
const getPop = async() =>{
const api = await fetch(`https://api.spoonacular.com/recipes/random?apiKey=${process.env.REACT_APP_KEY}&number=9`);
const data = await api.json();
console.log(data);
}
return (
<div>Pop</div>
)
}
I'm learning react and I'm trying to implement an npm package called face-recognition in my react project.
But it looks like that their documentation is for nodejs. I've looked into the source code of the package which seems that it doesn't export any module so I just imported it. But still, my console is giving me the error ModuleNotFoundError
Inshort: Can I use this face-recognition library in my react.js?
Here is my live code in codesandbox
Below is the raw code of the same file.
import React from "react";
import "face-recognition";
import image1 from "./assets/fFace.jpg";
import image2 from "./assets/mFace.jpg";
const Home = () => {
const imageOne = image1;
const win = new fr.ImageWindow();
// display image
win.setImage(imageOne);
const detector = fr.FaceDetector(imageOne);
// detect all faces
const faceRectangles = detector.locateFaces(imageOne);
return (
<>
<h1>Face Recognition</h1>
{faceRectangles}
</>
);
};
export default Home;
From the npm page
This package is pretty much obsolete. I recommend you to switch to face-api.js, which covers the same functionality as face-recognition.js in a nodejs as well as browser environment.
So firstly i create custom axios instance with baseurl and export it like this:
import axios from 'axios';
const instance = axios.create({
baseURL: process.env.BACKEND_URL,
});
instance.defaults.headers.common['Authorization'] = 'AUTH TOKEN';
instance.defaults.headers.post['Content-Type'] = 'application/json';
export default instance;
The problem is in my saga or in any component in general (ONLY client side) when importing this custom axios instance. I use next-redux-wrapper, and when i prefetch data (using getStaticProps) for my component everything works fine and the axios.defaults.baseURL property works just fine.
However the problem is on client-side, whenever i import the same axios instance in any component or in saga but i call it from lets say componentDidMount, the same axios.default.baseURL is undefined, so if i want to make get request i have to type in the full backend + queries URL. What could the problem be? EXAMPLE:
export function* fetchTPsSaga() {
try {
console.log(axios.defaults.baseURL);
const url = `/training-programs`;
const res = yield axios.get(url);
const tPs = res.data.data;
yield put(fetchTrainingProgramsSuccess(tPs));
} catch (err) {
yield put(fetchTrainingProgramsFail(err));
}
}
// The first time it renders (on server side), it's the valid baseURL property, however if i call the same saga from client-side (when component is rendered) it's UNDEFINED, so i have to type the full url
process.env only work on server-side. You can use publicRuntimeConfig to access environment variables both on client and server-side.
next.config.js
module.exports = {
publicRuntimeConfig: {
// Will be available on both server and client
backendUrl: process.env.BACKEND_URL,
},
}
axios instance file
import axios from 'axios';
import getConfig from 'next/config';
const { publicRuntimeConfig } = getConfig();
const instance = axios.create({
baseURL: publicRuntimeConfig.backendUrl,
});
By the way, if you are using Next.js versions 9.4 and up, the Environment Variables provide another way.
Loading Environment Variables Rules
In order to expose a variable to the browser you have to prefix the variable with
NEXT_PUBLIC_
. For example:
NEXT_PUBLIC_BACKEND_URL='http://localhost:3000'
Then you can access this env variable in Axios as its client-side rendering
import axios from 'axios';
const instance = axios.create({
baseURL: process.env.NEXT_PUBLIC_BACKEND_URL,
});
*Note: You have to use process.env.NEXT_PUBLIC_BACKEND_URL instead of process.env.BACKEND_URL
I have a backend app that constantly serves events to my React app via Web Sockets. When a specific event is received a new browser tab should be opened.
The application will be run by a user in multiple tabs, so I need to open a new tab only once and prevent it from being opened by all running instances.
I've tried using Redux persistent storage, but it doesn't seem to correspond my needs. The best solution that I've found is Shared Workers.
I've tried using Shared Worker in my React app, but I can't set up it properly. It's either being imported incorrectly or Webpack is unable to load it
Uncaught SyntaxError: Unexpected token <
When I googled I haven't found any examples of using Shared Worker in React app (with or without CRA) and at this point, I'm not even sure it's possible. I did found some Web Workers examples, but they have totally different configs.
Can anyone please share some specifics of running Shared Worker in React? Or any other ideas that can provide me with similar functionality will be also greatly appreciated.
Edit: Adding lastest code of what I've tried. Disregard the counter logic, consider just the setup:
worker.js
import React from 'react';
export const startCounter = () => {
window.self.addEventListener("message", event => {
console.log(event.data, self);
let initial = event.data;
setInterval(() => this.postMessage(initial++), 1000);});
}
App.js
import React, { Component } from 'react';
import {startCounter} from './worker';
class App extends Component {
componentDidMount() {
const worker = new SharedWorker(startCounter);
worker.port.start()
// worker.postMessage(this.state.counter);
// worker.addEventListener('message', event => this.setState({counter: event.data}));
}
render() {
return (
<div className="App">
</div>
);
}
}
export default App;
make a file called WebWorker.js which looks like this:
export default class WebWorker {
constructor(worker) {
const code = worker.toString();
const blob = new Blob(['('+code+')()']);
return new SharedWorker(URL.createObjectURL(blob));
}
}
and import it to your main file and do this:
const workers = new WebWorker(worker);
workers.postMessage(some message);
Clarifying #Birat's answer: The SharedWorker constructor is looking for a URL, but here you're passing it a function:
const worker = new SharedWorker(startCounter);
Give this a try instead:
const worker = new SharedWorker(new URL('./worker', import.meta.url));
Simple question, I'm trying to use electron and I need to get the remote object on the client.
Doing
const {BrowserWindow} = require('electron').remote; // Works
But
import {BrowserWindow} from 'electron/remote' // Does not work
New to ES6 classes just unsure why this is not working. Thanks.
You can only import from modules. electron/remote is not a module, but remote is part of the module electron, so you can write :
import remote from "electron";
And then you can do :
const {BrowserWindow} = remote;
But your first code works fine !
You can read more on import statement here
Hope this helps
I think you're supposed to use it like this:
import {remote} from 'electron'
// do something with remote.BrowserWindow