npm 包 react-firebaseui-localized 使用教程-JavaScript中文网-JavaScript教程资源分享门户

React-firebaseui-localized 是一个 React 组件库，用于实现与 Firebase 集成的用户界面，其中包括登录、注册和更改密码等操作。该组件库支持多语言本地化。在本文中，我们将详细介绍如何使用 react-firebaseui-localized 构建一个完整的 Firebase 用户界面。

安装和导入 react-firebaseui-localized

你需要使用 npm 包管理工具在你的项目中安装 react-firebaseui-localized。在终端中运行以下命令：

npm install react-firebaseui-localized

接下来，你需要导入 react-firebaseui-localized 组件。在你的 React 组件中添加以下代码：

import React from 'react';
import Firebase from 'firebase';
import StyledFirebaseAuth from 'react-firebaseui-localized';

设置 Firebase 配置

在使用 react-firebaseui-localized 组件之前，你需要配置一个 Firebase 应用。在 Firebase 控制台中创建一个新的项目并获取 Firebase 配置信息（项目 ID、API 密钥等）。

随后，在你的 React 组件中添加以下代码：

const config = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  databaseURL: 'YOUR_DATABASE_URL',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

Firebase.initializeApp(config);

集成 Firebase 登录

有了 Firebase 配置信息后，你就可以开始使用 react-firebaseui-localized 组件来实现登录了。在你的 React 组件中添加以下代码：

const uiConfig = {
  signInFlow: 'popup',
  signInSuccessUrl: '/dashboard',
  signInOptions: [
    Firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    Firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    Firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    Firebase.auth.EmailAuthProvider.PROVIDER_ID,
  ],
  tosUrl: '/terms-of-service',
  privacyPolicyUrl: '/privacy-policy',
  callbacks: {
    signInSuccessWithAuthResult: (authResult) => {
      // 在此添加任何成功登录后的操作
    },
  },
};

const Login = () => {
  return (
    <div>
      <h1>登录</h1>
      <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={Firebase.auth()} />
    </div>
  );
};

在上面的代码中，我们定义了一些配置以设置登录界面，例如签入流程、成功签入后的 URL 和提供商 ID。你可以根据你的需求更改这些配置项。

集成 Firebase 注册和重置密码

除了登录，你可能还需要实现注册和重置密码功能。使用 react-firebaseui-localized，你可以轻松地实现这些操作。在上面的代码中，我们已经定义了一个 uiConfig 对象，你可以添加其他配置来支持注册和密码重置。

const uiConfig = {
  signInFlow: 'popup',
  signInSuccessUrl: '/dashboard',
  signUpOptions: [
    Firebase.auth.EmailAuthProvider.PROVIDER_ID,
  ],
  signInOptions: [
    Firebase.auth.GoogleAuthProvider.PROVIDER_ID,
    Firebase.auth.FacebookAuthProvider.PROVIDER_ID,
    Firebase.auth.TwitterAuthProvider.PROVIDER_ID,
    Firebase.auth.EmailAuthProvider.PROVIDER_ID,
  ],
  tosUrl: '/terms-of-service',
  privacyPolicyUrl: '/privacy-policy',
  callbacks: {
    signInSuccessWithAuthResult: (authResult) => {
      // 在此添加任何成功登录后的操作
    },
    signUpSuccess: (result) => {
      // 在此添加任何成功注册后的操作
    },
    passwordResetSuccess: () => {
      // 在此添加任何成功重置密码后的操作
    },
  },
};

const Auth = () => {
  return (
    <div>
      <h1>登录或注册</h1>
      <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={Firebase.auth()} />
    </div>
  );
};

实现多语言本地化

react-firebaseui-localized 组件库支持多语言本地化，你可以将界面的文本翻译成不同的语言。首先，你需要安装 react-intl 包。

npm install react-intl

接下来，在你的 React 组件中添加以下代码：

import { IntlProvider, addLocaleData } from 'react-intl';
import locale_en from 'react-intl/locale-data/en';
import locale_zh from 'react-intl/locale-data/zh';
import messages_en from './translations/en';
import messages_zh from './translations/zh';

addLocaleData([...locale_en, ...locale_zh]);

const messages = {
  'en': messages_en,
  'zh': messages_zh,
};

const locale = navigator.language.split(/[-_]/)[0];

const uiConfig = {
  ...,
  signInOptions: [
    {
      provider: Firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      languageCode: locale,
    },
    ...
  ],
  signUpOptions: [
    Firebase.auth.EmailAuthProvider.PROVIDER_ID,
  ].map((provider) => {
    return {
      provider,
      defaultLanguage: locale,
    };
  }),
  ...
};

const Auth = () => {
  return (
    <IntlProvider locale={locale} messages={messages[locale]}>
      <div>
        <h1>登录或注册</h1>
        <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={Firebase.auth()} />
      </div>
    </IntlProvider>
  );
};

在上面的代码中，我们首先导入了 react-intl 包，并添加了英语和中文本地化信息。接下来，我们根据用户的浏览器设置的语言设置语言。

最后，在 uiConfig 中添加了每个提供程序的 languageCode 或 defaultLanguage 属性。但需要注意，不是所有的提供程序都支持本地化。

示例代码

下面是一个完整的示例，用于展示如何使用 react-firebaseui-localized 实现登录、注册和重置密码功能，并实现多语言本地化。

import React from 'react';
import Firebase from 'firebase';
import StyledFirebaseAuth from 'react-firebaseui-localized';
import { IntlProvider, addLocaleData } from 'react-intl';
import locale_en from 'react-intl/locale-data/en';
import locale_zh from 'react-intl/locale-data/zh';
import messages_en from './translations/en';
import messages_zh from './translations/zh';

addLocaleData([...locale_en, ...locale_zh]);

const messages = {
  'en': messages_en,
  'zh': messages_zh,
};

const config = {
  apiKey: 'YOUR_API_KEY',
  authDomain: 'YOUR_AUTH_DOMAIN',
  databaseURL: 'YOUR_DATABASE_URL',
  projectId: 'YOUR_PROJECT_ID',
  storageBucket: 'YOUR_STORAGE_BUCKET',
  messagingSenderId: 'YOUR_MESSAGING_SENDER_ID',
  appId: 'YOUR_APP_ID',
};

Firebase.initializeApp(config);

const Auth = () => {
  const locale = navigator.language.split(/[-_]/)[0];

  const uiConfig = {
    signInFlow: 'popup',
    signInSuccessUrl: '/dashboard',
    signInOptions: [
      {
        provider: Firebase.auth.GoogleAuthProvider.PROVIDER_ID,
        languageCode: locale,
      },
      {
        provider: Firebase.auth.FacebookAuthProvider.PROVIDER_ID,
        languageCode: locale,
      },
      {
        provider: Firebase.auth.TwitterAuthProvider.PROVIDER_ID,
        languageCode: locale,
      },
      {
        provider: Firebase.auth.EmailAuthProvider.PROVIDER_ID,
        defaultLanguage: locale,
      }
    ],
    signUpOptions: [
      Firebase.auth.EmailAuthProvider.PROVIDER_ID,
    ].map((provider) => {
      return {
        provider,
        defaultLanguage: locale,
      };
    }),
    tosUrl: '/terms-of-service',
    privacyPolicyUrl: '/privacy-policy',
    callbacks: {
      signInSuccessWithAuthResult: (authResult) => {
        // 在此添加任何成功登录后的操作
      },
      signUpSuccess: (result) => {
        // 在此添加任何成功注册后的操作
      },
      passwordResetSuccess: () => {
        // 在此添加任何成功重置密码后的操作
      },
    },
  };

  return (
    <IntlProvider locale={locale} messages={messages[locale]}>
      <div>
        <h1>登录或注册</h1>
        <StyledFirebaseAuth uiConfig={uiConfig} firebaseAuth={Firebase.auth()} />
      </div>
    </IntlProvider>
  );
};

export default Auth;

结论

通过这篇文章，你应该已经掌握了如何使用 react-firebaseui-localized 创建一个完整的 Firebase 用户界面，并实现了多语言本地化。这些知识不仅对于前端开发者非常重要，对于任何希望深入了解 Firebase 并实现用户身份验证的人来说也非常有用。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/600673e1fb81d47349e53d50