angularjs – 如何在角网页应用中使用Firebase隐形reCAPTCHA？

发布时间：2020-12-17 10:25:22 所属栏目：安全来源：网络整理

导读：希望看到一个有效的例子.搜索了一下,似乎无法让它在本地工作.始终显示隐私条款徽标用户必须与验证码进行交互. 这是我创建的codepen,以加快速度. 从Firebase-Docs开始： Use invisible reCAPTCHA To use an invisible reCAPTCHA,create a RecaptchaVerifier o

希望看到一个有效的例子.搜索了一下,似乎无法让它在本地工作.始终显示隐私条款徽标&用户必须与验证码进行交互.

这是我创建的codepen,以加快速度.

从Firebase-Docs开始：

Use invisible reCAPTCHA

To use an invisible reCAPTCHA,create a RecaptchaVerifier object with the size parameter set to invisible,specifying the ID of the button that submits your sign-in form.

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

这是一个隐形reCAPTCHA的工作示例：

https://github.com/firebase/quickstart-js/blob/master/auth/phone-invisible.html

在您的代码中,在您调用signInWithPhoneNumber之后,不可见的reCAPTCHA应该显示一个挑战,该挑战在解决后,使用confirmationResult解析待处理的承诺,或直接解析而不显示任何挑战.

当该承诺使用confirmationResult解析时,您应该询问用户SMS代码.
然后调用confirmationResult.confirm(代码)
这将完成用户的登录.

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!