重定向时使用 React-Google-Login 的 Google 身份验证问题

Posted 2023-02-22

【中文标题】重定向时使用 React-Google-Login 的 Google 身份验证问题

【英文标题】：Google Authentication With React-Google-Login issue when redirecting

【发布时间】：2021-09-07 16:40:13

【问题描述】：

我在使用 npm 包 react-google-login 时遇到问题。问题是我有一个 redirectUri 传递到组件中，但是当我尝试使用弹出窗口重定向时没有任何反应，但是当我添加 uxMode='redirect' 时它可以工作，但它给了我一个非常长的 url，这是我不喜欢的.有没有办法使重定向的弹出版本起作用？

下面是我的代码，clientID 被删除：

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

【参考方案1】：

基本上我所要做的就是使用 react-router-dom 中的 useHistory 并利用 history.push('/page');每当用户通过身份验证时导航到该页面。

let history = useHistory();
// Redirects user after authentication to the ChatRoom
const successLogin = () => 

    history.push('/ChatRoom');