Javascript – How to create a popup window when doing oauth

facebookjavascriptoauthpopuptwitter

I'm would like to do what lifestream and other sites have done with oauth authentication by using a pop up window. They open a popup window which somehow wasn't blocked by the popup blocker and grey out their site. Then upon allowing oauth access it says redirecting back to original site and kills the popup and returns the site to normal color. How would I go about doing something like this? If I posted anything I shouldn't have its alright because all these accounts are bogus anyway.

enter image description here

Best Answer

In javascript, the window.open() function will do this for you. With its api, you can set its location and get data from events occurring in it.

Popup blockers will not block this popup if it is created from a function that is executed when the user clicks a button. Popup blockers only block windows if there was no user input provided to create it.

Related Solutions

Javascript – How to create a GUID / UUID

[Edited 2021-10-16 to reflect latest best-practices for producing RFC4122-complaint UUIDs]

Most readers here will want to use the uuid module. It is well-tested and supported.

The crypto.randomUUID() function is an emerging standard that is supported in Node.js and an increasing number of browsers.

If neither of those work for you, there is this method (based on the original answer to this question):

function uuidv4() {
  return ([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g, c =>
    (c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> c / 4).toString(16)
  );
}

console.log(uuidv4());

Note: The use of any UUID generator that relies on Math.random() is strongly discouraged (including snippets featured in previous versions of this answer) for reasons best-explained here. TL;DR: Math.random()-based solutions do not provide good uniqueness guarantees.

Javascript – How to identify if a webpage is being loaded inside an iframe or directly into the browser window

Browsers can block access to window.top due to same origin policy. IE bugs also take place. Here's the working code:

function inIframe () {
    try {
        return window.self !== window.top;
    } catch (e) {
        return true;
    }
}

top and self are both window objects (along with parent), so you're seeing if your window is the top window.

Best Answer

Related Solutions

Javascript – How to create a GUID / UUID

Javascript – How to identify if a webpage is being loaded inside an iframe or directly into the browser window

Related Topic