如何使用 javascript 从 Firebase 电话身份验证中删除验证码？

Posted 2023-02-23

【中文标题】如何使用 javascript 从 Firebase 电话身份验证中删除验证码？

【英文标题】：How to remove captcha verification from Firebase phone auth using javascript?

【发布时间】：2018-12-13 13:33:50

【问题描述】：

我是第一次使用 firebase 电话身份验证，我看到验证码必须按照 firebase 官方文档继续进行。虽然它起到了很好的作用，但有时当它开始询问路标、桥梁和所有东西时，它会变得对用户体验非常不利。有没有办法在获取用户号码后直接跳到验证码？根据文档，代码如下所述。谢谢。

var phoneNumber = getPhoneNumberFromUserInput();
var appVerifier = window.recaptchaVerifier;
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(function (confirmationResult) 
      // SMS sent. Prompt user to type the code from the message, then sign the
      // user in with confirmationResult.confirm(code).
      window.confirmationResult = confirmationResult;
    ).catch(function (error) 
      // Error; SMS not sent
      // ...
);

var code = getCodeFromUserInput();
confirmationResult.confirm(code).then(function (result) 
  // User signed in successfully.
  var user = result.user;
  // ...
).catch(function (error) 
  // User couldn't sign in (bad verification code?)
  // ...
);

【参考方案1】：

在身份验证设置中使用isAppVerificationDisabledForTesting = TRUE，如下给定的sn-p：

Auth.auth().settings.isAppVerificationDisabledForTesting = TRUE

更多详情请查看以下官方信息：

javascript - https://firebase.google.com/docs/reference/js/firebase.auth.AuthSettings

SDK 参考 - https://firebase.google.com/docs/auth/ios/phone-auth#integration-testing

【讨论】：

有什么解决办法吗？

【参考方案2】：

我在集成 iOS SDK 时遇到了同样的问题。

如果 google 具有跨语言的相同架构和类的 firebase SDK，则此解决方案可能适合您。

Auth.auth().settings?.isAppVerificationDisabledForTesting = true

【讨论】：

谢谢！对于网络 SDK：从 'firebase/app' 导入 firebase； firebase.auth().settings.appVerificationDisabled = true

appVerificationDisabledForTesting = true

如标签所示，这是用于测试的。这不是您的应用程序的长期解决方案。您实际上需要将您正在使用的电话号码列入白名单。它只是让迭代测试更快

【参考方案3】：

使用尺寸：“正常”到尺寸：“不可见”

 window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
    "recaptcha-container",
    
      size: "invisible",
      callback: function(response) 
        submitPhoneNumberAuth();
      
    
  );

【参考方案4】：

 firebase.initializeApp(firebaseConfig);
  // Create a Recaptcha verifier instance globally
  // Calls submitPhoneNumberAuth() when the captcha is verified
  window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
    "recaptcha-container",
    
      size: "invisible",
      callback: function(response) 
        submitPhoneNumberAuth();
      
    
  );

【参考方案5】：

Firebase 为验证码大小提供了两个属性

正常 - 对用户可见且验证码可见，并手动执行验证码过程。 不可见 - 对用户不可见，自动验证码过程，代码将在 DOM 中自动呈现。

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier(
    "recaptcha-container", 
        size: "invisible"
    
);

更多详情请参考此Official链接

【讨论】：

Invisable 有时会出现，替换整个屏幕；例如，如果您连接到 *** 并重新加载此窗口，它可能会触发它。

【参考方案6】：

实际上你不能。但是，有些设备它不起作用。相反，设置安全并启用 API 密钥。然后回到您在 Firebase 中的项目设置，如果不存在，则将 SHA-25 从 android Gradle 复制并粘贴到那里。这样，在应用程序浏览器重定向将不会再刺激你...

【讨论】：

对于 SafetyNet Google Cloud 参考 firebase.google.com/docs/auth/android/phone-auth

【参考方案7】：

方法一：

firebase.auth().settings.appVerificationDisabledForTesting = true;

Firebase 文档

https://firebase.google.com/docs/auth/web/phone-auth?authuser=0#web-v8_6

// Turn off phone auth app verification.
firebase.auth().settings.appVerificationDisabledForTesting = true;

var phoneNumber = "[phone]";
var testVerificationCode = "123456";

// This will render a fake reCAPTCHA as appVerificationDisabledForTesting is true.
// This will resolve after rendering without app verification.
var appVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
// signInWithPhoneNumber will call appVerifier.verify() which will resolve with a fake
// reCAPTCHA response.
firebase.auth().signInWithPhoneNumber(phoneNumber, appVerifier)
    .then(function (confirmationResult) 
      // confirmationResult can resolve with the fictional testVerificationCode above.
      return confirmationResult.confirm(testVerificationCode)
    ).catch(function (error) 
      // Error; SMS not sent
      // ...
    );

方法二：

https://firebase.google.com/docs/auth/web/phone-auth#use-invisible-recaptcha

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

【讨论】：

感谢 ßãlãjî 的分享。我实现了方法 2，但是 onSignInSubmit();根本不叫。有什么建议吗？

【参考方案8】：

转到 Firebase 控制台 -->您的项目-->项目概览设置-->项目设置 --> 应用检查 -->概览（为您的应用注册 SafetyNet）。

然后您的应用将停止重定向到网络进行验证码验证

【讨论】：

这仅适用于移动设备，适用于网络则不同

【参考方案9】：

根据谷歌官方文档有 2 件事：

向 Firebase 添加 Sha-256 密钥

启用安全网：https://console.cloud.google.com/apis/library/androidcheck.googleapis.com

要使用电话号码身份验证，Firebase 必须能够验证电话号码登录请求是否来自您的应用。 Firebase 身份验证可通过两种方式完成此操作：

SafetyNet：如果用户的设备安装了 Google Play 服务，并且 Firebase 身份验证可以通过 Android SafetyNet 验证该设备是否合法，则可以继续使用电话号码登录。 启用 SafetyNet 以用于 Firebase 身份验证：

在 Google Cloud Console 中，为您的项目启用 Android DeviceCheck API。将使用默认的 Firebase API 密钥，并且需要被允许访问 DeviceCheck API。 如果您尚未指定应用的 SHA-256 指纹，请从 Firebase 控制台的设置页面执行此操作。有关如何获取应用的 SHA-256 指纹的详细信息，请参阅验证您的客户端。

---

更多详情：https://firebase.google.com/docs/auth/android/phone-auth