Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
AngularDart Google ReCaptcha component. Advanced usage example
import 'dart:async';
import 'package:angular/angular.dart';
import 'package:angular_forms/angular_forms.dart';
import 'package:angular_grecaptcha/angular_grecaptcha.dart';
import 'package:http/browser_client.dart';
@Component(
selector: 'my-component',
templateUrl: 'my_component.html',
styleUrls: const [
'my_component.css'
],
directives: const [
CORE_DIRECTIVES,
formDirectives,
AngularRecaptcha
],
providers: const [
const Provider(BrowserClient, useClass: BrowserClient)
]
)
class MyComponent {
String name = '';
String recaptchaResponse = '';
final NgZone _ngZone;
MyComponent(this._ngZone);
// It is possible not to use callback function and recaptchaResponse variable. See comment in onSubmit()
callback(var response) {
// In order JS-callback could take the expected effect on angular component
// the actions must be run in NgZone
_ngZone.run(() {
recaptchaResponse = response;
print('Recaptcha resolved.\nResponse: $recaptchaResponse');
});
}
expiredCallback() {
// You can add some actions here
print('ReCaptcha response has been expired.');
}
void reset() {
GRecaptcha.reset();
}
Future<bool> onSubmit() async {
final http = new BrowserClient();
final response = await http.post(
'http://your.site.com',
body: {
'name': name,
// Instead of this line you can use the alternative:
// 'g-recaptcha-response': GRecaptcha.getResponse()
// In this case you do not need callback-function and recaptchaResponse variable
'g-recaptcha-response': recaptchaResponse
}
);
if(response.statusCode == 200) {
print('Ok!');
} else {
print('Something went wrong!');
}
return false;
}
}
<h2>AngularDart Google ReCaptcha component. Advanced example</h2>
<form (ngSubmit)="onSubmit()">
<label for="name">Input your name</label>
<input id="name" name="name" type="text" [(ngModel)]="name">
<g-recaptcha
sitekey="YOUR SITEKEY"
size="compact"
theme="dark"
[callback]="callback"
[expired-callback]="expiredCallback"
></g-recaptcha>
<button type="submit" [disabled]="recaptchaResponse.isEmpty">Submit</button>
</form>
name: recaptcha
version: 0.0.1
environment:
sdk: '>=1.24.0 <2.0.0'
dependencies:
angular: ^4.0.0
angular_forms: ^1.0.0
angular_grecaptcha: ^0.0.2
dev_dependencies:
angular_test: ^1.0.0
browser: ^0.10.0
dart_to_js_script_rewriter: ^1.0.1
test: ^0.12.0
transformers:
- angular:
entry_points:
- web/main.dart
- test/**_test.dart
- test/pub_serve:
$include: test/**_test.dart
- dart_to_js_script_rewriter
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.