如何解决Google登录,在使用ReactJS的扩展中-错误无法读取未定义的属性“ load”
我正在尝试使用ReactJS在扩展程序中创建Google登录,但是我不断收到以下错误:
无法读取未定义的属性“ load”
我不知道我做的是否正确,有人可以帮我吗?这是我第一次构建扩展程序。
登录组件如下:
function Login() {
const gapi = window.gapi;
const [isLoggedIn,setLoggedIn] = useState(false);
const signUpWithGoogle = () => {
gapi.load("client:auth2",() => {
gapi.client.init({
apiKey: API_KEY,clientId: CLIENT_ID,discoveryDocs: DISCOVERY_DOCS,scope: SCOPES,})
gapi.auth2.getAuthInstance().signIn()
.then( () => {
setLoggedIn(true);
})
});
}
const signoutWithGoogle = () => {
gapi.auth2.getAuthInstance().signOut()
.then( () => {
setLoggedIn(false);
})
};
return (
<div className="app">
{isLoggedIn ? (
<div className="Home">
<div className="homeHeading">
<h3>Schedule Meetings</h3>
<button onClick={signoutWithGoogle}>Logout</button>
</div>
<Home />
</div>
) : (
<div>
<section className="login">
<header className="loginHeading">
<h1>Welcome to Google Meet</h1>
</header>
<button
onClick={signUpWithGoogle}
type="button"
>
Login with Google
</button>
</section>
</div>
)}
</div>
);}
我在manifest.json中提到了CSP
{ "manifest_version": 2,"name": "Schedule Meetings","description": "App to Schedule Meetings","version": "1.0","browser_action": {
"default_popup": "index.html","default_title": "Open to Schedule the meetings"
},"content_security_policy": "script-src 'self' https://apis.google.com/js/api.js; object-src 'self'" }
在HTML文件中,我已将脚本src添加到background.js。执行此步骤可修复内联脚本冲突。
<script src="./background.js" type="text/javascript"></script>
background.js文件如下
var head = document.getElementsByTagName('head')[0];
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "https://apis.google.com/js/api.js";
head.appendChild(script);
谢谢。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。