From 1180c5c71ba94939f04977e599bd9078ddbf1889 Mon Sep 17 00:00:00 2001 From: Tyler Liu Date: Wed, 16 Oct 2024 16:01:42 -0700 Subject: [PATCH] Use popup to login --- package.json | 4 ++-- src/callback.html | 14 ++++++++++++++ src/callback.ts | 9 +++++++++ src/main.tsx | 33 ++++++++++++++------------------- 4 files changed, 39 insertions(+), 21 deletions(-) create mode 100644 src/callback.html create mode 100644 src/callback.ts diff --git a/package.json b/package.json index 4c37957..de61949 100644 --- 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 new file mode 100644 index 0000000..e4accda --- /dev/null +++ b/src/callback.html @@ -0,0 +1,14 @@ + + + + + + + + RingCentral Team Messaging Salesforce Chrome extension callback + + + + + + diff --git a/src/callback.ts b/src/callback.ts new file mode 100644 index 0000000..0f5f862 --- /dev/null +++ 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 index 0fa3a7c..189ec61 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -27,6 +27,7 @@ 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, @@ -34,37 +35,31 @@ const Login = auto(() => { }); 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 (