Firebase手机号OTP验证报错Hostname match not found问题求助

问题描述 #

已正确配置Firebase参数，当前主机名已添加至Firebase授权域名列表，但调用手机号验证码发送接口时，仍触发Hostname match not found错误（错误标识：auth/captcha-check-failed）。预期实现流程：用户填写手机号后点击「发送验证码」，页面显示reCAPTCHA验证组件，验证通过后向该手机号发送OTP验证码。

相关代码 #

{% extends 'customer/base.html' %}
   {% load bootstrap5 %}

{% block head %}
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/8.2.1/firebase-auth.js"></script>
<script src="https://www.google.com/recaptcha/api.js" async defer></script>
{% endblock head %}

{% block main %}
<b class="text-secondary">Basic Information</b><br>
<div class="card mb-5 mt-2 bg-white">
<div class="card-body">
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {% bootstrap_form userForm %}
        {% bootstrap_form customer_Form %}
        <input type="hidden" name="action" value="update_profile">
        <button type="submit" class="btn btn-warning">Save</button>
    </form>
</div>
</div>

<b class="text-secondary">Change Password</b><br>
<div class="card mb-5 mt-2 bg-white">
<div class="card-body">
    <form method="post" enctype="multipart/form-data">
        {% csrf_token %}
        {% bootstrap_form password_form %}
        <input type="hidden" name="action" value="update_password">
        <button type="submit" class="btn btn-warning">Save</button>
    </form>
</div>
</div>

<b class="text-secondary">Phone Number</b><br>
<div  class="card mb-5 mt-2 bg-white">
<div class="card-body">

    <div id="recaptcha-container"></div>

    <div id="get-code" class="input-group mb-3">
        <input type="text" class="form-control" placeholder="Phone Number" >
        <button class="btn btn-warning" type="button">Send Code</button>
    </div>
    
    <div id="verify-code"  class="input-group mb-3 d-none">
        <input type="text" class="form-control" placeholder="Verification Code" >
        <button class="btn btn-warning" type="button">Verify Code</button>
    </div>
    
</div>
</div>

 <script src="https://code.jquery.com/jquery-3.7.0.js"
integrity="sha256-JlqSTELeR4TLqP0OG9dxM7yDPqX1ox/HfgiSLBj8+kM="
crossorigin="anonymous"></script>

<script>
// Your web app's Firebase configuration
var firebaseConfig = {
    apiKey: "AIzaSyDNcxG4K_QS-Cy3XVy9ZOBfuDTt5e5XSp0",
    authDomain: "localhost",
    projectId: "fastparcel2-c3a7d",
    storageBucket: "fastparcel2-c3a7d.appspot.com",
    messagingSenderId: "281261021633",
    appId: "1:281261021633:web:c085bb17b137f82cce7740"
};
// Initialize Firebase
firebase.initializeApp(firebaseConfig);


window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');

$("#get-code button").on('click', function () {
    const phoneNumber = $("#get-code input").val();
    console.log(phoneNumber);

    firebase.auth().signInWithPhoneNumber(phoneNumber, window.recaptchaVerifier)
      .then((confirmationResult) => {
        // SMS sent. Prompt user to type the code from the message, then sign the
        // user in with confirmationResult.confirm(code).
        console.log(confirmationResult);
        window.confirmationResult = confirmationResult;

        $("#get-code").addClass("d-none");
        $("#verify-code").removeClass("d-none");
      }).catch((error) => {
        // Error; SMS not sent
        console.log(error);
      });
});

$("#verify-code button").on('click', function () {
    const code = $("#verify-code input").val();

    confirmationResult.confirm(code).then((result) => {
      // User signed in successfully.
      const user = result.user;
      console.log(user.phoneNumber);

      user.getIdToken().then(function (idToken) {
        onVerify(idToken);
      });
    }).catch((error) => {
      // User couldn't sign in (bad verification code?)
      console.log(error);
    });
});
</script>
{% endblock main %}

解决方案 #

1. 修正Firebase authDomain配置 #

当前代码中authDomain设为"localhost"不符合Firebase格式要求，正确的authDomain应为Firebase控制台显示的格式，比如[项目ID].firebaseapp.com或已绑定的自定义域名。即使本地测试，也需保持与控制台一致的域名格式，不能直接写localhost。

2. 补充带端口的本地授权域名 #

如果本地开发使用非默认端口（如8000），需在Firebase控制台「Authentication」>「设置」>「授权域名」中添加完整地址localhost:8000（替换为你的实际端口），而非仅添加localhost。

3. 优化reCAPTCHA初始化参数 #

创建RecaptchaVerifier时显式配置参数，避免加载异常：

window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container', {
  'size': 'normal', // 或 'invisible'，根据需求选择
  'callback': function(response) {
    // 验证成功回调，可留空
  },
  'expired-callback': function() {
    // 验证过期处理
  }
});

4. 确保脚本加载顺序与时机 #

将reCAPTCHA初始化代码放在页面加载完成后执行，避免DOM未就绪导致的问题：

$(document).ready(function() {
  window.recaptchaVerifier = new firebase.auth.RecaptchaVerifier('recaptcha-container');
});

5. 校验手机号格式 #

调用signInWithPhoneNumber时，手机号必须包含国家码前缀（如+8613xxxxxxxxx），否则会触发验证错误。可在前端添加格式校验，确保用户输入符合要求。

内容的提问来源于stack exchange，提问作者gaurav barbhai