如何将 Firebase 隐形 reCAPTCHA 用于 Angular Web 应用程序？

Posted 2023-02-23

【中文标题】如何将 Firebase 隐形 reCAPTCHA 用于 Angular Web 应用程序？

【英文标题】：How to use Firebase invisible reCAPTCHA for angular web app?

【发布时间】：2018-04-03 08:12:01

【问题描述】：

希望看到一个可行的示例。搜索了很多，似乎无法让它在本地工作。始终显示隐私条款徽标，用户必须与验证码进行交互。

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

来自Firebase-Docs：

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

【参考方案1】：

这是一个使用不可见 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);
  );

【讨论】：

我看过那个快速入门，它有一个渲染方法，我不确定它是否应该实际渲染挑战或自动完成它。我尝试在我的代码中使用它。要么没有正确使用它，要么无法解决挑战。我会做一个代码笔，所以也许你/其他人可以在那里提供帮助。

我看过你关于其他 firebase 和 ionic 问题的帖子。似乎这与原始 URL 有关。他们中的大多数都会收到带有不可见验证码的 HTTP 错误消息。

嘿@alphapilgrim，您似乎没有向用户询问短信代码。我添加了一个简单的示例来展示如何做到这一点。

非常正确@bojeil！我通过不同的点击事件在不同的功能中进行了确认。太感谢了！我正要从应用程序中删除这件作品。