Ionic React结合Firebase手机号认证如何自定义OTP短信内容

移除短信中的localhost字段 #

出现该字段的原因是本地开发时默认使用localhost作为授权域名，被自动带入短信模板，操作方法如下：

• 打开Firebase控制台进入对应项目，选择「Authentication」板块
• 点击顶部「设置」标签，找到「授权域名」配置区
• 将你项目的正式域名添加到授权域名列表中（Firebase默认提供的xxx.firebaseapp.com域名也可直接使用）
• 修改Ionic React项目中Firebase初始化配置的authDomain参数为刚配置的正式域名，示例配置如下：

const firebaseConfig = {
  apiKey: "YOUR_API_KEY",
  authDomain: "your-project-id.firebaseapp.com", // 替换为你的授权域名
  projectId: "YOUR_PROJECT_ID",
  storageBucket: "YOUR_STORAGE_BUCKET",
  messagingSenderId: "YOUR_SENDER_ID",
  appId: "YOUR_APP_ID"
};

配置修改后重新打包应用，后续发送的OTP短信就不会再出现localhost字段。

自定义OTP短信整体内容 #

如果需要完全自定义短信文本，直接修改Firebase的短信模板即可：

• 进入Firebase控制台「Authentication」板块，选择「模板」标签
• 找到「短信验证」模板，点击右侧编辑按钮
• 按需求修改短信全文，模板内置两个可直接使用的变量：
  • %CODE%：自动填充生成的OTP验证码
  • %APP_NAME%：自动填充你在Firebase项目中设置的应用名称
• 修改完成后点击保存，新模板会立即生效。

注意：修改模板时不要改动变量的格式，否则会导致验证码或应用名称无法正常替换。本地开发阶段可直接在「Authentication」→「设置」→「手机号测试」中添加测试手机号和固定验证码，无需实际发送短信即可完成功能调试。

内容的提问来源于stack exchange，提问作者Sajith Kumar