From afc91286533c9c840ef59136496ef681e2dfba06 Mon Sep 17 00:00:00 2001 From: Kyle Spearrin Date: Tue, 24 Oct 2023 13:37:48 -0500 Subject: [PATCH] [PM-4419] Add lastpass direct importer to browser (#6638) * Split up import/export into separate modules * Fix routing and apply PR feedback * Renamed OrganizationExport exports to OrganizationVaultExport * Make import dialogs standalone and move them to libs/importer * Make import.component re-usable - Move functionality which was previously present on the org-import.component into import.component - Move import.component into libs/importer Make import.component standalone Create import-web.component to represent Web UI Fix module imports and routing Remove unused org-import-files * Enable importing on deskop Create import-dialog Create file-menu entry to open import-dialog Extend messages.json to include all the necessary messages from shared components * Renamed filenames according to export rename * Make ImportWebComponent standalone, simplify routing * Pass organizationId as Input to ImportComponent * use formLoading and formDisabled outputs * use formLoading & formDisabled in desktop * Emit an event when the import succeeds Remove Angular router from base-component as other clients might not have routing (i.e. desktop) Move logic that happened on web successful import into the import-web.component * Enable importing on deskop Create import-dialog Create file-menu entry to open import-dialog Extend messages.json to include all the necessary messages from shared components * use formLoading & formDisabled in desktop * Add missing message for importBlockedByPolicy callout * Remove commented code for submit button * Implement onSuccessfulImport to close dialog on success * fix table themes on desktop & browser * fix fileSelector button styles * update selectors to use tools prefix; remove unused selectors * update selectors * Wall off UI components in libs/importer Create barrel-file for libs/importer/components Remove components and dialog exports from libs/importer/index.ts Extend libs/shared/tsconfig.libs.json to include @bitwarden/importer/ui -> libs/importer/components Extend apps/web/tsconfig.ts to include @bitwarden/importer/ui Update all usages * Rename @bitwarden/importer to @bitwarden/importer/core Create more barrel files in libs/importer/* Update imports within libs/importer Extend tsconfig files Update imports in web, desktop, browser and cli * import-lastpass wip * Lazy-load the ImportWebComponent via both routes * Fix import path for ImportComponent * add validation; add shared folders field * clean up logic * fill fileContent on account change * Use SharedModule as import in import-web.component * show spinner on pending validation; properly debounce; refactor to loadCSVData func * fix pending submit guard * hide on web, show on desktop & browser * reset user agent fieldset styles * fix validation * File selector should be displayed as secondary * update validation * Fix setUserTypeContext always throwing * refactor to password dialog approach * remove control on destroy; dont submit on enter keydown * helper to serialize vault accounts (#6556) * helper to serialize vault accounts * prettier * add prompts * Add missing messages for file-password-prompt * Add missing messages for import-error-dialog * Add missing message for import-success-dialog * Create client-info * Separate submit and handling import, add error-handling * Move catch and error handling into submit * Remove AsyncValidator logic from handleImport * Add support for filtering shared accounts * add sso flow to lp import (#6574) * stub out some sso flow * use computer props * lastpass callback * baseOpenIDConnectAuthority * openIDConnectAuthorityBase * comments * camelCase user type context model * processSigninResponse * Refactor handleImport * use large dialogSize * remove extra setUserTypeContext * fix passwordGenerationService provider; pass all errors to ValidationErrors * add await SSO dialog & logic * Move lastpass related files into separate folder * Use bitSubmit to override submit preventDefault (#6607) Co-authored-by: Daniel James Smith * Use large dialogSize * revert jslib changes * PM-4398 - Add missing importWarning * make ui class methods async * add LastPassDirectImportService * update error handling * add OOB methods (manual passcode only) * fix typo * respond to SSO callback * localize error messages * remove uneeded comment * update i18n * add await sso i18n * add not implemented error to service * fix getting k2 * fix k1 bugs * null checks should not be strict * update awaiting sso dialog * update approveDuoWebSdk * add browser lastpass oidc/sso connector * add getRedirectUrlWithParams * params * rename to getOidcRedirectUrlWithParams * refactor oob login flow * Add messages needed for Lastpass import flow Taken from https://github.com/bitwarden/clients/pull/6541/files#diff-47e9af6d0d7d691a507534f7955edaa9fb37be8cf1c1981fd2ba898e99b6130d * Update apps/browser/src/connectors/sso.ts Co-authored-by: Cesar Gonzalez * Update libs/importer/src/components/lastpass/import-lastpass.component.ts Co-authored-by: Cesar Gonzalez * fix error * Removing fieldset due to merge of https://github.com/bitwarden/clients/pull/6626 * Add sso-connector to manifest.v3 * Make linter happy * Refactoring to push logic into the service vs the component Move all methods related to MFA-UI into a LastPassDirectImportUIService Move all logic around the import into a LastPassDirectImportService The component now only has the necessary flows but no knowledge on how to use the lastpass import lib or the need for a OIDC client * Remove unneeded passwordGenerationService * move all import logic to service * apply code review: remove name attributes; use protected fields; use formGroup.value * rename submit method and add comment * update textarea id * update i18n * remove rogue todo comment * Add missing messages forLastpass import * extract helper asyncValidatorsFinished * Remove files related to DuoUI we didn't need to differentiate for MFA via Duo * Add missing import * use clientType * triple = * lastpassAuthResult for web sso connector * remove browser sso connector * use web vault for oidc redirect url * revert formGroup.value access * process lastpassAuthResult * simplify message handler logic * consolidate logic for lastpass auth result * swap lastpass logic in sso connector * add email to signInRequest * add try again error message * add try again i18n * consistent clientinfo id (#6654) --------- Co-authored-by: William Martin * hide on browser * show LP importer on browser client * add missing i18n to browser * add lastpass prefix * add shared i18n copy to web and browser * rename deeplink * use protected field * rename el ids * refactor: remove nested conditional * update form ids in consuming client components * remove unnecessary return statement * fix file id * use ngIf * use hidden because of getElementById * Remove OIDC lib logging * Forward LP sso callback message to LP direct import service * Add missing collection label * Add missing `invalidFilePassword` to messages.json --------- Co-authored-by: Daniel James Smith Co-authored-by: Daniel James Smith <2670567+djsmith85@users.noreply.github.com> Co-authored-by: William Martin Co-authored-by: Cesar Gonzalez --- apps/browser/src/_locales/en/messages.json | 60 +++++++++++++++++++ .../src/autofill/content/message_handler.ts | 1 + .../src/background/runtime.background.ts | 25 +++++--- apps/web/src/connectors/sso.ts | 11 ++-- .../src/components/import.component.ts | 3 +- .../lastpass-direct-import.service.ts | 31 ++++++++-- 6 files changed, 112 insertions(+), 19 deletions(-) diff --git a/apps/browser/src/_locales/en/messages.json b/apps/browser/src/_locales/en/messages.json index ec59a1fef0f..52ad849a23a 100644 --- a/apps/browser/src/_locales/en/messages.json +++ b/apps/browser/src/_locales/en/messages.json @@ -2501,6 +2501,9 @@ "importEncKeyError": { "message": "Error decrypting the exported file. Your encryption key does not match the encryption key used export the data." }, + "invalidFilePassword": { + "message": "Invalid file password, please use the password you entered when you created the export file." + }, "importDestination": { "message": "Import destination" }, @@ -2611,8 +2614,65 @@ "useBrowserName": { "message": "Use browser" }, + "multifactorAuthenticationCancelled": { + "message": "Multifactor authentication cancelled" + }, + "noLastPassDataFound": { + "message": "No LastPass data found" + }, + "incorrectUsernameOrPassword": { + "message": "Incorrect username or password" + }, + "multifactorAuthenticationFailed": { + "message": "Multifactor authentication failed" + }, + "includeSharedFolders": { + "message": "Include shared folders" + }, + "lastPassEmail": { + "message": "LastPass Email" + }, + "importingYourAccount": { + "message": "Importing your account..." + }, + "lastPassMFARequired": { + "message": "LastPass multifactor authentication required" + }, + "lastPassMFADesc": { + "message": "Enter your one-time passcode from your authentication app" + }, + "lastPassOOBDesc": { + "message": "Approve the login request in your authentication app or enter a one-time passcode." + }, + "passcode": { + "message": "Passcode" + }, + "lastPassMasterPassword": { + "message": "LastPass master password" + }, + "lastPassAuthRequired": { + "message": "LastPass authentication required" + }, + "awaitingSSO": { + "message": "Awaiting SSO authentication" + }, + "awaitingSSODesc": { + "message": "Please continue to log in using your company credentials." + }, "seeDetailedInstructions": { "message": "See detailed instructions on our help site at", "description": "This is followed a by a hyperlink to the help website." + }, + "importDirectlyFromLastPass": { + "message": "Import directly from LastPass" + }, + "importFromCSV": { + "message": "Import from CSV" + }, + "lastPassTryAgainCheckEmail": { + "message": "Try again or look for an email from LastPass to verify it's you." + }, + "collection": { + "message": "Collection" } } diff --git a/apps/browser/src/autofill/content/message_handler.ts b/apps/browser/src/autofill/content/message_handler.ts index 5ef0abdb7cc..3fdf0f20124 100644 --- a/apps/browser/src/autofill/content/message_handler.ts +++ b/apps/browser/src/autofill/content/message_handler.ts @@ -10,6 +10,7 @@ window.addEventListener( command: event.data.command, code: event.data.code, state: event.data.state, + lastpass: event.data.lastpass, referrer: event.source.location.hostname, }); } diff --git a/apps/browser/src/background/runtime.background.ts b/apps/browser/src/background/runtime.background.ts index 53711c1dc11..159efc7de78 100644 --- a/apps/browser/src/background/runtime.background.ts +++ b/apps/browser/src/background/runtime.background.ts @@ -259,15 +259,22 @@ export default class RuntimeBackground { return; } - try { - BrowserApi.createNewTab( - "popup/index.html?uilocation=popout#/sso?code=" + - encodeURIComponent(msg.code) + - "&state=" + - encodeURIComponent(msg.state) - ); - } catch { - this.logService.error("Unable to open sso popout tab"); + if (msg.lastpass) { + this.messagingService.send("importCallbackLastPass", { + code: msg.code, + state: msg.state, + }); + } else { + try { + BrowserApi.createNewTab( + "popup/index.html?uilocation=popout#/sso?code=" + + encodeURIComponent(msg.code) + + "&state=" + + encodeURIComponent(msg.state) + ); + } catch { + this.logService.error("Unable to open sso popout tab"); + } } break; } diff --git a/apps/web/src/connectors/sso.ts b/apps/web/src/connectors/sso.ts index 9195c61f9c0..d51f14b33da 100644 --- a/apps/web/src/connectors/sso.ts +++ b/apps/web/src/connectors/sso.ts @@ -5,9 +5,12 @@ require("./sso.scss"); document.addEventListener("DOMContentLoaded", () => { const code = getQsParam("code"); const state = getQsParam("state"); + const lastpass = getQsParam("lp"); - if (state != null && state.includes(":clientId=browser")) { - initiateBrowserSso(code, state); + if (lastpass === "1") { + initiateBrowserSso(code, state, true); + } else if (state != null && state.includes(":clientId=browser")) { + initiateBrowserSso(code, state, false); } else { window.location.href = window.location.origin + "/#/sso?code=" + code + "&state=" + state; // Match any characters between "_returnUri='" and the next "'" @@ -20,8 +23,8 @@ document.addEventListener("DOMContentLoaded", () => { } }); -function initiateBrowserSso(code: string, state: string) { - window.postMessage({ command: "authResult", code: code, state: state }, "*"); +function initiateBrowserSso(code: string, state: string, lastpass: boolean) { + window.postMessage({ command: "authResult", code: code, state: state, lastpass: lastpass }, "*"); const handOffMessage = ("; " + document.cookie) .split("; ssoHandOffMessage=") .pop() diff --git a/libs/importer/src/components/import.component.ts b/libs/importer/src/components/import.component.ts index a72e3c347c9..baf8718eed8 100644 --- a/libs/importer/src/components/import.component.ts +++ b/libs/importer/src/components/import.component.ts @@ -188,7 +188,8 @@ export class ImportComponent implements OnInit, OnDestroy { protected get showLastPassToggle(): boolean { return ( this.format === "lastpasscsv" && - this.platformUtilsService.getClientType() === ClientType.Desktop + (this.platformUtilsService.getClientType() === ClientType.Desktop || + this.platformUtilsService.getClientType() === ClientType.Browser) ); } protected get showLastPassOptions(): boolean { diff --git a/libs/importer/src/components/lastpass/lastpass-direct-import.service.ts b/libs/importer/src/components/lastpass/lastpass-direct-import.service.ts index c3687cda305..4995e379139 100644 --- a/libs/importer/src/components/lastpass/lastpass-direct-import.service.ts +++ b/libs/importer/src/components/lastpass/lastpass-direct-import.service.ts @@ -3,9 +3,11 @@ import { OidcClient } from "oidc-client-ts"; import { Subject, firstValueFrom } from "rxjs"; import { TokenService } from "@bitwarden/common/auth/abstractions/token.service"; +import { ClientType } from "@bitwarden/common/enums"; import { AppIdService } from "@bitwarden/common/platform/abstractions/app-id.service"; import { BroadcasterService } from "@bitwarden/common/platform/abstractions/broadcaster.service"; import { CryptoFunctionService } from "@bitwarden/common/platform/abstractions/crypto-function.service"; +import { EnvironmentService } from "@bitwarden/common/platform/abstractions/environment.service"; import { PlatformUtilsService } from "@bitwarden/common/platform/abstractions/platform-utils.service"; import { Utils } from "@bitwarden/common/platform/misc/utils"; import { PasswordGenerationServiceAbstraction } from "@bitwarden/common/tools/generator/password"; @@ -32,13 +34,14 @@ export class LastPassDirectImportService { constructor( private tokenService: TokenService, private cryptoFunctionService: CryptoFunctionService, + private environmentService: EnvironmentService, private appIdService: AppIdService, private lastPassDirectImportUIService: LastPassDirectImportUIService, + private platformUtilsService: PlatformUtilsService, private passwordGenerationService: PasswordGenerationServiceAbstraction, private broadcasterService: BroadcasterService, private ngZone: NgZone, - private dialogService: DialogService, - private platformUtilsService: PlatformUtilsService + private dialogService: DialogService ) { this.vault = new Vault(this.cryptoFunctionService, this.tokenService); @@ -110,8 +113,7 @@ export class LastPassDirectImportService { this.oidcClient = new OidcClient({ authority: this.vault.userType.openIDConnectAuthorityBase, client_id: this.vault.userType.openIDConnectClientId, - // TODO: this is different per client - redirect_uri: "bitwarden://import-callback-lp", + redirect_uri: this.getOidcRedirectUrl(), response_type: "code", scope: this.vault.userType.oidcScope, response_mode: "query", @@ -131,6 +133,25 @@ export class LastPassDirectImportService { }); } + private getOidcRedirectUrlWithParams(oidcCode: string, oidcState: string) { + const redirectUri = this.oidcClient.settings.redirect_uri; + const params = "code=" + oidcCode + "&state=" + oidcState; + if (redirectUri.indexOf("bitwarden://") === 0) { + return redirectUri + "/?" + params; + } + + return redirectUri + "&" + params; + } + + private getOidcRedirectUrl() { + const clientType = this.platformUtilsService.getClientType(); + if (clientType === ClientType.Desktop) { + return "bitwarden://import-callback-lp"; + } + const webUrl = this.environmentService.getWebVaultUrl(); + return webUrl + "/sso-connector.html?lp=1"; + } + private async handleStandardImport( email: string, password: string, @@ -150,7 +171,7 @@ export class LastPassDirectImportService { includeSharedFolders: boolean ): Promise { const response = await this.oidcClient.processSigninResponse( - this.oidcClient.settings.redirect_uri + "/?code=" + oidcCode + "&state=" + oidcState + this.getOidcRedirectUrlWithParams(oidcCode, oidcState) ); const userState = response.userState as any;