在 angularJS 中集成验证码的最佳方式
Best way to integrate captcha in angularJS
我对 angularJS 比较陌生,我想知道解决以下问题的最干净的方法是什么。
假设我有如下形式
<form name="contactform">
<select id="salutation" name="salutation" required="true" ng-model="contactRequest.salutation"><option value="Herr" selected="">Herr</option><option value="Frau">Frau</option></select>
<img width="255" height="70" alt="" src="/website/var/tmp/aed4d639a26c4614cdac2a967381c61c.png" name="captcha[img]">
<captcha-reloader reload-url="/refresh-captcha" img-tag-name="captcha[img]" hidden-field-name="captcha[id]"></captcha-reloader>
<input type="text" name="captcha[input]" required="true" ng-model="contactRequest.captcha.input">
<input type="text" style="display: none;" ng-model="contactRequest.captcha.id" value="aed4d639a26c4614cdac2a967381c61c" name="captcha[id]">
...
如您所见,它使用一个指令来显示一个按钮,该按钮将重新加载验证码。它被定义为
myApp.directive('captchaReloader', function () {
return {
restrict: 'E',
scope: {
reloadUrl: '@',
imgTagName: '@',
hiddenFieldName: '@'
}, //isolate scope
template: '<a href="" ng-click="reloadCaptcha()" class="captcha-reload"></a>',
link: function (scope, element, attrs) {
},
controller: function ($scope, $element, $attrs, $http) {
$scope.reloadCaptcha = function () {
$http.get($attrs.reloadUrl).then(function (res) {
angular.element('img[name="' + $attrs.imgTagName + '"]').attr('src', res.data.imgSrc);
angular.element('input[name="' + $attrs.hiddenFieldName + '"]').val(res.data.id);
angular.element('input[name="' + $attrs.hiddenFieldName + '"]').trigger('input');
});
};
}
};
)};
如果我点击按钮,验证码图像和值(隐藏字段)会更新。到目前为止一切正常。
现在,我想在控制器中处理表单提交(参见下面的方法)。如果出现错误(服务器端验证),则必须更新验证码。我不知道什么是触发指令中定义的更新过程的最佳方式。有人可以帮忙吗?
myApp.controller('KontaktCtrl', function ($scope, $location, CustomerDataService, CaptchaService) {
$scope.contactRequest = {
salutation: 'Herr',
captcha: {
id: initialCaptchaId
}
};
$scope.errors = {};
$scope.submitAction = function () {
CustomerDataService.sendRequest($scope.contactRequest).then(function (res) {
var data = res.data;
if (res.data.data !== null) { //errors in form. Display them
//error handling
$scope.reloadCaptcha();
} else {
goToHomeView();
}
}, function (error) {
console.log('An error occurred while updating!', error);
});
};
var goToHomeView = function () {
$location.path('/');
};
});
此外,我必须初始化 select-box 和验证码的值,否则它们不会被发送(因为它们未被触及)。有什么办法可以避免这种情况吗?
PS:我找到了一个 reCAPTCHA 指令,但由于样式限制,reCAPTCHA 不是一个选项。
按照步骤操作非常简单...
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer></script>
<script>
var onloadCallback = function() {
widgetId1 = grecaptcha.render('example1', {
'sitekey' : 'Site-Key-',
'theme' : 'light'
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
现在把它放在表格里
<div id="example1"></div>
<p style="color:red;">{{ captcha_status }}</p>
用 angular
验证
if(grecaptcha.getResponse(widgetId1)==''){
$scope.captcha_status='Please verify captha.';
return;
}
我对 angularJS 比较陌生,我想知道解决以下问题的最干净的方法是什么。 假设我有如下形式
<form name="contactform">
<select id="salutation" name="salutation" required="true" ng-model="contactRequest.salutation"><option value="Herr" selected="">Herr</option><option value="Frau">Frau</option></select>
<img width="255" height="70" alt="" src="/website/var/tmp/aed4d639a26c4614cdac2a967381c61c.png" name="captcha[img]">
<captcha-reloader reload-url="/refresh-captcha" img-tag-name="captcha[img]" hidden-field-name="captcha[id]"></captcha-reloader>
<input type="text" name="captcha[input]" required="true" ng-model="contactRequest.captcha.input">
<input type="text" style="display: none;" ng-model="contactRequest.captcha.id" value="aed4d639a26c4614cdac2a967381c61c" name="captcha[id]">
...
如您所见,它使用一个指令来显示一个按钮,该按钮将重新加载验证码。它被定义为
myApp.directive('captchaReloader', function () {
return {
restrict: 'E',
scope: {
reloadUrl: '@',
imgTagName: '@',
hiddenFieldName: '@'
}, //isolate scope
template: '<a href="" ng-click="reloadCaptcha()" class="captcha-reload"></a>',
link: function (scope, element, attrs) {
},
controller: function ($scope, $element, $attrs, $http) {
$scope.reloadCaptcha = function () {
$http.get($attrs.reloadUrl).then(function (res) {
angular.element('img[name="' + $attrs.imgTagName + '"]').attr('src', res.data.imgSrc);
angular.element('input[name="' + $attrs.hiddenFieldName + '"]').val(res.data.id);
angular.element('input[name="' + $attrs.hiddenFieldName + '"]').trigger('input');
});
};
}
};
)};
如果我点击按钮,验证码图像和值(隐藏字段)会更新。到目前为止一切正常。
现在,我想在控制器中处理表单提交(参见下面的方法)。如果出现错误(服务器端验证),则必须更新验证码。我不知道什么是触发指令中定义的更新过程的最佳方式。有人可以帮忙吗?
myApp.controller('KontaktCtrl', function ($scope, $location, CustomerDataService, CaptchaService) {
$scope.contactRequest = {
salutation: 'Herr',
captcha: {
id: initialCaptchaId
}
};
$scope.errors = {};
$scope.submitAction = function () {
CustomerDataService.sendRequest($scope.contactRequest).then(function (res) {
var data = res.data;
if (res.data.data !== null) { //errors in form. Display them
//error handling
$scope.reloadCaptcha();
} else {
goToHomeView();
}
}, function (error) {
console.log('An error occurred while updating!', error);
});
};
var goToHomeView = function () {
$location.path('/');
};
});
此外,我必须初始化 select-box 和验证码的值,否则它们不会被发送(因为它们未被触及)。有什么办法可以避免这种情况吗?
PS:我找到了一个 reCAPTCHA 指令,但由于样式限制,reCAPTCHA 不是一个选项。
按照步骤操作非常简单...
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer></script>
<script>
var onloadCallback = function() {
widgetId1 = grecaptcha.render('example1', {
'sitekey' : 'Site-Key-',
'theme' : 'light'
});
};
</script>
<script src="https://www.google.com/recaptcha/api.js?onload=onloadCallback&render=explicit"
async defer>
现在把它放在表格里
<div id="example1"></div>
<p style="color:red;">{{ captcha_status }}</p>
用 angular
验证if(grecaptcha.getResponse(widgetId1)==''){
$scope.captcha_status='Please verify captha.';
return;
}