个人中心
gpt4 book ai didi

Why does window.opener become null when using Google OAuth in a popup, and how can I communicate the access token back to the parent window?(为什么在弹出窗口中使用Google OAuth时，window.Opener变为空，以及如何将访问令牌传回父窗口？)

转载 作者：bug小助手 更新时间：2023-10-25 21:45:52 24 4
gpt4 key购买 nike



I'm working with Google OAuth in my React application, and I'm implementing it through a popup. I'm using Passport with my custom backend. The initial URL that I supply to the popup window is the backend entry point that initializes the OAuth process. Google then sends a response to my callback on my backend.

我在Reaction应用程序中使用Google OAuth，并通过弹出窗口实现它。我正在使用Passport和我的自定义后端。我提供给弹出窗口的初始URL是初始化OAuth过程的后端入口点。然后，谷歌在我的后台向我的回调发送响应。


After that, I need to communicate the JWT access token back that I generate on the backend to my frontend. I'm doing this by redirecting respondign with a redirect to a frontend route, with the access token as a query parameter in the redirect URL. The problem I'm facing, however, is that the window.opener in the popup becomes null after the Google OAuth process. This prevents me from sending the access token back to the parent window using window.opener.postMessage.

在那之后，我需要将我在后端生成的JWT访问令牌传回给我的前端。为此，我使用重定向将响应重定向到前端路由，并将访问令牌作为重定向URL中的查询参数。然而，我面临的问题是，在Google OAuth过程之后，弹出窗口中的window.openser变为空。这阻止了我使用window.opener.postMessage将访问令牌发送回父窗口。


I have verified that the window.opener is not null when I pass in the same route my backend redirects my frontend to, as the initial url to the popup. The issue occurs when I pass in my backend endpoint for initializing google OAUTH (so it redirects to Googles sign in).

我已经验证了，当我通过与弹出窗口的初始url相同的后端重定向到的路径时，window.openser不是空的。当我传入后端终结点以初始化Google OAuth时(因此它重定向到Googles登录)，就会出现这个问题。


Unfortunately, I can't use cookies or localStorage due to my application's restrictions.

不幸的是，由于我的应用程序的限制，我不能使用cookie或localStorage。


Has anyone faced a similar issue? Any advice or guidance would be greatly appreciated. Thanks!

有没有人遇到过类似的问题？任何建议或指导都将不胜感激。谢谢!


更多回答
优秀答案推荐

You can use a BroadcastChannel to communicate without having a direct reference:

您可以在没有直接引用的情况下使用BroadCastChannel进行通信：



The BroadcastChannel interface represents a named channel that any
browsing context of a given origin can subscribe to. It allows
communication between different documents (in different windows, tabs,
frames or iframes) of the same origin.



The listener:

听众：


const channel = new BroadcastChannel('auth');
channel.addEventListener ('message', (event) => {
 console.log(event.data);
});

The sender:

发件人：


const channel = new BroadcastChannel('auth');
channel.postMessage(data);

Hook:

钩子：


You can wrap this in a custom hook that returns the message (received items) and a sendMessage to post items. Since BroadcastChannel is bi-directional you can use either or both.

您可以将其包装在一个返回消息(已接收项)的定制钩子和一个用于发布项的sendMessage中。因为BroadCastChannel是双向的，所以您可以使用其中的一种或两种。


const useBroadcastChannel = name => {
  const [message, setMessage] = useState()
  const channel = useRef()
  
  useEffect(() => {
    channel.current = new BroadcastChannel(name);
    
    channel.current.addEventListener('message', event => {
      setMessage(event.data)
    })
    
    return () => {
      channel.current?.close()
    }
  }, [name])
  
  const sendMessage = useCallback(data => {
    channel.current?.postMessage(data)
  }, [])
  
  return {
    message,
    sendMessage
  }
}

Usage:

用途：


const { message, sendMessage } = useBroadcastChannel('auth')

You can handle received messages with useEffect.

您可以使用useEffect处理收到的消息。


更多回答

24 4 0
文章推荐： How to immediately update UI after database change in next.js(如何在next.js中修改数据库后立即更新UI)
文章推荐： how to check the version of jar file?(如何查看JAR文件的版本？)
文章推荐： SQL Server xp_delete_file parameters(SQL Server XP_DELETE_FILE参数)
文章推荐： Quaternion.Lerp rotate too soon(四元数.Lerp轮换太快)
bug小助手
个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章
滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com