React 应用程序中的 firebaseui 本地化答案

【问题标题】：firebaseui localization in React appReact 应用程序中的 firebaseui 本地化
【发布时间】：2018-10-13 15:49:29
【问题描述】：

我正在尝试在我的 React 应用中本地化 FirebaseUI。当用户更改语言时，将调度一个动作。我正在使用中间件（目前是 redux-saga，但我也有 redux-thunk）。

我不知道如何更改身份验证 UI 以显示本地化的按钮字符串。

首先我使用的是：

var firebase = require('firebase')
var firebaseui = require('firebaseui')

从 node_modules 加载。

现在我知道我需要加载特定的本地化 cdn，例如，如果我想要法语。所以我将应用程序更改为在 index.html 页面中有指向 cdn 的链接，然后使用

var firebase = window.firebase
var firebaseui = window.firebaseui
let ui = new firebaseui.auth.AuthUI(firebase.auth())

然后当他们进入登录页面时：

ui.start('#firebase-auth-container',uiconfig)

但是，当用户获取 index.html 时，这显然会加载特定语言。然后如何在 SPA React 应用程序中更改该 CDN？我尝试使用 react-helmet 但

a) 我不认为这会取代原来的 cdn，它只是添加了一个新的

b) 它对我不起作用。我尝试了 ui.reset() 但这似乎没有任何作用。

有没有人做过这个，可以告诉我应该怎么做？

谢谢

【问题讨论】：

标签： reactjs firebase firebase-authentication firebaseui

【解决方案1】：

我一直在寻找做同样的事情。似乎 they suggest to load the localized widget 但我没有看到使用动态语言的简单方法。

这是我的解决方案，灵感来自this：


setTimeout(() => {
  let providers = [{
      key: 'email',
      provider: firebase.auth.EmailAuthProvider.PROVIDER_ID,
    },
    {
      key: 'google',
      provider: firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    },
    {
      key: 'facebook',
      provider: firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    }
  ]

  providers.forEach(({
    key,
    provider
  }) => {
    let button = document.querySelector(`[data-provider-id="${provider}"] .firebaseui-idp-text-long`)
    if (button) {
      button.innerHTML = this.$t(`Sign_in_with_${key}`)
    }
  })
})

【讨论】：