mirror of
https://github.com/GSA/notifications-admin.git
synced 2026-02-06 19:34:15 -05:00
d05f127e41
the js fetch function is really not designed to work with 302s. when it receives a 302, it automatically follows it and fetches the next page. This is awkward because I don't want js to do all this in ajax, I want the browser to get the new URL so it can load the page. A better approach is to view the admin endpoint as a more pure API: the js sends a request for authentication to the admin app, and the admin app responds with a 200 indicating success, and then a payload of relevant data with that. The relevant data in this case is "Which URL should I redirect to", it might be the user's list of services page, or it might be a page telling them that their email needs revalidating.
64 lines
2.2 KiB
JavaScript
64 lines
2.2 KiB
JavaScript
(function (window) {
|
|
"use strict";
|
|
|
|
window.GOVUK.Modules.AuthenticateSecurityKey = function () {
|
|
this.start = function (component) {
|
|
$(component)
|
|
.on('click', function (event) {
|
|
event.preventDefault();
|
|
|
|
fetch('/webauthn/authenticate')
|
|
.then(response => {
|
|
if (!response.ok) {
|
|
throw Error(response.statusText);
|
|
}
|
|
|
|
return response.arrayBuffer();
|
|
})
|
|
.then(data => {
|
|
var options = window.CBOR.decode(data);
|
|
// triggers browser dialogue to login with authenticator
|
|
return window.navigator.credentials.get(options);
|
|
})
|
|
.then(credential => {
|
|
return fetch('/webauthn/authenticate', {
|
|
method: 'POST',
|
|
headers: { 'X-CSRFToken': component.data('csrfToken') },
|
|
body: window.CBOR.encode({
|
|
credentialId: new Uint8Array(credential.rawId),
|
|
authenticatorData: new Uint8Array(credential.response.authenticatorData),
|
|
signature: new Uint8Array(credential.response.signature),
|
|
clientDataJSON: new Uint8Array(credential.response.clientDataJSON),
|
|
})
|
|
});
|
|
})
|
|
.then(response => {
|
|
if (response.status === 403) {
|
|
// flask will have `flash`ed an error message up
|
|
window.location.reload();
|
|
return;
|
|
}
|
|
|
|
return response.arrayBuffer()
|
|
.then(cbor => {
|
|
return Promise.resolve(window.CBOR.decode(cbor));
|
|
})
|
|
.catch(() => {
|
|
throw Error(response.statusText);
|
|
})
|
|
.then(data => {
|
|
window.location = data.redirect_url;
|
|
});
|
|
})
|
|
.catch(error => {
|
|
console.error(error);
|
|
// some browsers will show an error dialogue for some
|
|
// errors; to be safe we always pop up an alert
|
|
var message = error.message || error;
|
|
alert('Error during authentication.\n\n' + message);
|
|
});
|
|
});
|
|
};
|
|
};
|
|
}) (window);
|