web/flows: fix alternate captchas not loading

closes #4321

Signed-off-by: Jens Langhammer <jens.langhammer@beryju.org>
This commit is contained in:
Jens Langhammer 2023-01-01 18:49:41 +01:00
parent f90a52c7d6
commit 82184b2882
No known key found for this signature in database
4 changed files with 120 additions and 18 deletions

22
web/package-lock.json generated
View File

@ -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",

View File

@ -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"

View File

@ -1,13 +1,16 @@
///<reference types="@hcaptcha/types"/>
///<reference types="turnstile-types"/>
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<CaptchaChallenge, CaptchaChallengeRe
return [PFBase, PFLogin, PFForm, PFFormControl, PFTitle, PFButton, AKGlobal];
}
handlers = [this.handleGReCaptcha, this.handleHCaptcha, this.handleTurnstile];
@state()
error?: string;
firstUpdated(): void {
const script = document.createElement("script");
script.src = this.challenge.jsUrl;
@ -35,24 +43,87 @@ export class CaptchaStage extends BaseStage<CaptchaChallenge, CaptchaChallengeRe
document.body.appendChild(captchaContainer);
script.onload = () => {
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`<ak-empty-state ?loading="${true}" header=${t`Loading`}> </ak-empty-state>`;
@ -73,9 +144,12 @@ export class CaptchaStage extends BaseStage<CaptchaChallenge, CaptchaChallengeRe
>
</div>
</ak-form-static>
<div class="ak-loading">
<ak-spinner size=${PFSize.XLarge}></ak-spinner>
</div>
${this.error
? html`<ak-stage-access-denied-icon errorMessage=${ifDefined(this.error)}>
</ak-stage-access-denied-icon>`
: html`<div>
<ak-spinner size=${PFSize.XLarge}></ak-spinner>
</div>`}
</form>
</div>
<footer class="pf-c-login__main-footer">

View File

@ -2,7 +2,11 @@
title: Captcha stage
---
This stage adds a form of verification using [Google's ReCaptcha](https://www.google.com/recaptcha/intro/v3.html) or compatible services.
This stage adds a form of verification using [Google's ReCaptcha](https://www.google.com/recaptcha/intro/v3.html) or compatible services. Currently supported implementations:
- ReCaptcha
- hCaptcha
- Turnstile
### Google ReCaptcha