在线时间:8:00-16:00
迪恩网络APP
随时随地掌握行业动态
扫描二维码
关注迪恩网络微信公众号
开源软件名称(OpenSource Name):VividCortex/angular-recaptcha开源软件地址(OpenSource Url):https://github.com/VividCortex/angular-recaptcha开源编程语言(OpenSource Language):JavaScript 100.0%开源软件介绍(OpenSource Introduction):UNMAINTAINEDPlease fork this repo if you are interested in continuing using it. AngularJS reCaptchaAdd a reCaptcha to your AngularJS project. Demo: http://vividcortex.github.io/angular-recaptcha/ InstallationManualDownload the latest release. Bower
npm
UsageSee the demo file for a quick usage example.
<script type="text/javascript" src="angular-recaptcha.js"></script> var app = angular.module('myApp', ['vcRecaptcha']);
<div
vc-recaptcha
key="'---- YOUR PUBLIC KEY GOES HERE ----'"
></div> Here, the Form ValidationBy default, if placed in a form using formControl the captcha will need to be checked for the form to be valid.
If the captcha is not checked (if the user has not checked the box or the check has expired) the form will be marked as invalid. The validation key is You can also trigger the validation programatically if the captcha is not required, for example: vcRecaptchaService.execute(widgetId); If no widget ID is provided, the first created widget will be executed. Response ValidationTo validate this object from your server, you need to use the API described in the verify section. Validation is outside of the scope of this tool, since is mandatory to do that at the server side. You can simple supply a value for ...
<form name="myForm" ng-submit="mySubmit(myFields)">
...
<div
vc-recaptcha
ng-model="myFields.myRecaptchaResponse"
></div>
...
</form>
... ...
$scope.mySubmit = function(myFields){
console.log(myFields.myRecaptchaResponse);
}
... Or you can programmatically get the response that you need to send to your server, use the method var response = vcRecaptchaService.getResponse(widgetId); // returns the string response Using Other ParametersYou can optionally pass a <div
vc-recaptcha
ng-model="gRecaptchaResponse"
theme="---- light or dark ----"
size="---- compact, normal or invisible ----"
type="'---- audio or image ----'"
key="'---- YOUR PUBLIC KEY GOES HERE ----'"
lang="---- language code ----"
></div> Language Codes: https://developers.google.com/recaptcha/docs/language In this case we are specifying that the captcha should use the theme named light. ListenersThere are three listeners you can use with the directive,
<div
vc-recaptcha
key="'---- YOUR PUBLIC KEY GOES HERE ----'"
ng-model="gRecaptchaResponse"
on-create="setWidgetId(widgetId)"
on-success="setResponse(response)"
on-expire="cbExpiration()"
lang=""
></div> Exampleapp.controller('myController', ['$scope', 'vcRecaptchaService', function ($scope, recaptcha) {
$scope.setWidgetId = function (widgetId) {
// store the `widgetId` for future usage.
// For example for getting the response with
// `recaptcha.getResponse(widgetId)`.
};
$scope.setResponse = function (response) {
// send the `response` to your server for verification.
};
$scope.cbExpiration = function() {
// reset the 'response' object that is on scope
};
}]); Secure TokenIf you want to use a secure token pass it along with the site key as an HTML attribute. <div
vc-recaptcha
key="'---- YOUR PUBLIC KEY GOES HERE ----'"
stoken="'--- YOUR GENERATED SECURE TOKEN ---'"
></div> Please note that you have to encrypt your token yourself with your private key upfront! To learn more about secure tokens and how to generate & encrypt them please refer to the reCAPTCHA Docs. Service ProviderYou can use the myApp.config(function(vcRecaptchaServiceProvider){
vcRecaptchaServiceProvider.setSiteKey('---- YOUR PUBLIC KEY GOES HERE ----')
vcRecaptchaServiceProvider.setTheme('---- light or dark ----')
vcRecaptchaServiceProvider.setStoken('--- YOUR GENERATED SECURE TOKEN ---')
vcRecaptchaServiceProvider.setSize('---- compact, normal or invisible ----')
vcRecaptchaServiceProvider.setType('---- audio or image ----')
vcRecaptchaServiceProvider.setLang('---- language code ----')
}); Language Codes: https://developers.google.com/recaptcha/docs/language You can also set all of the values at once. myApp.config(function(vcRecaptchaServiceProvider){
vcRecaptchaServiceProvider.setDefaults({
key: '---- YOUR PUBLIC KEY GOES HERE ----',
theme: '---- light or dark ----',
stoken: '--- YOUR GENERATED SECURE TOKEN ---',
size: '---- compact, normal or invisible ----',
type: '---- audio or image ----',
lang: '---- language code ----'
});
}); Note: any value omitted will be undefined, even if previously set. Differences with the old reCaptcha
Recent Changelog
|
2023-10-27
2022-08-15
2022-08-17
2022-09-23
2022-08-13
请发表评论