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
parent
f90a52c7d6
commit
82184b2882
22
web/package-lock.json
generated
22
web/package-lock.json
generated
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -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"
|
||||
|
|
|
|||
|
|
@ -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">
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
||||
|
|
|
|||
Reference in a new issue