添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

I have a single page application that needs to make calls to the Twitter v2 API.

To authorize, the user clicks on a button which calls an API to obtain the twitter authorization URL.

The code below then opens a popup and attempts to monitor whether the window is open or closed

win = window.open(authorizationUrl, "twitter-oauth2", `toolbar=1,scrollbars=1,location=0,statusbar=0,menubar=1,resizable=1,width=900, height=800,top=0`);
id = setInterval(checkWindowStatus, 500);
function checkWindowStatus(){
      if(win.closed){
        cleanup();
        if(onClose){
          onClose();

This code works fine unless the site responds with a " Cross-Origin-Opener-Policy" header which twitter does. The win.closed property then returns true and no information can be obtained from the “win” variable. I understand this is a security feature but I have no wish to poke around the contents of the window, simply to determine if the user has closed the popup.

The equivalent outh authorize URL does not seem to include that header.

I know that I could redirect the browser to the authorizationUrl and rely on the callback URL to return me to the application but the user experience is awful.

Could you suggest a strategy?

I am also having the same issue. It seems the COOP header is returned on https://twitter.com/i/oauth2/authorize?..... ‘oauth2’ and it is not returned in https://api.twitter.com/oauth/authenticate?..... ‘oauth1’. This is blocking me from terminating the popup window if the user choses to terminate the process.

Hi there. Are there any updates on this? When OAuth finishes in the app I’m trying to use twitter API in, it is looking to see if the oauth window reported success. The fact that window.opener is null in the oauth window means that the original app that launched oauth has no way to check if the authorization was successful which leads to a very poor user experience.

Would it be possible to not block window.opener to enable this use case?

(FWIW this seems to be common practice with other OAuth flows to allow app launchers to know how to handle success or error)

Hello everyone.
Could some please action this? Your whole API can’t really be used if we are not able to map an incoming OAuth2 request with the user making it.
Also I tried and token obtained using the OAuth1 (previous) method do not seem to work with the new API.

The few itself seems straightforward (removing the problematic header).
Many thanks to whoever will handle this!

I found workaround. When auth ends, i send html with script, that close window.
Example for NodeJs(Express)

router.get('/twitter/callback', async function (req, res) {
// some logic
    res.send('<script>window.close()</script>');
              

How is this still a thing? If we open the authorisation flow in a new window we have no way of being able to access it to bind to a close event or access the window.opener property.

Does anybody have a solution?

The only solution at present is to keep generating OAuth1 tokens. They are compatible with the API V2.
That is what I do at least.

A solution is to use BroadcastChannel to connect different tabs from same domain.

from opener:

const bc = new BroadcastChannel("mychannel")
bc.onmessage = (event) => {
    // handle event.data posted from your popup

from popup:

const bc = new BroadcastChannel("mychannel")
bc.postMessage("data to be handled on your opener")