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.
Related
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>
)
}
I am building a website with react and when I share the link on social media, it appears like the following:
How to have the website preload the content when sharing the links? Should I use something other than ReactDOMServer.renderToStaticMarkup, to render the data?
Server.js
app.get('/*',(req, res) => {
getStore(function(err, AppStore){
if(err){
return res.status(500).end('error')
}
match({ routes, location: req.url }, (error, redirectLocation, renderProps) => {
// Get React markup
const reactMarkup = ReactDOMServer.renderToStaticMarkup(<RoutingContext {...renderProps} />)
res.locals.reactMarkup = reactMarkup
if (error) {
res.status(500).send(error.message)
} else if (redirectLocation) {
res.redirect(302, redirectLocation.pathname + redirectLocation.search)
} else if (renderProps) {
// Success!
res.status(200).render('index.html')
} else {
res.status(404).render('index.html')
}
})
})
})
app.listen(app.get('port'))
index.html
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="">
<meta name="author" content="">
<!-- Bootstrap Core CSS -->
<link href="/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom CSS -->
<link href="/css/clean-blog.min.css" rel="stylesheet">
<link href="/css/cosmic-custom.css" rel="stylesheet">
<!-- Custom Fonts -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"
rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic"
rel="stylesheet" type="text/css">
<link href="//fonts.googleapis.com/css?
family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800"
rel="stylesheet" type="text/css">
<title>{{ site.title }}{{# page }} | {{ page.title }}{{/ page }}</title>
</head>
<body class="hidden">
<div id="app">{{{ reactMarkup }}}</div>
<script src="/js/jquery.min.js"></script>
<script src="/js/bootstrap.min.js"></script>
<script src="/js/clean-blog.min.js"></script>
<script src="/dist/bundle.js"></script>
</body>
</html>
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.
I am initializing gapi.auth2 in my index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="google-signin-client_id" content= "817677528939-dss5sreclldv1inb26tb3tueac98d24r.apps.googleusercontent.com">
<meta name="google-signin-scope" content="profile email">
<script src="https://apis.google.com/js/client:platform.js?onload=start" async defer></script>
<script>
function start() {
console.log('script running')
gapi.load('auth2', function() {
auth2 = gapi.auth2.init({
client_id: '817677528939-dss5sreclldv1inb26tb3tueac98d24r.apps.googleusercontent.com',
scope: 'profile email'
});
});
}
</script>
<!-- <meta name="theme-color" content="#000000"> -->
<!-- <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> -->
<!-- <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico"> -->
<title>React App</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
Then in my react app:
At the top of the page: /* global gapi */
handleSignIn() {
console.log(gapi.auth2)
gapi.auth2.grantOfflineAccess()
}
the console.log is printing:
{init: ƒ, authorize: ƒ, _gt: ƒ, enableDebugLogs: ƒ, getAuthInstance: ƒ, …}
so it looks like gapi.auth2 is a function, but I'm getting the error:
gapi.auth2.grantOfflineAccess is not a function
What am I doing wrong?
It looks like you are not calling grantOfflineAccess on the GoogleAuth object. To get the GoogleAuth object, you need to call getAuthInstance() like so:
var ga = gapi.auth2.getAuthInstance();
ga.grantOfflineAccess();
Make sure you only call getAuthInstance() after first calling gapi.auth2.init() as specified here.
Missed a step:
looking at the function that was printed I needed to call another function first:
gapi.auth2.getAuthInstance().grantOfflineAccess()
I am learning Parse together with React. So far I have in my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<script src="http://fb.me/react-0.13.3.min.js"></script>
<script src="https://www.parsecdn.com/js/parse-latest.js"></script>
<script src="https://www.parsecdn.com/js/parse-react.js"></script>
<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<title>Learning Parse</title>
</head>
<body>
<h1>From CloudCode hosting</h1>
Login with Facebook
Logout
<script src="/js/app.js"></script>
</body>
</html>
And in my JS
document.getElementById('btn-fb-login').addEventListener('click', function() {
Parse.FacebookUtils.logIn('public_profile,email', {
success: function(user) {
console.log('logged in as', user);
},
error: function(user, err) {
console.error(err);
}
});
});
Problem is when I login, it works but I see an error in console:
Uncaught TypeError: Parse.User._saveCurrentUser is not a function
Why is that? I have yet to do anything React specific, just simple DOM events so far