Use popup to login

ringcentral · Oct 16, 2024 · 1180c5c · 1180c5c
1 parent 0ed0e55
commit 1180c5c
Show file tree

Hide file tree

Showing 4 changed files with 39 additions and 21 deletions.
diff --git a/package.json b/package.json
@@ -1,10 +1,10 @@
 {
   "license": "MIT",
   "scripts": {
-    "build": "rm -rf .parcel-cache docs && parcel src/index.html --dist-dir docs -public-url ./",
+    "build": "rm -rf .parcel-cache docs && parcel src/index.html src/callback.html --dist-dir docs -public-url ./",
     "lint": "sort-package-json && eslint . --fix",
     "release": "mkdir -p chrome_extension && rm -rf chrome_extension/* && cp content.js manifest.json ./chrome_extension/ && cp -r icons ./chrome_extension/",
-    "serve": "rm -rf .parcel-cache docs && parcel src/index.html --dist-dir docs"
+    "serve": "rm -rf .parcel-cache docs && parcel src/index.html src/callback.html --dist-dir docs"
   },
   "devDependencies": {
     "@ant-design/icons": "^5.5.1",

diff --git a/src/callback.html b/src/callback.html
@@ -0,0 +1,14 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="../icons/icon128.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>
+      RingCentral Team Messaging Salesforce Chrome extension callback
+    </title>
+  </head>
+  <body>
+    <script type="module" src="callback.ts"></script>
+  </body>
+</html>
diff --git a/src/callback.ts b/src/callback.ts
@@ -0,0 +1,9 @@
+const urlSearchParams = new URLSearchParams(
+  new URL(window.location.href).search,
+);
+const code = urlSearchParams.get('code');
+
+if (code) {
+  window.opener.postMessage({ type: 'code', code }, '*');
+  window.close();
+}
diff --git a/src/main.tsx b/src/main.tsx
@@ -27,44 +27,39 @@ const Main = auto((props: { store: Store }) => {
 });
 
 const Login = auto(() => {
+  let eventHandler: (event: MessageEvent) => void;
   const login = () => {
     const rc = new RingCentral({
       clientId: process.env.RINGCENTRAL_CLIENT_ID_SALESFORCE_GLIP_EXTENSION,
       server: Rest.productionServer,
     });
     const authorizeUriExtension = new AuthorizeUriExtension();
     rc.installExtension(authorizeUriExtension);
-    const redirectUri = window.location.origin + window.location.pathname;
+    const redirectUri =
+      window.location.origin + window.location.pathname + 'callback.html';
     const authorizeUri = authorizeUriExtension.buildUri({
       redirect_uri: redirectUri,
       code_challenge_method: 'S256',
     });
     const codeVerifier = authorizeUriExtension.codeVerifier;
-    const popupWindow = window.open(
-      authorizeUri,
-      'LoginPopup',
-      'width=600,height=600',
-    );
-    const handle = setInterval(async () => {
-      if (popupWindow.closed) {
-        clearInterval(handle);
-        return;
-      }
-      // Parse the URL and check if it contains the "code" parameter
-      const urlParams = new URLSearchParams(popupWindow.location.search);
-      const code = urlParams.get('code');
-      if (code) {
-        clearInterval(handle);
-        popupWindow.close();
+    window.open(authorizeUri, 'LoginPopup', 'width=600,height=600');
+    if (eventHandler) {
+      window.removeEventListener('message', eventHandler);
+    }
+    eventHandler = async (event: MessageEvent) => {
+      if (event.data.type === 'code') {
+        window.removeEventListener('message', eventHandler);
+        eventHandler = undefined;
         const token = await rc.authorize({
-          code,
+          code: event.data.code,
           redirect_uri: redirectUri,
           code_verifier: codeVerifier,
         });
         await localforage.setItem('token', token);
         window.location.reload();
       }
-    }, 100);
+    };
+    window.addEventListener('message', eventHandler);
   };
   return (
     <Button type="primary" onClick={() => login()}>