oauth2.0 如何在React中实现Google身份服务库?

cl25kdpy  于 2023-10-15  发布在  React
关注(0)|答案(1)|浏览(112)

这将是我当前的代码,它停止工作:

import React, { Component } from "react";
import Auth from "../../helper/auth";
import PropTypes from "prop-types";
import logo from "../../img/logo.png";
import { Link } from "react-router-dom";
import GoogleLogin from "react-google-login";

// import * as config from "../../config/config";

class Login extends Component {
  onSuccess = (googleUser) => {
    Auth.setStorage(googleUser);
    this.props.getLoggedUser(googleUser.profileObj.email);
    this.props.history.push("/home");
  };

  onFailure = (error) => {
    alert(error);
  };

  componentWillMount() {
    if (this.props.loggedUser != null) {
      this.props.history.push("/home");
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.loggedUser != null) {
      this.props.history.push("/home");
    }
  }

  render() {
    return (
      <div className="container">
        <div className="container container__login">
          <div className="login__section">
            <img
              src={logo}
              alt="EMS Mars logo"
              className="login__section__logo"
            />
            <h4>Welcome to Mars EMS! </h4>
            <p className="no-data" style={{ marginBottom: "-.25rem" }}>
              Please sign in with your Google account!
            </p>
            <br />
            <br />
            <GoogleLogin
              buttonText="log in with Google"
              className="btn-primary btn-login"
              onSuccess={this.onSuccess}
              onFailure={this.onFailure}
            />
            <div className="intro">
              <ul>
                <li>
                  <Link to="/about">About</Link>
                </li>
                <li>
                  <Link to="/privacy">Privacy Policy</Link>
                </li>
                <li>
                  <Link to="/terms">Terms And Conditions</Link>
                </li>
                <li style={{ marginTop: ".6rem" }}>Made by Dzenis H.</li>
                <li>&copy; {new Date().getFullYear()}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Login.propTypes = {
  loggedUser: PropTypes.string,
  getLoggedUser: PropTypes.func.isRequired,
};

export default Login;

我尝试了许多npm包,并使用了Google的官方文档,但我似乎无法使其工作。

nue99wik

nue99wik1#

这就是解决方案:

import React, { Component } from "react";
import PropTypes from "prop-types";
import logo from "../../img/logo.png";
import { Link } from "react-router-dom";
import { GoogleLogin } from "react-google-login";

class Login extends Component {
  onSuccess = (response) => {
    const { profileObj, tokenId } = response;
    // Store user data or perform any other actions you need.
    // For example, you can send the tokenId to your server for validation.
    this.props.getLoggedUser(profileObj.email);
    this.props.history.push("/home");
  };

  onFailure = (error) => {
    console.error("Login failed:", error);
    // Handle login failure here.
    // You can display an error message to the user.
  };

  componentWillMount() {
    if (this.props.loggedUser != null) {
      this.props.history.push("/home");
    }
  }

  componentWillReceiveProps(nextProps) {
    if (nextProps.loggedUser != null) {
      this.props.history.push("/home");
    }
  }

  render() {
    return (
      <div className="container">
        <div className="container container__login">
          <div className="login__section">
            <img
              src={logo}
              alt="EMS Mars logo"
              className="login__section__logo"
            />
            <h4>Welcome to Mars EMS! </h4>
            <p className="no-data" style={{ marginBottom: "-.25rem" }}>
              Please sign in with your Google account!
            </p>
            <br />
            <br />
            <GoogleLogin
              clientId="YOUR_GOOGLE_CLIENT_ID" // Replace with your actual Google Client ID
              buttonText="Log in with Google"
              className="btn-primary btn-login"
              onSuccess={this.onSuccess}
              onFailure={this.onFailure}
              cookiePolicy={"single_host_origin"}
            />
            <div className="intro">
              <ul>
                <li>
                  <Link to="/about">About</Link>
                </li>
                <li>
                  <Link to="/privacy">Privacy Policy</Link>
                </li>
                <li>
                  <Link to="/terms">Terms And Conditions</Link>
                </li>
                <li style={{ marginTop: ".6rem" }}>Made by Dzenis H.</li>
                <li>&copy; {new Date().getFullYear()}</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    );
  }
}

Login.propTypes = {
  loggedUser: PropTypes.string,
  getLoggedUser: PropTypes.func.isRequired,
};

export default Login;

相关问题