有没有办法在 web 的 firebase 电话身份验证中将国家/地区动态分配给 defaultCountry？答案

【问题标题】：Is there a way to dynamically assign a country to defaultCountry in firebase phone authentication for web?有没有办法在 web 的 firebase 电话身份验证中将国家/地区动态分配给 defaultCountry？
【发布时间】：2021-06-22 01:34:00
【问题描述】：

我正在尝试对 web 和 vuejs 使用 firebase 电话身份验证。我想检测用户所在的国家/地区，并将检测到的国家/地区指定为 firebaseui 配置中的 defaultCountry。

signInOptions: [
            firebase.auth.EmailAuthProvider.PROVIDER_ID,
            {
                provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
                recaptchaParameters: {
                    type: 'image',
                    size: 'invisible',
                    badge: 'bottomleft'
                },
                defaultCountry: `'${this.countryCode}'`
            }
        ]

下面是我用来成功获取国家并赋值给data()中的一个变量的方法

created() {
    this.getDefaultCountry()
},

我什至尝试过

defaultCountry: this.countryCode

如果我硬编码一个国家代码（'US'、'NZ'、...），它可以工作。

谢谢

【问题讨论】：

标签： firebase vue.js web firebase-authentication

【解决方案1】：

如果this.getDefaultCountry() 是同步的（即不需要任何数据库查找、承诺等），您应该能够使用以下代码，其中defaultCountry 被替换为getter 而不是静态值：

signInOptions: [
  firebase.auth.EmailAuthProvider.PROVIDER_ID,
  {
    provider: firebase.auth.PhoneAuthProvider.PROVIDER_ID,
    recaptchaParameters: {
        type: 'image',
        size: 'invisible',
        badge: 'bottomleft'
    },
    get defaultCountry() {
      // contents of getDefaultCountry here
    }
  }
]

如果您的 this.getDefaultCountry() 是异步的，那么您将不得不在获取值时显示某种形式的加载屏幕，构建 signInOptions，将其提供给您的 FirebaseUI 配置，然后最终呈现它。

【讨论】：

它是异步的。我让它工作。谢谢老兄。