Hi Paul,
You can try copying and updating the login widget with some modifications...
The way it works is when someone clicks on 'Login', the next step is an ajax post to determine if the login credentials are correct, and if so allow them in. The response from this ajax query contains a status which is usually 'success' but when MFA is enabled and the username/password is correct, the status returned is 'mfa_code_required'. The widget unfortunately only checks if the status is 'success' and this is why you get that nice red text asking you to enter a 6 digit code with nowhere to enter it.
I tried adding lines 35-37 to the OOB login widgets controller to check if the status is 'mfa_code_required' and if so, redirect to the MFA code entry page. It seems to work fine.
One step that is missing here is the check to see if the user has validated their MFA (i.e. they have set it up). If they haven't set it up and the username and password is correct, the login widget will return a 'success' status and bypass MFA altogether (Logging in via the Service Portal seems to actually allow the user to circumvent the 'bypasses remaining' number out of the box). It might be beneficial to add a query to the user_multifactor_auth table to find out if MFA has been validated before proceeding. This would likely be done after line 29.
c.login = function(username, password) {
var url = urlTools.getURL('view_form.login');
// If the page isn't public then the id in the
// url won't match the rendered page id.
var pageId = $location.search().id || $scope.page.id;
var isLoginPage = $scope.portal.login_page_dv == pageId;
return $http({
method: 'post',
url: url,
data: urlTools.encodeURIParameters({
'sysparm_type': 'login',
'ni.nolog.user_password': true,
'remember_me': !!c.remember_me ? true : false,
'user_name': username,
'user_password': password,
'get_redirect_url': true,
'sysparm_goto_url': isLoginPage ? null : $location.url()
}),
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}).then(function(response) {
if (!response.data) {
c.message = $scope.data.errorMsg;
return;
}
if (response.data.status == 'success') {
//
// CHECK IF MFA HAS BEEN VALIDATED HERE!!!
//
c.success = response.data.message;
$window.location = response.data.redirect_url;
} else if (response.data.status == 'mfa_code_required') {
c.success = 'Redirecting to multi-factor authentication page.';
$window.location = '/validate_multifactor_auth_code.do';
} else {
// wrong username or password
c.message = response.data.message;
c.password = "";
}
}, function errorCallback(response) {
// error
c.message = $scope.data.errorMsg;
});
};
