在下一个 js 项目中使用 strapi 进行谷歌身份验证答案

【问题标题】：google authentication using strapi in next js project在下一个 js 项目中使用 strapi 进行谷歌身份验证
【发布时间】：2022-12-30 06:02:53
【问题描述】：

我想使用 strapi 使用谷歌身份验证。我在主页 http://localhost:3000/?id_tokenXXXXXX 上收到来自 Strapi 的回调响应，但无法理解如何捕获搜索参数 (?id_tokenXXXXXX) 并进行 axios 调用以获取 api 响应。我正在尝试下面的代码，但它没有以某种方式进行 axios 调用。

                   <div>
                    <Button
                      style={{ float: "right", width: 120 }}
                      color="primary"
                      onClick={() => {
                        setLoading(true);
                        console.log("clicked")
                        GoogleAuthCallback()
                        
                      }}
                    >
                      {loading ? "Loading... " : "GoogleLogin"}
                    </Button>
                    </div>

GoogleAuthCallback.js

import React, { useState, useEffect } from 'react'
import { useLocation } from 'react-router-dom'
import axios from 'axios'

function GoogleAuthCallback() {
    console.log("called")
  (window.location = 'http://localhost:1337/connect/google');
//code stop at this line
  console.log("google")
  const location = useLocation()
  useEffect(() => {
    if (!location) {
      return
    }
    const { search } = location
    axios({
      method: 'GET',
      url: `http://localhost:1337/auth/google/callback?${search}`,
    })
      .then((res) => res.data)
      console.log(res.data)
      
  }, [location])

  return (
    <div>
      {auth && (
        <>
          <div>Jwt: {auth.jwt}</div>
          <div>User Id: {auth.user.id}</div>
          <div>Provider: {auth.user.provider}</div>
        </>
      )}
    </div>
  )
}

export default GoogleAuthCallback

【问题讨论】：

标签： reactjs authentication strapi

【解决方案1】：

我认为请求由于跨源而被阻止。你能检查一下控制台吗

【讨论】：