javascript - How to handle redirect response from a Single Page Application browser only webapp - Stack Overflow

admin 管理员组

文章数量: 1086019

I have Single Page Application, browser only webapp (javascript, no server side).

The user interacts with the application and sets some variables.

Far after the creation of the main index.html page, when the user wants to upload a file, he needs to authenticate with an external service using oauth2 (using "token / implicit grant").

Once authenticated, the authentication service responds with a redirect, possibly to another page (page2).

What should the page2 do to continue the flow of the program?

• Should it redirect back to the original main page (this time, with the access token)?

• If so, wouldn't this reload the main page and reset the application and the variables that were set?

Thanks,

Avner

---

EDIT

Ricardo, I don't use a specific web platform, just plain javascript.

@charlietfl I found a general example here that does postMessage between 2 seperate windows and it works ok.

I'm straggling to customize it according to Ricardo's ments, i.e.

• make the second window popup

• set a separate HTML file or a "noop" route on your SPA as redirect URL (what is a noop route?)

• poll for that URL in the popup

I found this example that create the popup in the main page (index.html), set the redirect, and poll in order to close the popup.

In my case I set the redirect URL to a new page (auth.html) that does postMessage with the access token back to the main page (index.html).

If the auth.html page is not openned in the browser, should I still expect to receive a message in the main page index.html ?

From what I read for postMessage to work both pages, index.html, auth.html should be opened in 2 separate tabs in the browser.

I have Single Page Application, browser only webapp (javascript, no server side).

The user interacts with the application and sets some variables.

Far after the creation of the main index.html page, when the user wants to upload a file, he needs to authenticate with an external service using oauth2 (using "token / implicit grant").

Once authenticated, the authentication service responds with a redirect, possibly to another page (page2).

What should the page2 do to continue the flow of the program?

• Should it redirect back to the original main page (this time, with the access token)?

• If so, wouldn't this reload the main page and reset the application and the variables that were set?

Thanks,

Avner

---

EDIT

Ricardo, I don't use a specific web platform, just plain javascript.

@charlietfl I found a general example here that does postMessage between 2 seperate windows and it works ok.

I'm straggling to customize it according to Ricardo's ments, i.e.

• make the second window popup

• set a separate HTML file or a "noop" route on your SPA as redirect URL (what is a noop route?)

• poll for that URL in the popup

I found this example that create the popup in the main page (index.html), set the redirect, and poll in order to close the popup.

In my case I set the redirect URL to a new page (auth.html) that does postMessage with the access token back to the main page (index.html).

If the auth.html page is not openned in the browser, should I still expect to receive a message in the main page index.html ?

From what I read for postMessage to work both pages, index.html, auth.html should be opened in 2 separate tabs in the browser.

• javascript
• single-page-application

Share Improve this question Follow edited Apr 1, 2019 at 23:30 Avner Moshkovitz asked Mar 26, 2019 at 1:15 Avner MoshkovitzAvner Moshkovitz 1,37411 gold badge2121 silver badges5151 bronze badges 5

• One approach is use postMessage API to have page 2 send message to main page with token – charlietfl Commented Mar 26, 2019 at 1:22
• My post was not meant to tell you to use one of those libraries; I have briefly explained a method of dealing with the problem and pointed you to existing code as example. A "noop" route is just a route from your SPA that does nothing, just showing a placeholder, as what the route does is not important. It is just meant to allow you to detect that the popup finished its work. – Ricardo Nolde Commented Apr 3, 2019 at 23:05
• If my answer has helped you, you should mark it as the correct answer, and mention one other steps taken as a ment in it. – Ricardo Nolde Commented May 27, 2019 at 1:07
• I marked it as the correct answer. Thanks – Avner Moshkovitz Commented May 28, 2019 at 2:10
• @AvnerMoshkovitz mentioned in a deleted answer that he used this guide to implement his solution, which is largely based on the concepts I have mentioned in my answer. – Ricardo Nolde Commented May 30, 2019 at 23:35

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

You can use a small popup, which will load the necessary oauth2 endpoint, setting a separate HTML file or a "noop" route on your SPA as redirect URL. You may then poll for that URL in the popup, so you know when to close it (user is done with oauth2 flow).

This strategy is used by libraries like vue-authenticate, react-oauth and satellizer.

Also, depending on the specific service your are trying to authenticate against, you can find official libraries and SDKs that will handle the oauth2 flow automatically.

Last but not least, you could also save the current state of you application in browser storage, redirect to the oauth2 endpoint, and point back to your app as redirect URL. When ing back to your app, the specific route should be able to restore the saved data and resume user experience, with the addition of the oauth2 tokens.

本文标签： javascriptHow to handle redirect response from a Single Page Application browser only webappStack Overflow