Use postmessage instead of storage event for embedded case

SeeClickFix · Aug 20, 2024 · 8085033 · 8085033
1 parent 24705d0
commit 8085033
Show file tree

Hide file tree

Showing 4 changed files with 75 additions and 3 deletions.
diff --git a/addon/mixins/ui-service-mixin.js b/addon/mixins/ui-service-mixin.js
@@ -38,6 +38,7 @@ var ServicesMixin = Mixin.create({
     let service = this;
     let lastRemote = this.remote;
     let storageToriiEventHandler;
+    let messageToriiEventHandler;
 
     return new EmberPromise(function (resolve, reject) {
       if (lastRemote) {
@@ -55,7 +56,39 @@ var ServicesMixin = Mixin.create({
           });
         }
       };
+
+      // Using postMessage as an alternative to localStorage/storageEvent
+      // for case of web site embedded in iframe
+      messageToriiEventHandler = function (messageEvent) {
+        if (messageEvent.source === service.remote) {
+          if (messageEvent.data === 'getPendingRequestKey') {
+            // console.log('getPendingRequestKey');
+            service.remote.postMessage(
+              JSON.stringify({ pendingRequestKey: service.pendingRequestKey })
+            );
+          } else {
+            const msg = JSON.parse(messageEvent.data);
+            // console.log(msg);
+            const key = Object.keys(msg)[0];
+            var remoteIdFromEvent = PopupIdSerializer.deserialize(
+              decodeURIComponent(key)
+            );
+            if (remoteId === remoteIdFromEvent) {
+              // console.log(msg[key]);
+              var data = parseMessage(msg[key], keys);
+              localStorage.removeItem(key);
+              // console.log(data);
+              run(function () {
+                resolve(data);
+              });
+            }
+          }
+        }
+      };
+      window.addEventListener('message', messageToriiEventHandler);
+
       var pendingRequestKey = PopupIdSerializer.serialize(remoteId);
+      service.pendingRequestKey = pendingRequestKey;
       localStorage.setItem(CURRENT_REQUEST_KEY, pendingRequestKey);
       localStorage.removeItem(WARNING_KEY);
 
@@ -115,6 +148,7 @@ var ServicesMixin = Mixin.create({
     }).finally(function () {
       // didClose will reject this same promise, but it has already resolved.
       service.close();
+      window.removeEventListener('message', messageToriiEventHandler);
       window.removeEventListener('storage', storageToriiEventHandler);
     });
   },

diff --git a/addon/providers/oauth2-bearer.js b/addon/providers/oauth2-bearer.js
@@ -39,6 +39,12 @@ var Oauth2Bearer = Provider.extend({
           );
         }
 
+        console.log({
+          authorizationToken: authData,
+          provider: name,
+          redirectUri: redirectUri,
+        });
+
         return {
           authorizationToken: authData,
           provider: name,

diff --git a/addon/redirect-handler.js b/addon/redirect-handler.js
@@ -38,7 +38,7 @@ var RedirectHandler = EmberObject.extend({
         if (remoteServiceName === 'popup') {
           // NOTE : If a single provider has been configured to use the 'iframe'
           // service, this next line will still be called. It will just fail silently.
-          windowObject.close();
+          // windowObject.close();
         }
       } else {
         reject(new ToriiRedirectError('Not a torii popup'));

diff --git a/public/redirect.html b/public/redirect.html
@@ -11,9 +11,41 @@
         window.localStorage.removeItem(CURRENT_REQUEST_KEY);
         var url = window.location.toString();
         window.localStorage.setItem(pendingRequestKey, url);
-      }
+        const obj = {};
+        obj[pendingRequestKey] = url;
+        // console.log(obj);
+        window.opener.postMessage(
+          JSON.stringify(obj),
+          'https://localhost:3000'
+        );
+
+        window.close();
+      } else {
+        window.opener.postMessage('getPendingRequestKey', 'https://localhost:3000');
+        window.addEventListener('message', function(messageEvent) {
+          // console.log(messageEvent);
+          if (messageEvent.source === window.opener) {
+            // console.log(messageEvent.data);
+            const msg = JSON.parse(messageEvent.data);
+            // console.log(msg);
+            if (msg.pendingRequestKey) {
+              pendingRequestKey = msg.pendingRequestKey;
+              // console.log(pendingRequestKey);
+              url = window.location.toString();
+              // console.log(url);
+              const obj = {};
+              obj[pendingRequestKey] = url;
+              // console.log(obj);
+              window.opener.postMessage(
+                JSON.stringify(obj),
+                'https://localhost:3000'
+              );
 
-      window.close();
+              window.close();
+            }
+          }
+        });
+      }
     </script>
   </head>
 </html>