Fatal编程技术网
  • javascript/
  • Javascript 使用React应用程序注销Google帐户

Javascript 使用React应用程序注销Google帐户

javascript reactjs google-api

Javascript 使用React应用程序注销Google帐户,javascript,reactjs,google-api,google-oauth,Javascript,Reactjs,Google Api,Google Oauth,我有一个问题，关于如何注销我的谷歌帐户在网上使用反应 要登录，它是成功的，只有当我注销然后再次登录时，我才能再次选择一个帐户，因为以前的帐户仍在登录 当我按下注销按钮时，会话将消失并提示用户再次登录，如何实现这一点 我使用的以下脚本： GoogleLoginnya.jsx import GoogleLogin from 'react-google-login'; import { withRouter } from 'react-router-dom'; class GoogleLoginn

我有一个问题，关于如何注销我的谷歌帐户在网上使用反应

要登录，它是成功的，只有当我注销然后再次登录时，我才能再次选择一个帐户，因为以前的帐户仍在登录

当我按下注销按钮时，会话将消失并提示用户再次登录，如何实现这一点

我使用的以下脚本：

GoogleLoginnya.jsx

import GoogleLogin from 'react-google-login';
import { withRouter } from 'react-router-dom';


class GoogleLoginnya extends Component {
    constructor(props) {
        super(props)
        this.state = {
            setName: '',
            setEmail: '',
            setAccessToken: '',
        };
    }
    
    responseGoogle = response => {

        window.sessionStorage.setItem("access_token", response.accessToken);
        window.sessionStorage.setItem("nama", response.profileObj.name);
        

        this.props.history.push(`/menu`);
        console.log(response);
    }


    render() {
        return (
            <div>
                <GoogleLogin
                    clientId= {process.env.REACT_APP_GOOGLE_CLIENT_ID}
                    scope="https://www.googleapis.com/auth/drive.metadata.readonly"
                    buttonText="Login"
                    onSuccess={this.responseGoogle}
                    onFailure={this.responseGoogle}
                    cookiePolicy={'single_host_origin'}
                />
            </div>

        )
    }
}

export default withRouter(GoogleLoginnya);

从“react google login”导入GoogleLogin；
从“react router dom”导入{withRouter}；
类GoogleLoginya扩展组件{
建造师（道具）{
超级（道具）
此.state={
集合名：“”，
设置电子邮件：“”，
setAccessToken:“”，
};
}
responseGoogle=响应=>{
setItem（“访问令牌”，response.accessToken）；
setItem（“nama”，response.profileObj.name）；
this.props.history.push（`/menu`）；
控制台日志（响应）；
}
render（）{
返回(
)
}
}
使用路由器导出默认值（谷歌登录尼亚）；
Menu.jsx

import React, { Component, Fragment } from 'react';
import './Menu.css'
import ClickOutside from '../../components/ClickOutside';
import { BrowserRouter as Router, Route, Link } from 'react-router-dom';
import GoogleLogout from 'react-google-login';

import user2 from '../../images/user2.png';
import Gmail from '../../images/gmail.png';
import Drive from '../../images/drive.png';
import Meet from '../../images/gmeet.png';
import Form from '../../images/form.png';
import SideNav, { Toggle, Nav, NavItem, NavIcon, NavText } from '@trendmicro/react-sidenav';

import '@trendmicro/react-sidenav/dist/react-sidenav.css';



class Menu extends Component {

    constructor(props) {
        super(props)
        this.state = {
            token: sessionStorage.getItem("access_token"),
            username: sessionStorage.getItem("nama"),
            user_role: '',
            datauser: [],
            expanded: false,
            accessToken: '',
            isLogined: false,
        };

        this.logout = this.logout.bind(this);
        this.handleLogoutFailure = this.handleLogoutFailure.bind(this);
    }

    logout = response => {
        this.setState(state => ({
            isLogined: false,
            token: ''
        }),
        console.log(response)
        );
        
    }

    handleLogoutFailure(response) {
        console.log('Failed to log out')
    }




    render() {
        return (
            <Fragment>
                <ClickOutside
                    onClickOutside={() => {
                        this.setState({ expanded: false });
                    }}
                >
                    <SideNav
                        expanded={this.state.expanded}
                        onToggle={(expanded) => {
                            this.setState({ expanded });
                        }}
                        onSelect={(selected) => {
                            if (selected === "") {
                                window.sessionStorage.clear();
                            }
                            const to = '/' + selected;
                            if (this.props.location.pathname !== to) {
                                this.props.history.push(to);
                            }
                        }}
                        style={{ backgroundColor: '#46B2DB', position: 'fixed' }}
                    >
                        <SideNav.Toggle />
                        <SideNav.Nav>
                            <NavItem eventKey="drive">
                                <NavIcon>
                                    <i className="fa fa-fw fa-home" style={{ fontSize: '1.75em' }} />
                                </NavIcon>
                                <NavText>
                                    Google Drive
                            </NavText>
                            </NavItem>
                            <NavItem eventKey="gmail">
                                <NavIcon>
                                    <i className="fa fa-fw fa-device" style={{ fontSize: '1.75em' }} />
                                </NavIcon>
                                <NavText>
                                    Gmail
                            </NavText>
                            </NavItem>
                            <NavItem eventKey="meet">
                                <NavIcon>
                                    <i className="fa fa-fw fa-device" style={{ fontSize: '1.75em' }} />
                                </NavIcon>
                                <NavText>
                                    Google Meet
                            </NavText>
                            </NavItem>
                            <NavItem eventKey="form">
                                <NavIcon>
                                    <i className="fa fa-fw fa-device" style={{ fontSize: '1.75em' }} />
                                </NavIcon>
                                <NavText>
                                    Google Form
                            </NavText>
                            </NavItem>
                            <NavItem eventKey="">
                                <NavIcon>
                                    <i className="fa fa-fw fa-device" style={{ fontSize: '1.75em' }} />
                                </NavIcon>
                                <NavText>
                                    <GoogleLogout
                                        clientId={process.env.REACT_APP_GOOGLE_CLIENT_ID}
                                        buttonText='Logout'
                                        onLogoutSuccess={this.logout}
                                        onFailure={this.handleLogoutFailure}
                                        render={renderProps => (
                                            <input type='button' value="LOGOUT" onClick={renderProps.onClick} />)}
                                    />
                                </NavText>
                            </NavItem>
                        </SideNav.Nav>
                    </SideNav>
                </ClickOutside>
                <div className="background-nya">
                    <div className="header">
                        <p className="headerLabel-fix"> Name Apps </p>
                        <p className="headerLabelUser-fix"> {this.state.username} </p>
                        <p className="headerLabelPass-fix"> {this.state.user_role} </p>
                        <img className="userIcon" src={user2} />
                    </div>
                    <p className="titlePage"> MENU </p>
                    <div className="bagianMenu">
                        <a href='https://drive.google.com/drive/my-drive'>
                            <button className="buttonMenu">
                                <img className="newCaseIcon" src={Drive} />
                            </button>
                        </a>
                        <a href='https://mail.google.com/mail/u/0/#inbox'>
                            <button className="buttonMenu">
                                <img className="inboxIcon" src={Gmail} />
                            </button>
                        </a>
                    </div>
                    <div className="bagianMenu1">
                        <a href='https://meet.google.com/'>
                            <button className="buttonMenu">
                                <img className="draftIcon" src={Meet} />
                            </button>
                        </a>
                        <a href='https://docs.google.com/forms/u/0/?tgif=d'>
                            <button className="buttonMenu">
                                <img className="reportIcon" src={Form} />
                            </button>
                        </a>
                    </div>
                </div>
            </Fragment>
        )
    }
}

export default Menu;

import React，{Component，Fragment}来自'React'；
导入“./Menu.css”
从“../../components/ClickOutside”导入ClickOutside；
从“react Router dom”导入{BrowserRouter as Router，Route，Link}；
从“反应谷歌登录”导入谷歌注销；
从“../../images/user2.png”导入user2；
从“../../images/Gmail.png”导入Gmail；
从“../../images/Drive.png”导入驱动器；
从“../../images/gmeet.png”导入会议；
从“../../images/Form.png”导入表单；
从'@trendmicro/react SideNav'导入SideNav，{Toggle，Nav，NavItem，NavIcon，NavText}；
导入“@trendmicro/react sidenav/dist/react sidenav.css”；
类菜单扩展组件{
建造师（道具）{
超级（道具）
此.state={
令牌：sessionStorage.getItem（“访问令牌”），
用户名：sessionStorage.getItem（“nama”），
用户角色：“”，
数据用户：[]，
扩展：错，
accessToken:“”，
isLogined:错误，
};
this.logout=this.logout.bind（this）；
this.handleLogoutFailure=this.handleLogoutFailure.bind（this）；
}
注销=响应=>{
this.setState（state=>({
isLogined:错误，
令牌：“”
}),
console.log（响应）
);
}
handleLogoutFailure（响应）{
console.log（'注销失败'）
}
render（）{
返回(
{
this.setState（{expanded:false}）；
}}
>
{
这个.setState（{expanded}）；
}}
onSelect={（已选）=>{
如果（选定==“”）{
window.sessionStorage.clear（）；
}
常数to='/'+已选定；
if（this.props.location.pathname！==to）{
这个。道具。历史。推（到）；
}
}}
样式={{backgroundColor:'#46B2DB'，位置：'fixed'}
>
谷歌硬盘
Gmail
谷歌会议
谷歌表单
(
)}
/>

命名应用程序


{this.state.username}


{this.state.user\u role}

菜单

)
}
}
导出默认菜单；
谢谢~

我看到您正在使用会话存储维护状态。您需要在注销时删除该项目

 logout = response => {
       window.sessionStorage.removeItem("access_token");
        window.sessionStorage.removeItem("nama");
        this.setState(state => ({
            isLogined: false,
            token: ''
        }),
        console.log(response)
        );
    }
此外，您还必须使用以下注销组件

import { GoogleLogout } from 'react-google-login';
<GoogleLogout
  clientId="658977310896-knrl3gka66fldh83dao2rhgbblmd4un9.apps.googleusercontent.com"
  buttonText="Logout"
  onLogoutSuccess={logout}
>
</GoogleLogout>

从'react google login'导入{GoogleLogout}；
或者注销钩子

import { useGoogleLogout } from 'react-google-login'

const { signOut, loaded } = useGoogleLogout({
    jsSrc,
    onFailure,
    clientId,
    cookiePolicy,
    loginHint,
    hostedDomain,
    fetchBasicProfile,
    discoveryDocs,
    uxMode,
    redirectUri,
    scope,
    accessType,
    onLogoutSuccess
  })

signOut() //<-- need to call this in your sign out function

从'react google login'导入{useGoogleLogout}
const{signOut，loaded}=useGo