Problem
Imagine that you need to direct a user to a different web page/domain and would like to know when they've completed whatever it is that you needed them to do.
Background
I'm currently working on a Wordpress plugin which requires OAuth so that I can allow them to do, well, stuff! (I don't think I can disclose that right now...) While I could account for one or two redirect URIs, it would be IMPOSSIBLE for me to handle that for EVERY DOMAIN THAT MY WORDPRESS PLUG IN IS RUNNING ON!!!!
Solution
What I opted to do in the plugin is to open a page that I host when a user clicks on the OAuth button.
const newWindow = window.open('https://somesite.com/oauth', 'oauth', 'height=720,width=480');
As soon as I create the new window I'm able to extend the current window
object by adding a function:
window.popUpCallback = (code) => {
newWindow.close();
console.log(code);
};
Now on my pop up that will handle the authorization, after it gets the authorization code it can call the function I added to the window:
window.opener.popUpCallback(value);
What happened here is that my popup window will call the popUpCallback
function that I added to the window
that opened this current (new) window
.
Looking back at my popUpCallback
function you see that I close the newWindow
(the popup) and then console.log
the code I got back. However you can do anything you want now. What you've done is passed a value between windows!
For me this was perfect because now I only need to have one redirect URI no matter where this plugin is run, but maybe this will be useful for you for some other reason.
Enjoy!
To keep up with everything I’m doing, follow me on Twitter. If you’re thinking, “Show me the code!” you can find me on GitHub.
Top comments (1)
Yeah! This tip rocks, i did it a little time ago to communicate an Angular app opened by an old custom CRM.