From 82184b28826dbd4c42109fe3e2487e17a645047d Mon Sep 17 00:00:00 2001 From: Jens Langhammer Date: Sun, 1 Jan 2023 18:49:41 +0100 Subject: [PATCH] web/flows: fix alternate captchas not loading closes #4321 Signed-off-by: Jens Langhammer --- web/package-lock.json | 22 ++++ web/package.json | 2 + web/src/flow/stages/captcha/CaptchaStage.ts | 108 +++++++++++++++++--- website/docs/flow/stages/captcha/index.md | 6 +- 4 files changed, 120 insertions(+), 18 deletions(-) diff --git a/web/package-lock.json b/web/package-lock.json index 30b4797c2..b1f27f871 100644 --- a/web/package-lock.json +++ b/web/package-lock.json @@ -22,6 +22,7 @@ "@formatjs/intl-listformat": "^7.1.7", "@fortawesome/fontawesome-free": "^6.2.1", "@goauthentik/api": "^2022.12.1-1672593591", + "@hcaptcha/types": "^1.0.3", "@jackfranklin/rollup-plugin-markdown": "^0.4.0", "@lingui/cli": "^3.15.0", "@lingui/core": "^3.15.0", @@ -71,6 +72,7 @@ "rollup-plugin-terser": "^7.0.2", "ts-lit-plugin": "^1.2.1", "tslib": "^2.4.1", + "turnstile-types": "^1.0.2", "typescript": "^4.9.4", "webcomponent-qr-code": "^1.1.0", "yaml": "^2.2.0" @@ -1961,6 +1963,11 @@ "resolved": "https://registry.npmjs.org/@goauthentik/api/-/api-2022.12.1-1672593591.tgz", "integrity": "sha512-m/7fe3azj8foouf2pZgkoJ8phYFJjd0ORr45+PlETgpeaCGes8GI3PgA3ZBqUQR4cn4OvFuA/OxWUpw4XvzKmg==" }, + "node_modules/@hcaptcha/types": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@hcaptcha/types/-/types-1.0.3.tgz", + "integrity": "sha512-1mbU6eSGawRrqeahRrOzZo/SVLI6oZ5/azuBpSyVrRRR96CnS3fOVDWfzxpngfxKD0/I9Rwu6c/3ITqD8rXeTQ==" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.8", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", @@ -9511,6 +9518,11 @@ "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz", "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==" }, + "node_modules/turnstile-types": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/turnstile-types/-/turnstile-types-1.0.2.tgz", + "integrity": "sha512-Y98xYhxf9xtYuu1QCrQm7og0o2zw2bGdsyUNXeWgPVXsHFkJIwTrRY6o3Oioa9PjFtoYM+oHe1n23V+oE27WUQ==" + }, "node_modules/type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", @@ -11400,6 +11412,11 @@ "resolved": "https://registry.npmjs.org/@goauthentik/api/-/api-2022.12.1-1672593591.tgz", "integrity": "sha512-m/7fe3azj8foouf2pZgkoJ8phYFJjd0ORr45+PlETgpeaCGes8GI3PgA3ZBqUQR4cn4OvFuA/OxWUpw4XvzKmg==" }, + "@hcaptcha/types": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@hcaptcha/types/-/types-1.0.3.tgz", + "integrity": "sha512-1mbU6eSGawRrqeahRrOzZo/SVLI6oZ5/azuBpSyVrRRR96CnS3fOVDWfzxpngfxKD0/I9Rwu6c/3ITqD8rXeTQ==" + }, "@humanwhocodes/config-array": { "version": "0.11.8", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz", @@ -17025,6 +17042,11 @@ } } }, + "turnstile-types": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/turnstile-types/-/turnstile-types-1.0.2.tgz", + "integrity": "sha512-Y98xYhxf9xtYuu1QCrQm7og0o2zw2bGdsyUNXeWgPVXsHFkJIwTrRY6o3Oioa9PjFtoYM+oHe1n23V+oE27WUQ==" + }, "type-check": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz", diff --git a/web/package.json b/web/package.json index 2d0d26ec8..543c7a518 100644 --- a/web/package.json +++ b/web/package.json @@ -65,6 +65,7 @@ "@formatjs/intl-listformat": "^7.1.7", "@fortawesome/fontawesome-free": "^6.2.1", "@goauthentik/api": "^2022.12.1-1672593591", + "@hcaptcha/types": "^1.0.3", "@jackfranklin/rollup-plugin-markdown": "^0.4.0", "@lingui/cli": "^3.15.0", "@lingui/core": "^3.15.0", @@ -114,6 +115,7 @@ "rollup-plugin-terser": "^7.0.2", "ts-lit-plugin": "^1.2.1", "tslib": "^2.4.1", + "turnstile-types": "^1.0.2", "typescript": "^4.9.4", "webcomponent-qr-code": "^1.1.0", "yaml": "^2.2.0" diff --git a/web/src/flow/stages/captcha/CaptchaStage.ts b/web/src/flow/stages/captcha/CaptchaStage.ts index f4748b1f9..42ca38d94 100644 --- a/web/src/flow/stages/captcha/CaptchaStage.ts +++ b/web/src/flow/stages/captcha/CaptchaStage.ts @@ -1,13 +1,16 @@ +/// +/// import "@goauthentik/elements/EmptyState"; import { PFSize } from "@goauthentik/elements/Spinner"; import "@goauthentik/elements/forms/FormElement"; import "@goauthentik/flow/FormStatic"; +import "@goauthentik/flow/stages/access_denied/AccessDeniedStage"; import { BaseStage } from "@goauthentik/flow/stages/base"; import { t } from "@lingui/macro"; import { CSSResult, TemplateResult, html } from "lit"; -import { customElement } from "lit/decorators.js"; +import { customElement, state } from "lit/decorators.js"; import { ifDefined } from "lit/directives/if-defined.js"; import AKGlobal from "@goauthentik/common/styles/authentik.css"; @@ -26,6 +29,11 @@ export class CaptchaStage extends BaseStage { console.debug("authentik/stages/captcha: script loaded"); - grecaptcha.ready(() => { - if (!this.challenge?.siteKey) return; - console.debug("authentik/stages/captcha: ready"); - const captchaId = grecaptcha.render(captchaContainer, { - sitekey: this.challenge.siteKey, - callback: (token) => { - this.host?.submit({ - token: token, - }); - }, - size: "invisible", - }); - grecaptcha.execute(captchaId); + let found = false; + let lastError = undefined; + this.handlers.forEach((handler) => { + let handlerFound = false; + try { + console.debug(`authentik/stages/captcha[${handler.name}]: trying handler`); + handlerFound = handler.apply(this, [captchaContainer]); + if (handlerFound) { + console.debug( + `authentik/stages/captcha[${handler.name}]: handler succeeded`, + ); + found = true; + } + } catch (exc) { + console.debug( + `authentik/stages/captcha[${handler.name}]: handler failed: ${exc}`, + ); + if (handlerFound) { + lastError = exc; + } + } }); + if (!found && lastError) { + this.error = (lastError as Error).toString(); + } }; document.head.appendChild(script); } + handleGReCaptcha(container: HTMLDivElement): boolean { + if (!Object.hasOwn(window, "grecaptcha")) { + return false; + } + grecaptcha.ready(() => { + const captchaId = grecaptcha.render(container, { + sitekey: this.challenge.siteKey, + callback: (token) => { + this.host?.submit({ + token: token, + }); + }, + size: "invisible", + }); + grecaptcha.execute(captchaId); + }); + return true; + } + + handleHCaptcha(container: HTMLDivElement): boolean { + if (!Object.hasOwn(window, "hcaptcha")) { + return false; + } + const captchaId = hcaptcha.render(container, { + sitekey: this.challenge.siteKey, + size: "invisible", + callback: (token) => { + this.host?.submit({ + token: token, + }); + }, + }); + hcaptcha.execute(captchaId); + return true; + } + + handleTurnstile(container: HTMLDivElement): boolean { + if (!Object.hasOwn(window, "turnstile")) { + return false; + } + window.turnstile.render(container, { + sitekey: this.challenge.siteKey, + size: "invisible", + callback: (token) => { + this.host?.submit({ + token: token, + }); + }, + }); + return true; + } + render(): TemplateResult { if (!this.challenge) { return html` `; @@ -73,9 +144,12 @@ export class CaptchaStage extends BaseStage -
- -
+ ${this.error + ? html` + ` + : html`
+ +
`}