Google/Firebase reCaptcha无法使用角度

以下文档介绍了新的Firebase电话身份验证。他们已经推出了一项安全/垃圾邮件措施。根据js文档，recaptcha注入到DOM中：Google/Firebase reCaptcha无法使用角度

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

但是，这在AngularJS中似乎不起作用。我试图换掉窗户。为$窗口，并确保这是在我的控制器，但仍然没有运气。

任何帮助或指导将不胜感激。

这是我一直在关注的JS文件： https://firebase.google.com/docs/auth/web/phone-auth

来源

2017-06-17 MNelmes

嗯，这是一个有趣的问题，但我不认为这是因为角度。 'recaptcha-container'在你的html中是否存在一个ID？这行代码是否执行？ –

是的，我只是使用ID =“recaptcha-container”的div。另外有意思的是，如果我将firebase.auth.RecaptchaVerifier赋值给$ scope变量和console.log，我可以看到它确实具有某种形式的对象填充。 – MNelmes

Gotcha，还有两件事情，如果你尝试做'$ scope。$ apply（）'''？我怀疑它会解决它，但只是一个想法。你在控制台中看到错误吗？ –

我在GitHub的回购线程讨论这个：Support for PhoneNumber Auth #990

继承人复制粘贴，它将让你通过在签手机，显然得到的ReCaptcha工作：

更新：（解决）

我可以确认我现在能够通过移动从角登陆！确保您是否要使用ReCaptcha作为小部件，确保在初始化对象时创建包含div。

我更喜欢 '无形' 的方法，所以我第一次把一个空的div的地方我的html页面：

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

和内部ngOnInit（）我有实例吧：

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? 
    } 
});

解决recaptcha时触发的表单提交函数为：

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); 
});

为了访问全局变量grecaptcha以调用grecaptcha.reset([widgetId])，在recaptcha过期或登录出现错误并且用户需要重试的情况下，您需要执行该操作。

npm install @types/grecaptcha --save

和回你的组件模块在您的验证码是，直接在进口在声明变量： declare var grecaptcha: any;

在我的代码

我已经更换了评论// Reset reCAPTCHA?通过以下调用：

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

现在所有的作品都很棒！

来源

2017-08-22 00:11:36

真棒时我会更新，然后向我们报告！谢谢 – MNelmes

P.S.注意使用：window ['phoneRecaptchaVerifier']，而不是window.phoneReReptchaVerifier –

它没有为我工作 –

Google/Firebase reCaptcha无法使用角度

回答

相关问题