Google/Firebase reCaptcha ne fonctionne pas avec angulaire

Question

La documentation suivante pour l'authentification du nouveau téléphone Firebase. Ils ont introduit une recaptcha comme mesure de sécurité/spam. Selon la documentation de la js recaptcha est injecté dans les DOM avec:

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container'); 

Toutefois, cela ne semble pas travailler dans AngularJS. J'ai essayé de changer de fenêtre. pour $ window et assuré que c'était disponible dans mon contrôleur, mais toujours pas de chance.

Toute aide ou conseil serait grandement apprécié.

Ceci est la documentation js j'ai suivi: https://firebase.google.com/docs/auth/web/phone-auth

Answer 1

Je en ai parlé dans un fil sur le repo GitHub: Support for PhoneNumber Auth #990

Heres un copier-coller, il vous obtiendrez connecté via téléphone et évidemment obtenir le travail recaptcha:

MISE à JOUR: (problème résolu)

Je confirme que je suis maintenant capable de se connecter par mobile angulaire! Assurez-vous que si vous souhaitez utiliser ReCaptcha en tant que widget, assurez-vous que la div contenant est créée lors de l'initialisation de l'objet.

Je préfère la méthode 'invisible', donc j'ai mis un div vide quelque part sur ma page html:

<div id="phone-sign-in-recaptcha"></div>

et à l'intérieur ngOnInit() je l'ai instancié:

window['phoneRecaptchaVerifier'] = new firebase.auth.RecaptchaVerifier('phone-sign-in-recaptcha', { 
    'size': 'invisible', 
    'callback': function(response) { 
    // reCAPTCHA solved - will proceed with submit function 
    }, 
    'expired-callback': function() { 
    // Reset reCAPTCHA? 
    } 
}); 

La fonction de soumission de formulaire qui est déclenchée lorsque la recaptcha est résolue est:

this.auth.signInWithPhoneNumber(phoneNumber,  window['phoneRecaptchaVerifier']).then(function(confirmationResult){ 
    var code = prompt('We have send a code to ' + phoneNumber + ', please enter it here', ""); 
    if (code) { 
    confirmationResult.confirm(code).then(function (result) { 
     // User signed in successfully. 
     // Reset reCAPTCHA? 
     // ... 
    }).catch(function (error) { 
     // User couldn't sign in (bad verification code?) 
     // Reset reCAPTCHA? 
     // ... 
    }); 
    } 
}).catch(function(error){ 
    console.log(error.message); 
}); 

Pour accéder à la variable globale grecaptcha pour appeler grecaptcha.reset([widgetId]), ce que vous voulez faire dans le cas où la recaptcha a expiré ou s'il y a une erreur de connexion et que les utilisateurs doivent réessayer.

npm install @types/grecaptcha --save

et retour dans votre module composante où votre recaptcha est, directement sous vos importations Déclarez la variable: declare var grecaptcha: any;

dans mon code, je l'ai remplacé le commentaire // Reset reCAPTCHA? avec l'appel suivant:

window['phoneRecaptchaVerifier'].render().then(function(widgetId) { 
     grecaptcha.reset(widgetId); 
    }); 

Tout fonctionne très bien maintenant!