habsi/authentik
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

stages/authenticator_validate: implement validation, add button to go back to device picker

Browse Source
This commit is contained in:
Jens Langhammer
2021-02-25 12:06:05 +01:00
parent 007676b400
commit 0f169f176d
8 changed files with 146 additions and 103 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
web/src/elements/stages/authenticator_validate/AuthenticatorValidateStage.ts
View File

@ -23,7 +23,8 @@ export interface AuthenticatorValidateStageChallenge extends WithUserInfoChallen
}
export interface AuthenticatorValidateStageChallengeResponse {
response: DeviceChallenge;
code: string;
webauthn: string;
}
@customElement("ak-stage-authenticator-validate")
@ -145,13 +146,15 @@ export class AuthenticatorValidateStage extends BaseStage implements StageHost {
${gettext("Select an identification method.")}
</p>`}
</header>
<div class="pf-c-login__main-body">
${this.selectedDeviceChallenge ? this.renderDeviceChallenge() : this.renderDevicePicker()}
</div>
<footer class="pf-c-login__main-footer">
<ul class="pf-c-login__main-footer-links">
</ul>
</footer>`;
${this.selectedDeviceChallenge ?
this.renderDeviceChallenge() :
html`<div class="pf-c-login__main-body">
${this.renderDevicePicker()}
</div>
<footer class="pf-c-login__main-footer">
<ul class="pf-c-login__main-footer-links">
</ul>
</footer>`}`;
}
}

84
web/src/elements/stages/authenticator_validate/AuthenticatorValidateStageCode.ts
View File

@ -2,7 +2,8 @@ import { gettext } from "django";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../../common/styles";
import { BaseStage } from "../base";
import { AuthenticatorValidateStageChallenge, DeviceChallenge } from "./AuthenticatorValidateStage";
import { AuthenticatorValidateStage, AuthenticatorValidateStageChallenge, DeviceChallenge } from "./AuthenticatorValidateStage";
import "../form";
@customElement("ak-stage-authenticator-validate-code")
export class AuthenticatorValidateStageWebCode extends BaseStage {
@ -21,44 +22,55 @@ export class AuthenticatorValidateStageWebCode extends BaseStage {
if (!this.challenge) {
return html`<ak-loading-state></ak-loading-state>`;
}
return html`<form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
<div class="pf-c-form__group">
<div class="form-control-static">
<div class="left">
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
${this.challenge.pending_user}
</div>
<div class="right">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div>
return html`<div class="pf-c-login__main-body">
<form class="pf-c-form" @submit=${(e: Event) => { this.submitForm(e); }}>
<div class="pf-c-form__group">
<div class="form-control-static">
<div class="left">
<img class="pf-c-avatar" src="${this.challenge.pending_user_avatar}" alt="${gettext("User's avatar")}">
${this.challenge.pending_user}
</div>
<div class="right">
<a href="/flows/-/cancel/">${gettext("Not you?")}</a>
</div>
</div>
<input type="hidden" name="device_class" value=${this.deviceChallenge?.device_class}>
<input type="hidden" name="device_uid" value=${this.deviceChallenge?.device_uid}>
</div>
<ak-form-element
label="${gettext("Code")}"
?required="${true}"
class="pf-c-form__group"
.errors=${(this.challenge?.response_errors || {})["code"]}>
<!-- @ts-ignore -->
<input type="text"
name="code"
inputmode="numeric"
pattern="[0-9]*"
placeholder="${gettext("Please enter your TOTP Code")}"
autofocus=""
autocomplete="one-time-code"
class="pf-c-form-control"
required="">
</ak-form-element>
<ak-form-element
label="${gettext("Code")}"
?required="${true}"
class="pf-c-form__group"
.errors=${(this.challenge?.response_errors || {})["code"]}>
<!-- @ts-ignore -->
<input type="text"
name="challenge"
inputmode="numeric"
pattern="[0-9]*"
placeholder="${gettext("Please enter your TOTP Code")}"
autofocus=""
autocomplete="one-time-code"
class="pf-c-form-control"
required="">
</ak-form-element>
<div class="pf-c-form__group pf-m-action">
<button type="submit" class="pf-c-button pf-m-primary pf-m-block">
${gettext("Continue")}
</button>
</div>
</form>`;
<div class="pf-c-form__group pf-m-action">
<button type="submit" class="pf-c-button pf-m-primary pf-m-block">
${gettext("Continue")}
</button>
</div>
</form>
</div>
<footer class="pf-c-login__main-footer">
<ul class="pf-c-login__main-footer-links">
<li class="pf-c-login__main-footer-links-item">
<button class="pf-c-button pf-m-secondary pf-m-block" @click=${() => {
if (!this.host) return;
(this.host as AuthenticatorValidateStage).selectedDeviceChallenge = undefined;
}}>
${gettext("Return to device picker")}
</button>
</li>
</ul>
</footer>`;
}
}

31
web/src/elements/stages/authenticator_validate/AuthenticatorValidateStageWebAuthn.ts
View File

@ -1,9 +1,10 @@
import { gettext } from "django";
import { customElement, html, property, TemplateResult } from "lit-element";
import { CSSResult, customElement, html, property, TemplateResult } from "lit-element";
import { COMMON_STYLES } from "../../../common/styles";
import { SpinnerSize } from "../../Spinner";
import { transformAssertionForServer, transformCredentialRequestOptions } from "../authenticator_webauthn/utils";
import { BaseStage } from "../base";
import { AuthenticatorValidateStageChallenge, DeviceChallenge } from "./AuthenticatorValidateStage";
import { AuthenticatorValidateStage, AuthenticatorValidateStageChallenge, DeviceChallenge } from "./AuthenticatorValidateStage";
@customElement("ak-stage-authenticator-validate-webauthn")
export class AuthenticatorValidateStageWebAuthn extends BaseStage {
@ -20,6 +21,10 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage {
@property()
authenticateMessage = "";
static get styles(): CSSResult[] {
return COMMON_STYLES;
}
async authenticate(): Promise<void> {
// convert certain members of the PublicKeyCredentialRequestOptions into
// byte arrays as expected by the spec.
@ -47,11 +52,7 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage {
// post the assertion to the server for verification.
try {
const formData = new FormData();
formData.set("response", JSON.stringify(<DeviceChallenge>{
device_class: this.deviceChallenge?.device_class,
device_uid: this.deviceChallenge?.device_uid,
challenge: transformedAssertionForServer,
}));
formData.set("webauthn", JSON.stringify(transformedAssertionForServer));
await this.host?.submit(formData);
} catch (err) {
throw new Error(gettext(`Error when validating assertion on server: ${err}`));
@ -76,7 +77,7 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage {
}
render(): TemplateResult {
return html`<div class="">
return html`<div class="pf-c-login__main-body">
${this.authenticateRunning ?
html`<div class="pf-c-empty-state__content">
<div class="pf-l-bullseye">
@ -94,7 +95,19 @@ export class AuthenticatorValidateStageWebAuthn extends BaseStage {
${gettext("Retry authentication")}
</button>
</div>`}
</div>`;
</div>
<footer class="pf-c-login__main-footer">
<ul class="pf-c-login__main-footer-links">
<li class="pf-c-login__main-footer-links-item">
<button class="pf-c-button pf-m-secondary pf-m-block" @click=${() => {
if (!this.host) return;
(this.host as AuthenticatorValidateStage).selectedDeviceChallenge = undefined;
}}>
${gettext("Return to device picker")}
</button>
</li>
</ul>
</footer>`;
}
}