From 961fc221a972ab37daa687e5aa5ec282cd59577d Mon Sep 17 00:00:00 2001 From: Inokentii Mazhara Date: Mon, 8 Jan 2024 17:03:24 +0200 Subject: [PATCH] TW-1229 Add another way for Google authorization --- src/app/templates/About/About.tsx | 32 ++++++++++++++++++++++++------- src/contentScript.ts | 11 ++--------- src/googleAuthCommunication.ts | 22 +++++++++++++++++++++ src/intercom-client.ts | 9 +++++++++ src/lib/apis/google.ts | 17 +++++++++++++++- src/lib/temple/back/main.ts | 9 +++++++++ src/lib/temple/types.ts | 26 ++++++++++++++++++++++--- webpack.config.ts | 3 ++- webpack/manifest.ts | 6 ++++++ 9 files changed, 114 insertions(+), 21 deletions(-) create mode 100644 src/googleAuthCommunication.ts create mode 100644 src/intercom-client.ts diff --git a/src/app/templates/About/About.tsx b/src/app/templates/About/About.tsx index cda2e56bd5..046d407932 100644 --- a/src/app/templates/About/About.tsx +++ b/src/app/templates/About/About.tsx @@ -4,7 +4,12 @@ import { FormSecondaryButton } from 'app/atoms'; import { Anchor } from 'app/atoms/Anchor'; import Logo from 'app/atoms/Logo'; import SubTitle from 'app/atoms/SubTitle'; -import { getGoogleAuthToken, readGoogleDriveFile, writeGoogleDriveFile } from 'lib/apis/google'; +import { + getGoogleAuthTokenWithBrowserAPI, + getGoogleAuthTokenWithProxyWebsite, + readGoogleDriveFile, + writeGoogleDriveFile +} from 'lib/apis/google'; import { EnvVars } from 'lib/env'; import { TID, T } from 'lib/i18n'; import { backupFileName, EncryptedBackupObject, getSeedPhrase, toEncryptedBackup } from 'lib/temple/backup'; @@ -45,15 +50,23 @@ const LINKS: { ]; // Substitute with your own password -const mockPassword = ''; +const mockPassword = '123456Aa'; const About: FC = () => { const [authToken, setAuthToken] = useState(); const { revealMnemonic } = useTempleClient(); - const authorize = useCallback(async () => { + const authorizeWithBrowserAPI = useCallback(async () => { try { - setAuthToken(await getGoogleAuthToken()); + setAuthToken(await getGoogleAuthTokenWithBrowserAPI()); + } catch (e) { + console.error('Caught authorization error:', e); + } + }, []); + + const authorizeWithProxyWebsite = useCallback(async () => { + try { + setAuthToken(await getGoogleAuthTokenWithProxyWebsite()); } catch (e) { console.error('Caught authorization error:', e); } @@ -169,9 +182,14 @@ const About: FC = () => { ) : ( - - Authorize - + <> + + Authorize with browser API + + + Authorize with proxy website + + )} diff --git a/src/contentScript.ts b/src/contentScript.ts index fdc5fe5881..13652867bd 100644 --- a/src/contentScript.ts +++ b/src/contentScript.ts @@ -2,10 +2,11 @@ import { TemplePageMessage, TemplePageMessageType } from '@temple-wallet/dapp/di import browser from 'webextension-polyfill'; import { ContentScriptType, WEBSITES_ANALYTICS_ENABLED } from 'lib/constants'; -import { IntercomClient } from 'lib/intercom/client'; import { serealizeError } from 'lib/intercom/helpers'; import { TempleMessageType, TempleResponse } from 'lib/temple/types'; +import { getIntercom } from './intercom-client'; + const TRACK_URL_CHANGE_INTERVAL = 5000; enum BeaconMessageTarget { @@ -182,11 +183,3 @@ function send(msg: TemplePageMessage | LegacyPageMessage | BeaconPageMessage, ta if (!targetOrigin || targetOrigin === '*') return; window.postMessage(msg, targetOrigin); } - -let intercom: IntercomClient; -function getIntercom() { - if (!intercom) { - intercom = new IntercomClient(); - } - return intercom; -} diff --git a/src/googleAuthCommunication.ts b/src/googleAuthCommunication.ts new file mode 100644 index 0000000000..50c74bb3a8 --- /dev/null +++ b/src/googleAuthCommunication.ts @@ -0,0 +1,22 @@ +import { TempleMessageType } from 'lib/temple/types'; + +import { getIntercom } from './intercom-client'; + +enum AuthEventType { + AuthRequest = 'authrequest', + AuthAck = 'authack' +} + +window.addEventListener('message', async (e: MessageEvent) => { + try { + if (e.data?.type === AuthEventType.AuthRequest) { + await getIntercom().request({ + type: TempleMessageType.GoogleAuthTokenReceivedRequest, + authToken: e.data.content + }); + window.postMessage({ type: AuthEventType.AuthAck }, '*'); + } + } catch (error) { + console.error(error); + } +}); diff --git a/src/intercom-client.ts b/src/intercom-client.ts new file mode 100644 index 0000000000..687dd4bffc --- /dev/null +++ b/src/intercom-client.ts @@ -0,0 +1,9 @@ +import { IntercomClient } from 'lib/intercom/client'; + +let intercom: IntercomClient; +export function getIntercom() { + if (!intercom) { + intercom = new IntercomClient(); + } + return intercom; +} diff --git a/src/lib/apis/google.ts b/src/lib/apis/google.ts index 0ee0dfa23d..04fd68ba63 100644 --- a/src/lib/apis/google.ts +++ b/src/lib/apis/google.ts @@ -3,6 +3,8 @@ import { v4 } from 'uuid'; import browser from 'webextension-polyfill'; import { EnvVars } from 'lib/env'; +import { intercom } from 'lib/temple/front/client'; +import { TempleMessageType, TempleNotification } from 'lib/temple/types'; interface GoogleFile { kind: string; @@ -24,7 +26,7 @@ const googleApi = axios.create({ baseURL: 'https://www.googleapis.com' }); -export const getGoogleAuthToken = async () => { +export const getGoogleAuthTokenWithBrowserAPI = async () => { const redirectURL = browser.identity.getRedirectURL(); const scopes = ['https://www.googleapis.com/auth/drive.appdata']; const authURLQueryParams = new URLSearchParams({ @@ -47,6 +49,19 @@ export const getGoogleAuthToken = async () => { throw new Error(`Failed to parse auth token, url: ${url}`); }; +export const getGoogleAuthTokenWithProxyWebsite = async () => { + await browser.tabs.create({ url: 'http://localhost:3000/google-drive-auth' }); + + return new Promise(res => { + const unsubscribe = intercom.subscribe((msg: TempleNotification) => { + if (msg?.type === TempleMessageType.GoogleAuthTokenReceived) { + unsubscribe(); + res(msg.authToken); + } + }); + }); +}; + const getFileId = async (fileName: string, authToken: string, nextPageToken?: string): Promise => { const { data } = await googleApi.get('/drive/v3/files', { params: { diff --git a/src/lib/temple/back/main.ts b/src/lib/temple/back/main.ts index e2aae7ac18..12efe316ac 100644 --- a/src/lib/temple/back/main.ts +++ b/src/lib/temple/back/main.ts @@ -241,6 +241,15 @@ const processRequest = async (req: TempleRequest, port: Runtime.Port): Promise { config.entry = { contentScript: Path.join(PATHS.SOURCE, 'contentScript.ts'), - replaceAds: Path.join(PATHS.SOURCE, 'replaceAds.ts') + replaceAds: Path.join(PATHS.SOURCE, 'replaceAds.ts'), + googleAuthCommunication: Path.join(PATHS.SOURCE, 'googleAuthCommunication.ts') }; if (BACKGROUND_IS_WORKER) diff --git a/webpack/manifest.ts b/webpack/manifest.ts index 73bba8e12b..d9c3422635 100644 --- a/webpack/manifest.ts +++ b/webpack/manifest.ts @@ -174,6 +174,12 @@ const buildManifestCommons = (vendor: string): Omit