谷歌身份验证与React谷歌登录问题时重定向

Question

我在npm包react google登录时遇到问题。问题是，我有一个重定向Uri被传递到组件中，但当我尝试用弹出窗口重定向时，什么都没有发生，但当我们添加uxMode='direct'时，它可以工作，但它给了我一个非常长的url，这是我不喜欢的。有没有办法让弹出版本的重定向工作？

下面是我的代码，客户端ID被删除：

import React from 'react';
import GoogleLogin from 'react-google-login';
import ChatRoom from './ChatRoom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faGoogle } from '@fortawesome/free-brands-svg-icons';
import { faQuestionCircle } from '@fortawesome/free-solid-svg-icons';
import {Link} from 'react-router-dom';
const responseGoogle = (res) => {
console.log('Failed');
}
const successLogin = () => {
console.log('success');
}
const Authentication = () => {
return (
<div className='auth-wrapper'>
<div className="auth-container">
<h1 className="auth-header">Choose Your Sign in Method</h1>
<div className="btn-container2">
<GoogleLogin 
clientId="none"
buttonText="Sign in with Google"
onSuccess={successLogin}
onFailure={responseGoogle}
cookiePolicy={'single_host_origin'}
uxMode='popup'
redirectUri='http://localhost:3000/ChatRoom'
render={renderProps => (
<button className="btn2 btn-primary2 animate shake" onClick={renderProps.onClick} disabled={renderProps.disabled}><FontAwesomeIcon size='lg' icon={faGoogle} /> Sign in with Google</button>
)}
/>
<Link to='/ChatRoom'>
<button className="space btn2 btn-primary2 animate shake">
<FontAwesomeIcon size='lg' icon={faQuestionCircle} /> Continue as Guest
</button>
</Link>
</div>
</div>
</div>
)
}
export default Authentication

Answer 1

本质上，我所要做的就是从react router dom使用useHistory并使用history.push('/page'(；以在用户获得身份验证时导航到页面。

let history = useHistory();
// Redirects user after authentication to the ChatRoom
const successLogin = () => {
history.push('/ChatRoom');
}