希望看到一个有效的例子。搜索了一下,似乎无法让它在本地运行。始终显示隐私条款徽标&用户必须与验证码进行交互。
我已经创建了codepen以加快速度。
使用隐形reCAPTCHA
要使用不可见的reCAPTCHA,请创建一个RecaptchaVerifier对象,其size参数设置为不可见,指定提交登录表单的按钮的ID。
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
'size': 'invisible',
'callback': function(response) {
// reCAPTCHA solved, allow signInWithPhoneNumber.
onSignInSubmit();
}
});
基本上我在init的这个视图中有什么:
window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('phone-sign-in-recaptcha', {
'size': 'invisible',
'callback': function(response) {
// reCAPTCHA solved - will proceed with submit function
console.log(response);
},
'expired-callback': function() {
// Reset reCAPTCHA?
}
});
<form name="mobile" novalidate>
<label class="item item-input">
<i class="icon placeholder-icon"></i>
<input type="tel" name="number" ng-model="$ctrl.user.mobile">
</label>
<button id="sign-in-button" ng-click="$ctrl.onSignInSubmit(user.mobile)"></button>
</form>
<div id="phone-sign-in-recaptcha"></div>
这是在提交时调用的函数:
ctrl.onSignInSubmit = function() {
var phoneNumber = '+1' + ctrl.user.mobile;
var appVerifier = window.recaptchaVerifier;
firebase.auth()
.signInWithPhoneNumber(phoneNumber, appVerifier)
.then(function(confirmationResult) {
ctrl.hasCodeToVerify = true;
console.log('confirmationResult', confirmationResult);
window.confirmationResult = confirmationResult;
}).catch(function(error) {
console.log('error', error);
});
};
答案 0 :(得分:3)
这是一个带有隐形reCAPTCHA的工作示例:
https://github.com/firebase/quickstart-js/blob/master/auth/phone-invisible.html
在您的代码中,在您致电signInWithPhoneNumber
之后,隐形reCAPTCHA应该显示一个挑战,该挑战在解决后,使用confirmationResult
解决待处理的承诺,或直接解决而不会显示任何挑战。
当该承诺以confirmationResult
结算时,您应该询问用户SMS代码。
然后你拨打confirmationResult.confirm(code)
这将完成用户的登录。
firebase
.auth()
.signInWithPhoneNumber(phoneNumber, appVerifier)
.then(function(confirmationResult) {
var code = window.prompt("Please enter your code");
return confirmationResult.confirm(code);
})
.then(function(result) {
// User is signed in now.
})
.catch(function(error) {
console.log("error", error);
});