时间戳

首页 > 解决方案 > 我在哪里放置用于 firebase 电话号码登录的 ReCatptcha？

javascript - 我在哪里放置用于 firebase 电话号码登录的 ReCatptcha？

问题描述

我解释以下代码块的方式：

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('sign-in-button', {
  'size': 'invisible',
  'callback': (response) => {
    // reCAPTCHA solved, allow signInWithPhoneNumber.
    onSignInSubmit();
  }
});

是应该有一个 id 为 recaptchaVerifier 的空 div，并且新的 RecaptchaVerifier 对象应该替换该 div。我应该如何做出反应？我尝试创建另一个组件并返回新的 RecaptchaVerifier 以在主页上呈现，但每次我尝试类似的事情时它都会崩溃。

标签： javascriptreactjsfirebasefirebase-authentication

解决方案

文档中提到了这一点，但很容易错过。

要使用不可见的 reCAPTCHA，请创建一个将参数设置为的RecaptchaVerifier对象，并指定提交您的登录表单的按钮的 ID。例如：sizeinvisible

sign-in-button是登录表单中提交按钮的 CSS ID。要连接 recaptcha，请添加sign-in-button作为您的 React 组件的提交按钮。例如id="sign-in-button"……

我发现将登录过程分成两个单独的步骤更容易。如果您有兴趣...继续阅读。

下面是 Firebase Auth Phone Login 的示例实现。您会看到我将登录分为两种方法。第一种方法是登录表单，另一种是使用发送到他们设备的 SMS 验证码登录用户。

const verifyPhoneNumber = async phone => {
  const appVerifier = new firebase.auth.RecaptchaVerifier('login-button', { size: 'invisible' });
  const phoneNumber = normalizePhone(phone);

  return firebase
    .auth()
    .signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(response => response.verificationId);
};

const signInWithVerificationCode = (id, code) => {
  const phoneCredential = firebase.auth.PhoneAuthProvider.credential(id, code);

  return firebase.auth().signInWithCredential(phoneCredential).then(login);
};

推荐阅读