如何将 React 组件连接到 Quickbooks 按钮
How to connect React component to the Quickbooks Button
我正在尝试连接到 Quickbooks 按钮 (https://developer.intuit.com/docs/0100_quickbooks_online/0100_essentials/000500_authentication_and_authorization/widgets#/Connect_to_QuickBooks_button) into a React component, and I am trying to copy the following method: 。
Quickbooks 按钮使用以下脚本代码:
<script
type="text/javascript"
src="https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js">
</script>
<script src="https://js.appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js" type="text/javascript"></script>
<script type="text/javascript">
intuit.ipp.anywhere.setup({
grantUrl: 'http://www.mycompany.com/HelloWorld/RequestTokenServlet',
datasources: {
quickbooks : true,
payments : true
},
paymentOptions:{
intuitReferred : true
}
});
</script>
<body>
<ipp:connectToIntuit></ipp:connectToIntuit>
</body>
我尝试使用以下 React 代码,但无法正常工作。任何帮助表示赞赏。谢谢。
import React from 'react';
class ConnectToQuickBooksOnlineButton extends React.Component {
constructor(props){
super(props);
this.state = {
};
}
componentWillMount() {
const library = document.createElement("script");
library.src = "https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js";
library.type = "text/javascript"
library.async = true;
document.body.appendChild(library);
const setup = document.createElement("script");
setup.src = "https://js.appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js";
setup.type = "text/javascript";
setup.async = true;
document.body.appendChild(setup);
const connect = document.createElement("script");
connect.type = "text/javascript";
connect.innerHTML = "intuit.ipp.anywhere.setup({grantUrl: '/quickbooksauth',datasources: {quickbooks : true, payments : true}, paymentOptions:{intuitReferred : true}});"
document.body.appendChild(connect);
const body = document.createElement("body");
body.innerHTML = "<ipp:connectToIntuit></ipp:connectToIntuit>";
body.async = true;
document.body.appendChild(body);
}
render(){
return <div />;
}
};
export default ConnectToQuickBooksOnlineButton;
我尝试将脚本内容放入 index.html,并从 Quickbooks 组件调用它。但是按钮仍然没有显示。
import React from 'react';
class ConnectToQuickBooksOnlineButton extends React.Component {
constructor(props){
super(props);
this.state = {
};
}
componentWillMount() {
const connectToIntuit = document.createElement('ipp:connectToIntuit');
document.body.appendChild(connectToIntuit);
}
render(){
return <div ref="ipp:connectToIntuit"/>;
}
};
export default ConnectToQuickBooksOnlineButton;
我还创建了以下 fiddle:https://jsfiddle.net/aewhatley/7eL716mp/
您在哪里呈现 ConnectToQuickBooksOnlineButton 组件?比如 index.jsx 或 app.jsx?您可以将所有脚本包含在 index.html 中,或者在根组件 (index/app.jsx) 中创建它们,并在 ConnectToQuickBooksOnlineButton 中仅创建所需的 html 标记,如下所示:
componentWillMount() {
const connectToIntuit = document.createElement('ipp:connectToIntuit')
document.body.appendChild(connectToIntuit)
}
@alex 看起来你在渲染之前试图访问 Dom,你应该使用 "componentDidMount" 将你的直觉按钮加载到 div 或容器上。
我创建了一个 WebpackBin 来说明实现,如果这就是你想要实现的原因,请告诉我?
这是我创建的简单组件
QuickBooks.js
工作演示 WebpackBin https://www.webpackbin.com/bins/-Kg6yu5JUmy9dD08JI_A
import React from 'react'
class QuickBooks extends React.Component {
constructor(props){
super(props);
window.intuit.ipp.anywhere.setup({
grantUrl: 'http://www.mycompany.com/HelloWorld/RequestTokenServlet',
datasources: {
quickbooks : true,
payments : true
},
paymentOptions:{
intuitReferred : true
}
})
}
componentDidMount() {
let buttonContainer = document.getElementById("intuButton")
const connectToIntuit = document.createElement('ipp:connectToIntuit');
buttonContainer.appendChild(connectToIntuit);
}
render(){
return (
<div id="intuButton"></div>
)
}
}
export default QuickBooks
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
你不需要。
只需使用您的后端生成 link.
// backend (expressJs)
router.post('/authUri', async (req: Request, res: Response, next: NextFunction) => {
const authUri = oauthClientGlobal.authorizeUri({
scope: [OAuthClient.scopes.Accounting],
state: 'intuit-test',
})
res.status(200).json(authUri)
})
然后是前端(React)
调用您的后端路由以获取 Quickbooks URL
然后根据响应将页面重定向到 quickbooks :
window.location.href = authUri // response Quickbooks URL From Backend
我正在尝试连接到 Quickbooks 按钮 (https://developer.intuit.com/docs/0100_quickbooks_online/0100_essentials/000500_authentication_and_authorization/widgets#/Connect_to_QuickBooks_button) into a React component, and I am trying to copy the following method:
Quickbooks 按钮使用以下脚本代码:
<script
type="text/javascript"
src="https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js">
</script>
<script src="https://js.appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js" type="text/javascript"></script>
<script type="text/javascript">
intuit.ipp.anywhere.setup({
grantUrl: 'http://www.mycompany.com/HelloWorld/RequestTokenServlet',
datasources: {
quickbooks : true,
payments : true
},
paymentOptions:{
intuitReferred : true
}
});
</script>
<body>
<ipp:connectToIntuit></ipp:connectToIntuit>
</body>
我尝试使用以下 React 代码,但无法正常工作。任何帮助表示赞赏。谢谢。
import React from 'react';
class ConnectToQuickBooksOnlineButton extends React.Component {
constructor(props){
super(props);
this.state = {
};
}
componentWillMount() {
const library = document.createElement("script");
library.src = "https://appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js";
library.type = "text/javascript"
library.async = true;
document.body.appendChild(library);
const setup = document.createElement("script");
setup.src = "https://js.appcenter.intuit.com/Content/IA/intuit.ipp.anywhere-1.3.3.js";
setup.type = "text/javascript";
setup.async = true;
document.body.appendChild(setup);
const connect = document.createElement("script");
connect.type = "text/javascript";
connect.innerHTML = "intuit.ipp.anywhere.setup({grantUrl: '/quickbooksauth',datasources: {quickbooks : true, payments : true}, paymentOptions:{intuitReferred : true}});"
document.body.appendChild(connect);
const body = document.createElement("body");
body.innerHTML = "<ipp:connectToIntuit></ipp:connectToIntuit>";
body.async = true;
document.body.appendChild(body);
}
render(){
return <div />;
}
};
export default ConnectToQuickBooksOnlineButton;
我尝试将脚本内容放入 index.html,并从 Quickbooks 组件调用它。但是按钮仍然没有显示。
import React from 'react';
class ConnectToQuickBooksOnlineButton extends React.Component {
constructor(props){
super(props);
this.state = {
};
}
componentWillMount() {
const connectToIntuit = document.createElement('ipp:connectToIntuit');
document.body.appendChild(connectToIntuit);
}
render(){
return <div ref="ipp:connectToIntuit"/>;
}
};
export default ConnectToQuickBooksOnlineButton;
我还创建了以下 fiddle:https://jsfiddle.net/aewhatley/7eL716mp/
您在哪里呈现 ConnectToQuickBooksOnlineButton 组件?比如 index.jsx 或 app.jsx?您可以将所有脚本包含在 index.html 中,或者在根组件 (index/app.jsx) 中创建它们,并在 ConnectToQuickBooksOnlineButton 中仅创建所需的 html 标记,如下所示:
componentWillMount() {
const connectToIntuit = document.createElement('ipp:connectToIntuit')
document.body.appendChild(connectToIntuit)
}
@alex 看起来你在渲染之前试图访问 Dom,你应该使用 "componentDidMount" 将你的直觉按钮加载到 div 或容器上。
我创建了一个 WebpackBin 来说明实现,如果这就是你想要实现的原因,请告诉我?
这是我创建的简单组件
QuickBooks.js
工作演示 WebpackBin https://www.webpackbin.com/bins/-Kg6yu5JUmy9dD08JI_A
import React from 'react'
class QuickBooks extends React.Component {
constructor(props){
super(props);
window.intuit.ipp.anywhere.setup({
grantUrl: 'http://www.mycompany.com/HelloWorld/RequestTokenServlet',
datasources: {
quickbooks : true,
payments : true
},
paymentOptions:{
intuitReferred : true
}
})
}
componentDidMount() {
let buttonContainer = document.getElementById("intuButton")
const connectToIntuit = document.createElement('ipp:connectToIntuit');
buttonContainer.appendChild(connectToIntuit);
}
render(){
return (
<div id="intuButton"></div>
)
}
}
export default QuickBooks
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.0.0/react-dom.min.js"></script>
你不需要。 只需使用您的后端生成 link.
// backend (expressJs)
router.post('/authUri', async (req: Request, res: Response, next: NextFunction) => {
const authUri = oauthClientGlobal.authorizeUri({
scope: [OAuthClient.scopes.Accounting],
state: 'intuit-test',
})
res.status(200).json(authUri)
})
然后是前端(React) 调用您的后端路由以获取 Quickbooks URL 然后根据响应将页面重定向到 quickbooks :
window.location.href = authUri // response Quickbooks URL From Backend