我在ReactJS Web客户端中实现了Google Sign-In按钮。成功登录后,页面无法从“https://accounts.google.com/...”重定向回我的Web客户端URL,即http://localhost:5000。
这是来自浏览器控制台日志:
Navigated to http://localhost:3000/login
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “'unsafe-inline'” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “https:” within script-src: ‘strict-dynamic’ specified
Content Security Policy: Ignoring “http:” within script-src: ‘strict-dynamic’ specified
POSThttp://localhost:3000/login
[HTTP/1.1 404 Not Found 17ms]
Content Security Policy: The page’s settings blocked the loading of a resource at http://localhost:3000/favicon.ico (“default-src”).
字符串
这是我从here复制的GoogleAuth按钮的代码
import { useEffect, useRef } from 'react'
const loadScript = (src) =>
new Promise((resolve, reject) => {
if (document.querySelector(`script[src="${src}"]`)) return resolve()
const script = document.createElement('script')
script.src = src
script.onload = () => resolve()
script.onerror = (err) => reject(err)
document.body.appendChild(script)
})
const GoogleAuth = () => {
// Refer Google Identity API documentation from https://developers.google.com/identity/gsi/web/reference/js-reference#ux_mode
const googleButton = useRef(null);
useEffect(() => {
const src = 'https://accounts.google.com/gsi/client'
const id = "<I gave valid ClientID>"
// Load Google sign-in page by redirecting the page.
loadScript(src)
.then(() => {
/*global google*/
console.log(google)
google.accounts.id.initialize({
client_id: id,
ux_mode: "redirect",
login_uri: window.location,
callback: handleCredentialResponse,
})
google.accounts.id.renderButton(
googleButton.current,
{ theme: 'outline', size: 'large' }
)
})
.catch(console.error)
return () => {
const scriptTag = document.querySelector(`script[src="${src}"]`)
if (scriptTag) document.body.removeChild(scriptTag)
}
}, [])
function handleCredentialResponse(response) {
console.log("Encoded JWT ID token: " + response.credential);
}
return (
<div ref={googleButton}></div>
)
}
export default GoogleAuth
型
我没有看到回调“验证CredentialResponse”的控制台日志。
我错过了什么?如何在不禁用浏览器安全功能的情况下解决此问题?
1条答案
按热度按时间dldeef671#
把它作为一个社区,为他人的利益。
正如@Govind Avireddi所说:
我通过将Google登录页面更改为弹出页面而不是使用选项:
ux_mode: popup
来实现它。