如何对角度Web应用程序使用Firebase隐形reCAPTCHA? [英] How to use Firebase invisible reCAPTCHA for angular web app?

问题描述

希望看到一个有效的示例.搜索了很多，似乎无法使其在本地工作.一律显示隐私权条款徽标和用户必须与验证码进行交互.

这是我为加快速度而创建的 codepen ./p>

通过 Firebase文档:

使用不可见的reCAPTCHA

要使用不可见的reCAPTCHA，请创建一个大小参数设置为不可见的RecaptchaVerifier对象，并指定提交登录表单的按钮的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);
    });
};
 

解决方案

以下是使用不可见的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);
  });

Hoping to see a working example. Searched quite a bit, can't seem to get it working locally. Always shows privacy terms logo & user has to interact with captcha.

Here is a codepen I've created to speed things up.

From the 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();
  }
});

Basically what I have in this views on 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>

This is the function called on submit:

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

解决方案

Here is a working example with invisible reCAPTCHA:

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

In your code, after you call signInWithPhoneNumber, invisible reCAPTCHA should either display a challenge which when solved, resolves the pending promise with the confirmationResult, or directly resolves without showing any challenge.

When that promise resolves with confirmationResult, you should ask the user for the SMS code. You then call confirmationResult.confirm(code) This will complete sign in of the user.

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

这篇关于如何对角度Web应用程序使用Firebase隐形reCAPTCHA?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！