通过 JavaScript 掌握从 Shareme 项目上的 Google OAuth 服务恢复用户信息/图像的问题

Question

我正在关注 Youtube 上 JavaScript Mastery 的 Shareme 项目教程，但是在 1:21 附近我遇到了一个问题，即在成功登录后用户图像没有呈现，我基本上每次都得到“用户未定义”。

我不确定我做错了什么，JavaScript Mastery 解释说 Google OAuth 流程发生了变化，他们在另一个视频中解释了新的实现，但它有一些差异，因为我在编码方面很新，所以我无法理解。

如果我不够清楚，我深表歉意，英语不是我的母语。

起初我根本无法登录，但我设法通过使用 jwt 解码器做到了，但我不明白为什么我无法在登录后获取用户图像或其他用户信息在。我该如何解决这个问题？这是我在 Home.jsx 文件上的代码，以及我在 Utils/data.js 和 Login.jsx 上的代码。

家：

`

import React, {useState, useRef, useEffect} from 'react'
import {HiMenu} from 'react-icons/hi';
import {AiFillCloseCircle} from 'react-icons/ai';
import {Link, Route, Routes} from 'react-router-dom';
import { userQuery } from '../utils/data';
import Sidebar from '../components/Sidebar';
import UserProfile from '../components/UserProfile';
import {client} from '../client';
import logo from '../assets visualart/visual arts logo color@4x.png';
import Pins from './Pins';
import { GoogleOAuthProvider } from '@react-oauth/google';




const Home = () => {
  const [toggleSidebar, setToggleSidebar] = useState(false);
  const [user, setUser] = useState();
  const scrollRef = useRef(null);

  const userInfo = localStorage.getItem('user') !== 'undefined' ? JSON.parse(localStorage.getItem('user')) : localStorage.clear();

  useEffect(() => {
    const query = userQuery(userInfo?.sub)

    client.fetch(query)
      .then((data) => {
        setUser(data[0])
      })
  }, [])

  useEffect(() => {
    scrollRef.current.scrollTo(0, 0);
  });

  return (
    <div className="flex bg-gray-50 md:flex-row flex-col h-screen transition-height duration-75 ease-out">
      <div className="hidden md:flex h-screen flex-initial">
        <Sidebar user={user && user} />
      </div>
      <div className="flex md:hidden flex-row">
        <div className="p-2 w-full flex flex-row justify-between items-center shadow-md">
          <HiMenu fontSize={40} className="cursor-pointer" onClick={() => setToggleSidebar(true)} />
          <Link to="/">
            <img src={logo} alt="logo" className="w-28" />
          </Link>
          <Link to={`user-profile/${user?._id}`}>
            <img src={user?.image} alt="user-pic" className="w-9 h-9 rounded-full " />
          </Link>
        </div>
        {toggleSidebar && (
        <div className="fixed w-4/5 bg-white h-screen overflow-y-auto shadow-md z-10 animate-slide-in">
          <div className="absolute w-full flex justify-end items-center p-2">
            <AiFillCloseCircle fontSize={30} className="cursor-pointer" onClick={() => setToggleSidebar(false)} />
          </div>
          <Sidebar closeToggle={setToggleSidebar} user={user && user} />
        </div>
        )}
      </div>
      <div className="pb-2 flex-1 h-screen overflow-y-scroll" ref={scrollRef}>
        <Routes>
        <Route path="/user-profile/:userId" element={<UserProfile />} />
        <Route path="/*" element={<Pins user={user && user} />} />
        </Routes>
      </div>
    </div>
  );
};

export default Home;

`

工具/data.jsx

    export const userQuery = (userId) => {
    const query = `*[_type == "user" && _id == '${userId}']`;
    return query;
  };

登录.jsx

import React from 'react'
import { useNavigate } from 'react-router-dom';
import { FcGoogle } from 'react-icons/fc';
import shareVideo from '../assets visualart/Infinito Zoom - 25034.mp4';
import logo from '../assets visualart/visual arts logo@4x.png';
import jwt_decode from 'jwt-decode';
import { GoogleOAuthProvider } from '@react-oauth/google';
import { GoogleLogin } from '@react-oauth/google';


import { client } from '../client';

const Login = () => {
  const navigate = useNavigate();

  const credentialResponse=(response)=>{
    localStorage.setItem('user', JSON.stringify(response.profileObj));
    var decodedHeader = jwt_decode(response.credential);
    console.log(decodedHeader);

    const { name, sub, picture } = decodedHeader;

    const doc = {
      _id: sub,
      _type: 'user',
      userName: name,
      image: picture,
    }

    client.createIfNotExists(doc)
      .then(() =>{
        navigate('/*', { replace: true });
      })

  }

  return (
    <GoogleOAuthProvider clientId='825616375923-47dgi1prnmq4q9gpdpel7c37dq0h3q13.apps.googleusercontent.com' className='flex justify-start items-center flex-col h-screen'>
      <div className='relative w-full h-full'>
        <video
          src={shareVideo}
          type="video/mp4"
          loop
          controls={false}
          muted
          autoPlay
          className='w-full h-full object-cover'
        />

        <div className='absolute flex flex-col justify-center items-center top-0 right-0 left-0 bottom-0 bg-blackOverlay'>
              <div className='p-5'>
                <img src={logo} width="130px" alt="logo" />
              </div>
              <div className='shadow-2x1'>
                <GoogleLogin
                  clientId={process.env.REACT_APP_GOOGLE_API_TOKEN}
                  render={(renderProps) => (
                    <button
                      type='button'
                      className='bg-mainColor flex jusitify-center items-center p-3 rounded-lg cursor-pointer outline-none'
                      onClick={renderProps.onClick}
                      disabled={renderProps.disabled}
                    >
                      <FcGoogle className="mr-4" /> Inicia Sesion con Google

                    </button>
                  )} 
                  onSuccess={credentialResponse}
                  onError={credentialResponse}
                  cookiePolicy="single_host_origin"
                />

              </div>
        </div>

      </div>
      
      
    </GoogleOAuthProvider>
  )
}

export default Login

Answer 1

[登录使用]@react-oauth/google] [登录使用]@react-oauth/google]1 您好，有一个新更新，我们使用 Google Identity Services SDK 检查此链接https://www.npmjs.com/package/@react-oauth/google。

尝试使用此代码登录并获取用户信息

登录.jsx