2017-03-22 4 views
1

Ich versuche, die unsichtbar reCAPTCHA in meiner AngularJS Web App zu implementieren. Laut ihrem Dokument soll ich dem Übermittlungs-Button für das Login-Formular ein Attribut namens "Daten-Rückruf" hinzufügen. Ich füge jedoch die Funktion für die HTTP-Anfrage mit der Taste ng-klick an die Schaltfläche an. Was soll ich dann in den Wert des Attributs "Daten-Rückruf" eingeben? Wie kann ich wissen, ob das Recaptcha-Ergebnis erfolgreich ist oder nicht, und g-recaptcha-response erhalten, um mit meiner http-Anfrage an den Server zu senden?Invisible Google reCaptcha mit AngularJS

https://developers.google.com/recaptcha/docs/invisible

Antwort

6

Es ist ein Winkel Wrapper für diese, aber wenn Sie wie ich, Sie die Original-JavaScript-Bibliothek ist dies verwenden möchten, wie es geht:

Die Daten-Rückruf ein Java-Skript erwarten Globale Funktion, also funktioniert die Verwendung einer Funktion in einem $ Scope nicht. Die Lösung, die ich mir ausgedacht habe, besteht darin, eine globale Funktion zu erstellen, die die Winkelfunktion erbt.

so sollten Sie tun:

$scope.login = function (token) { 
    // your login logic 
} 
$window.login = $scope.login; 

und vergessen Sie nicht, $ Fenster als eine Abhängigkeit in Ihrem Umfang zu injizieren.

Das google invisible reCaptcha sendet Ihnen ein Token, damit Sie die Benutzerserverseite verifizieren können.

und in Ihrem html:

<button class="g-recaptcha" 
    data-sitekey="your_google_key_here" 
    data-callback="login" 
    data-size> 
Login 
</button> 

Hoffnung, das hilft.

+2

Zu Testzwecken sollten Sie wahrscheinlich an $ window und nicht an das Fenster selbst binden. – mikeswright49

+0

Sie haben absolut Recht, die Verwendung des globalen Fensterobjekts verursacht direkt Testbarkeitsprobleme, danke, dass Sie darauf hingewiesen haben. –

+2

Es hat zuerst nicht funktioniert, aber es war, weil ich $ window nicht als Abhängigkeit injiziert habe. Vielen Dank! –