I have some sdk scripts that should be imported like this:
<script src="../libs/async.min.js"></script>
<script src="../libs/es6-shim.js"></script>
<script src="../libs/websdk.client.bundle.min.js"></script>
<script src="../libs/fingerprint.sdk.min.js"></script>
These are part of an SDK that allows me to interact with a biometric. I need to create a module in my project that from these scripts to then reuse it. It is a project of React JS.
Try importing them into the index.html that contains the class = 'app / root' and then create a folder controlers with a FingerSDK class and try to access the classes and methods contained in the SDK but it does not compile, it does not recognize anything, as if the scripts were not imported.
For example i try in index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Dashboard</title>
</head>
<body>
<div id="root">
</div>
<script src="../production/libs/es6-shim.js"></script>
<script src="../production/libs/websdk.client.bundle.min.js"></script>
<script src="../production/libs/fingerprint.sdk.min.js"></script>
<script src="../production/app.js"></script>
</body>
</html>
And my module:
class FingerprintSDKTest {
constructor( errM ) {
this.deviceId = '' //'A7429977-B0D4-9640-9AF7-CC792A5989BD'
this.fingerData = {}
this.sdk = new Fingerprint.WebApi
this.errorManagment = errM
this.getDeviceList()
}
getDeviceList() {
this.sdk.enumerateDevices()
.then( response => {
this.deviceId = response[0]
} )
.catch( err => {
notification['warning']( {
message: 'No se ha conectado el lector de huellas',
description: 'No se ha detectado ningún lector de huellas, algunas funcionalidades no estaran disponibles sin el lector, favor de connectar un lector de huellas.'
} )
} )
}
}
I need to be able to import those scripts so that I can instantiate FingerPrint.WebApi and I really do not understand how I can do it. After I need import this module into a React JS component.
I appreciate you can guide me and I appreciate the contributions, apologies for my English.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>TestApp</title>`enter code here
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</div>
<script src="scripts/es6-shim.js"></script>
<script src="scripts/websdk.client.bundle.min.js"></script>
<script src="scripts/fingerprint.sdk.min.js"></script>
</body>
</html>
BioAuth.js
import React, { Component } from 'react';
class BioAuth extends Component {
componentDidMount() {
this.onScriptLoad();
}
onScriptLoad = () => {
this.sdk = new window.Fingerprint.WebApi();
this.sdk.onDeviceConnected = function (e) {
console.log('no fingerprint device');
};
this.sdk.onDeviceDisconnected = function (e) {
console.log('no fingerprint device');
};
this.sdk.onCommunicationFailed = function (e) {
console.log('Communication Error')
};
}
render() {
return (
<div>
<h1>Validate BioAuth Connectivity</h1>
</div>
);
}
}
export default BioAuth;
With above config i use imported functions in my ReactJs Components.
Related
This is my html
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="scaffolded-by" content="https://github.com/dart-lang/sdk">
<title>quickstart</title>
<link rel="stylesheet" href="styles.css">
<script defer src="allEvents.js"></script>
<script defer src="main.dart.js"></script>
</head>
<body>
<button onclick="myFunction()">Click me</button>
</body>
</html>
allEvents.js file:
function myFunction() {
console.log("from event");
var event = new CustomEvent("test", { "detail": "Example of an event" });
window.document.dispatchEvent(event);
}
Dart main method:
import 'dart:html' as html;
void main() {
print("from main");
html.window.onMessage.listen((html.MessageEvent event) {
print("hello dart");
});
}
I am not able to get test event in my dart hence no console log, what is wrong with my code
I figured out the solution:
import 'dart:html' as html;
void main() {
print("from main");
html.CustomEvent someEvent;
html.window.document.addEventListener(
'test',
(event) =>
{someEvent = event as html.CustomEvent, print(someEvent.detail)});
}
I bought html template. When I try to use it on react project, some of function not working. One of it owl carousel. owl.js template file dynamically adding divs and styling them. This section working on html page but not on react. I do not get any error from console.
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>aaa</title>
<link href="assets/css/bootstrap.css" rel="stylesheet"/>
<link href="assets/css/style.css" rel="stylesheet"/>
<link href="assets/css/responsive.css" rel="stylesheet"/>
<link rel="shortcut icon" href="assets/images/favicon.png" type="image/x-icon"/>
<link rel="icon" href="assets/images/favicon.png" type="image/x-icon"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,
user-scalable=0">
</head>
<body>
<div id="root"></div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery-ui.js"></script>
<script src="assets/js/jquery.fancybox.js"></script>
<script src="assets/js/owl.js"></script>
<script src="assets/js/wow.js"></script>
<script src="assets/js/isotope.js"></script>
<script src="assets/js/mixitup.js"></script>
<script src="assets/js/appear.js"></script>
<script src="assets/js/validate.js"></script>
<script src="assets/js/script.js"></script>
<script src="assets/js/map-script.js"></script>
</body>
</html>
With React your public files, such as JavaScript files, should be in a folder called 'public' in your React app, then in the index.html this should be denoted by '%PUBLIC_URL%'.
So in other words, move your assets folder to a folder called public and add '%PUBLIC_URL%/' before the paths for your files.
After 4 hour i found solition for my problem. It is define script links on component instead of index.html. Hope this post helps more people
import '../assets/css/bootstrap.css';
import '../assets/css/style.css';
import '../assets/css/responsive.css';
import React,{ useEffect } from 'react';
import { Helmet } from 'react-helmet';
const useScript = (src) => {
useEffect(() => {
const tag = document.createElement('script');
tag.async = true;
tag.src = src;
document.body.appendChild(tag);
return () => {
document.body.removeChild(tag);
}
}, [src])
}
export function Home(){
useScript('./assets/js/jquery.js');
useScript('./assets/js/bootstrap.min.js');
useScript('./assets/js/popper.min.js');
useScript('./assets/js/jquery-ui.js');
useScript('./assets/js/jquery.fancybox.js');
return(
<div>
<Helmet>
<title>{model.Title}</title>
<meta name="description" content={model.Desc}/>
<meta name="keywords" content={model.Keys}/>
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<meta name="viewport" content="width=device-width, initial-
scale=1.0, maximum-
scale=1.0, user-scalable=0"></meta>
</Helmet>
.......
</div>
)
}
React component with componentDidMount method, after window.gapi.load call, in network panel browser and console i have 403 forbidden error with response below. I saw docs and i didn't found 403 forbidden with this error message code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<meta
name="description"
content="Web site created using create-react-app"
/>
<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<script src="https://apis.google.com/js/api.js"></script>
<script src="https://apis.google.com/js/platform.js"></script>
<title>React App</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
componentDidMount() {
const onInit = (auth2 => {
this.setState(() => ({
authorized: window.gapi.auth2.getAuthInstance().isSignedIn.get()
}))
}).bind(this)
const onError = err => {
console.log('error', err)
}
window.gapi.load('auth2', function () {
window.gapi.auth2
.init({
client_id:
process.env.REACT_APP_GOOGLE_CLIENT_ID,
})
.then(onInit, onError)
})
}
403 Forbidden
https://accounts.google.com/o/oauth2/iframerpc?action=issueToken&response_type=token id_token&login_hint=AJDLj6JUa8yxXrhHdWRHIV0S13cAQkWEAPWplFnV5UerxbKZb6kHhcraZKDnrovJi4PbVrzX39mlnv4ILIcpkZdqDkhhhY9wilNnFidqJ9v6El4y35zN64V74PuJxV-d6qoxXr-9TER1&client_id=20176736559-mu75ue3gimbftv2kvildmso7ravgpn5a.apps.googleusercontent.com&origin=http://localhost:3000&scope=openid profile email&ss_domain=http://localhost:3000
Response:
{
"error" : "invalid_request"
}
Any reasons? I did all steps at developer console.
I am getting a blank page when using import. I have a simple program that is just to test the import statement. I don't know why I am not getting any output. Here is my code in app js:
import TestComponent from "./components/Testcomponentfile"
pageBuild();
function pageBuild(){
TestComponent();
}
Here is the code for the component:
export default function TestComponent(){
console.log("test component js");
return `
<h1>HTML test</h1>
`
}
And Here is the index.HTML:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript"></script>
<title>Document</title>
</head>
<body>
<div id="demo"></div>
<div>
<h1> test Html</h1>
</div>
<script src="./JS/app.js"></script>
</body>
</html>
What am I missing??
Use type="module" in your html while using the script
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<script type="text/javascript"></script>
<title>Document</title>
</head>
<body>
<div id="demo"></div>
<div>
<h1> test Html</h1>
</div>
<script type="module" src="./JS/app.js"></script>
</body>
</html>
calling pageBuild(); after defining the function did not solve the problem>
I am using google chrome browser. It should be working.
import TestComponent from "./components/Testcomponentfile"
function pageBuild(){
TestComponent();
}
pageBuild();
Here is the code for the component:
export default function TestComponent(){
console.log("test component js");
return `
<h1>HTML test</h1>
`
}
an update to the first answer
tc.js
export default function TestComponent(){
console.log("test component js");
return `
<h1>HTML test</h1>
`
}
ap.js
import TestComponent from "./tc.js"
function pageBuild(){
console.log(TestComponent());
}
pageBuild();
tested and it works
I'm building a custom element. this is my code:
<!DOCTYPE html>
<html>
<template>
<link rel="stylesheet" type="text/css" href="pols-notifier.css">
<div class="body">
<button class="close"></button>
<div class="content"></div>
</div>
</template>
<script>
class PolsNotifier extends HTMLElement {
constructor() {
super();
this.currentDocument = document.currentScript.ownerDocument;
}
connectedCallback() {
const instance = this.currentDocument.querySelector('template').content.cloneNode(true);
this.attachShadow({mode: 'open'}).appendChild(instance);
}
}
window.customElements.define('pols-notifier', PolsNotifier);
</script>
</html>
And the page is:
<!Doctype HTML>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="import" href="http://localhost:8080/assets/pols-notifier/pols-notifier.html">
<body>
<pols-notifier></pols-notifier>
</body>
</html>
The console show an error when try load the stylesheet. The file of custom element and the stylesheet are in /assets/pols-notifier directory in my project but the navigator is looking /pols-notifier.css.
Why is looking there?
Greeting. Thanks.