mirror of
https://github.com/Bubka/2FAuth.git
synced 2025-06-23 13:31:27 +02:00
Complete webauthn sign in
This commit is contained in:
parent
c97bc26952
commit
bb4e79560c
@ -26,6 +26,7 @@
|
|||||||
import { httpClientFactory } from '@/services/httpClientFactory'
|
import { httpClientFactory } from '@/services/httpClientFactory'
|
||||||
import { webauthnAbortService } from '@/services/webauthn/webauthnAbortService'
|
import { webauthnAbortService } from '@/services/webauthn/webauthnAbortService'
|
||||||
import { identifyRegistrationError } from '@/services/webauthn/identifyRegistrationError'
|
import { identifyRegistrationError } from '@/services/webauthn/identifyRegistrationError'
|
||||||
|
import { identifyAuthenticationError } from '@/services/webauthn/identifyAuthenticationError'
|
||||||
|
|
||||||
const webClient = httpClientFactory('web')
|
const webClient = httpClientFactory('web')
|
||||||
|
|
||||||
@ -74,6 +75,43 @@ class WebauthnService {
|
|||||||
return webClient.post('/webauthn/register', publicKeyCredential, {returnError: true})
|
return webClient.post('/webauthn/register', publicKeyCredential, {returnError: true})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
async authenticate(email) {
|
||||||
|
|
||||||
|
// Check https context
|
||||||
|
if (!window.isSecureContext) {
|
||||||
|
err.message = 'errors.https_required'
|
||||||
|
return Promise.reject(err)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Check browser support
|
||||||
|
if (! WebauthnService.supportsWebAuthn) {
|
||||||
|
err.message = 'errors.browser_does_not_support_webauthn'
|
||||||
|
return Promise.reject(err)
|
||||||
|
}
|
||||||
|
|
||||||
|
const loginOptions = await webClient.post('/webauthn/login/options', { email: email }).then(response => response.data)
|
||||||
|
const publicKey = WebauthnService.parseIncomingServerOptions(loginOptions)
|
||||||
|
|
||||||
|
let options = { publicKey }
|
||||||
|
options.signal = webauthnAbortService.createNewAbortSignal()
|
||||||
|
|
||||||
|
const credentials = await navigator.credentials.get(options)
|
||||||
|
.catch(error => {
|
||||||
|
const webauthnError = identifyAuthenticationError(error, options)
|
||||||
|
return Promise.reject({
|
||||||
|
webauthn: true,
|
||||||
|
type: webauthnError.type,
|
||||||
|
message: webauthnError.phrase
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
let publicKeyCredential = WebauthnService.parseOutgoingCredentials(credentials)
|
||||||
|
publicKeyCredential.email = email
|
||||||
|
|
||||||
|
return webClient.post('/webauthn/login', publicKeyCredential, {returnError: true})
|
||||||
|
}
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Parses the Public Key Options received from the Server for the browser.
|
* Parses the Public Key Options received from the Server for the browser.
|
||||||
*
|
*
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
import { useUserStore } from '@/stores/user'
|
import { useUserStore } from '@/stores/user'
|
||||||
import { useNotifyStore } from '@/stores/notify'
|
import { useNotifyStore } from '@/stores/notify'
|
||||||
import { useAppSettingsStore } from '@/stores/appSettings'
|
import { useAppSettingsStore } from '@/stores/appSettings'
|
||||||
|
import { webauthnService } from '@/services/webauthn/webauthnService'
|
||||||
|
|
||||||
const $2fauth = inject('2fauth')
|
const $2fauth = inject('2fauth')
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
@ -10,16 +11,17 @@
|
|||||||
const notify = useNotifyStore()
|
const notify = useNotifyStore()
|
||||||
const appSettings = useAppSettingsStore()
|
const appSettings = useAppSettingsStore()
|
||||||
const showWebauthnForm = user.preferences.useWebauthnOnly ? true : useStorage($2fauth.prefix + 'showWebauthnForm', false)
|
const showWebauthnForm = user.preferences.useWebauthnOnly ? true : useStorage($2fauth.prefix + 'showWebauthnForm', false)
|
||||||
const formData = {
|
const form = reactive(new Form({
|
||||||
email: '',
|
email: '',
|
||||||
password: ''
|
password: ''
|
||||||
}
|
}))
|
||||||
const form = reactive(new Form(formData))
|
const isBusy = ref(false)
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* Toggle the form between legacy and webauthn method
|
* Toggle the form between legacy and webauthn method
|
||||||
*/
|
*/
|
||||||
function toggleForm() {
|
function toggleForm() {
|
||||||
|
form.clear()
|
||||||
showWebauthnForm.value = ! showWebauthnForm.value
|
showWebauthnForm.value = ! showWebauthnForm.value
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -28,8 +30,8 @@
|
|||||||
*/
|
*/
|
||||||
function LegacysignIn(e) {
|
function LegacysignIn(e) {
|
||||||
notify.clear()
|
notify.clear()
|
||||||
form.post('/user/login', {returnError: true})
|
|
||||||
.then(async (response) => {
|
form.post('/user/login', {returnError: true}).then(async (response) => {
|
||||||
await user.loginAs({
|
await user.loginAs({
|
||||||
name: response.data.name,
|
name: response.data.name,
|
||||||
email: response.data.email,
|
email: response.data.email,
|
||||||
@ -49,6 +51,46 @@
|
|||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Sign in using webauthn
|
||||||
|
*/
|
||||||
|
function webauthnLogin() {
|
||||||
|
notify.clear()
|
||||||
|
form.clear()
|
||||||
|
isBusy.value = true
|
||||||
|
|
||||||
|
webauthnService.authenticate(form.email).then(async (response) => {
|
||||||
|
await user.loginAs({
|
||||||
|
name: response.data.name,
|
||||||
|
email: response.data.email,
|
||||||
|
preferences: response.data.preferences,
|
||||||
|
isAdmin: response.data.is_admin,
|
||||||
|
})
|
||||||
|
|
||||||
|
router.push({ name: 'accounts' })
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
if ('webauthn' in error) {
|
||||||
|
if (error.name == 'is-warning') {
|
||||||
|
notify.warn({ text: trans(error.message) })
|
||||||
|
}
|
||||||
|
else notify.alert({ text: trans(error.message) })
|
||||||
|
}
|
||||||
|
else if( error.response.status === 401 ) {
|
||||||
|
notify.alert({text: trans('auth.forms.authentication_failed'), duration: 10000 })
|
||||||
|
}
|
||||||
|
else if( error.response.status == 422 ) {
|
||||||
|
form.errors.set(form.extractErrors(error.response))
|
||||||
|
}
|
||||||
|
else {
|
||||||
|
notify.error(error)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.finally(() => {
|
||||||
|
isBusy.value = false
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -59,7 +101,7 @@
|
|||||||
</div>
|
</div>
|
||||||
<form id="frmWebauthnLogin" @submit.prevent="webauthnLogin" @keydown="form.onKeydown($event)">
|
<form id="frmWebauthnLogin" @submit.prevent="webauthnLogin" @keydown="form.onKeydown($event)">
|
||||||
<FormField v-model="form.email" fieldName="email" :fieldError="form.errors.get('email')" inputType="email" label="auth.forms.email" autofocus />
|
<FormField v-model="form.email" fieldName="email" :fieldError="form.errors.get('email')" inputType="email" label="auth.forms.email" autofocus />
|
||||||
<FormButtons :isBusy="form.isBusy" caption="commons.continue" submitId="btnContinue"/>
|
<FormButtons :isBusy="isBusy" caption="commons.continue" submitId="btnContinue"/>
|
||||||
</form>
|
</form>
|
||||||
<div class="nav-links">
|
<div class="nav-links">
|
||||||
<p>
|
<p>
|
||||||
|
Loading…
x
Reference in New Issue
Block a user