如何通过打开新窗口来执行OAuth请求,而不是从当前页面重定向用户?

时间:2022-04-12 06:36:10

I have done OAuth authentication with Twitter and Facebook. Currently, with each of these site, my server redirect user to a specified URL (for example, http://api.twitter.com/oauth/authorize with Twitter), then receive authentication parameters by callback url.

我已经使用Twitter和Facebook进行了OAuth身份验证。目前,对于每个站点,我的服务器将用户重定向到指定的URL(例如,使用Twitter的http://api.twitter.com/oauth/authorize),然后通过回调URL接收身份验证参数。

But by that way, the users get redirected out of my page (to Facebook or Twitter), and only returns after input correct username & password. It's like the way http://techcrunch.com do it when a user try to tweet a post.

但通过这种方式,用户被重定向到我的页面(到Facebook或Twitter),并且只有在输入正确的用户名和密码后才会返回。这就像http://techcrunch.com在用户尝试推文发布时的方式。

I remember that in some site, I have seen that we can connect not by redirect user out, but open a popup window for user to input credentials instead. After authentication is completde, the pop-up closed, the main page refresh with new content.

我记得在某个网站上,我看到我们可以不通过重定向用户连接,而是打开一个弹出窗口供用户输入凭据。认证为completde后,弹出窗口关闭,主页面刷新新内容。

This could be a very simple task with javascript, but I still can't figure it out. I can open authentication URL in a pop-up window, but how to get the result & update the main page?

这可能是一个非常简单的javascript任务,但我仍然无法弄明白。我可以在弹出窗口中打开身份验证URL,但是如何获取结果并更新主页?

1 个解决方案

#1


48  

Assuming you're opening authentication url in a pop-up using window.open(), you can access parent window by using:

假设您使用window.open()在弹出窗口中打开身份验证URL,您可以使用以下命令访问父窗口:

window.opener

and to reload parent window (from a pop-up) use:

并重新加载父窗口(从弹出窗口)使用:

window.opener.location.reload();

This code should be served on url that you've set up as success callback url of oauth authorization.

此代码应该在您已设置为oauth授权的成功回调网址的网址上提供。

In general, the flow should be:

一般来说,流程应该是:

  • open a pop-up with an authorization page (on twitter.com for example)
  • 打开带有授权页面的弹出窗口(例如在twitter.com上)

  • after successfull authorization twitter redirects user to url given by you (it gets opened in the very same pop-up)
  • 成功授权后,twitter会将用户重定向到您提供的URL(它会在同一个弹出窗口中打开)

  • the opener window gets reloaded (via window.opener.location.reload())
  • 重新加载开启窗口(通过window.opener.location.reload())

  • close the pop-up itself (using javascript is you want)
  • 关闭弹出窗口本身(使用javascript是你想要的)

#1


48  

Assuming you're opening authentication url in a pop-up using window.open(), you can access parent window by using:

假设您使用window.open()在弹出窗口中打开身份验证URL,您可以使用以下命令访问父窗口:

window.opener

and to reload parent window (from a pop-up) use:

并重新加载父窗口(从弹出窗口)使用:

window.opener.location.reload();

This code should be served on url that you've set up as success callback url of oauth authorization.

此代码应该在您已设置为oauth授权的成功回调网址的网址上提供。

In general, the flow should be:

一般来说,流程应该是:

  • open a pop-up with an authorization page (on twitter.com for example)
  • 打开带有授权页面的弹出窗口(例如在twitter.com上)

  • after successfull authorization twitter redirects user to url given by you (it gets opened in the very same pop-up)
  • 成功授权后,twitter会将用户重定向到您提供的URL(它会在同一个弹出窗口中打开)

  • the opener window gets reloaded (via window.opener.location.reload())
  • 重新加载开启窗口(通过window.opener.location.reload())

  • close the pop-up itself (using javascript is you want)
  • 关闭弹出窗口本身(使用javascript是你想要的)