为什么 Firebase 身份验证模拟器使用生产？

Question

我正在尝试使用 Firebase 身份验证模拟器，但我发现即使模拟器正在运行并启用，身份验证也会发生在生产环境中。

我在 firebase/auth.js

中有以下内容

// imports and stuff...

firebase.initializeApp(firebaseConfig);

export const firebaseAuth = firebase.auth()
if (DEBUG_MODE) {
    firebaseAuth.useEmulator('http://localhost:9099');
}

// declare a class to make mocking easier...maybe I just don't know how to properly mock constants?
export class FirebaseAuth {
    static getAuth() {
        return firebaseAuth
    }
}

然后，我有一个 SignIn 组件，就像在 https://github.com/firebase/firebaseui-web-react#using-styledfirebaseauth-with-local-state 处找到的 SignInScreen 示例一样 - 尽管一个区别是该组件使用从 firebaseAuth 导出的 auth.js见上图。

import React from 'react';
import StyledFirebaseAuth from 'react-firebaseui/StyledFirebaseAuth';
import { uiConfig, FirebaseAuth } from '../firebase/auth';
import { useQuery } from '../hooks';

function SignIn() {
    let params = useQuery()
    let redirectUrl = params.get('redirect_url');
    const config = Object.assign({}, uiConfig, {signInSuccessUrl: redirectUrl})
    return (
        <div>
            <p>Please sign-in:</p>
            <StyledFirebaseAuth uiConfig={config} firebaseAuth={FirebaseAuth.getAuth()} />
        </div>
    );
}

export default SignIn

当我在本地运行我的 react 应用程序时，我看到 firebase 正在根据我的应用程序底部显示的这个消息检测模拟器：

但是，我发现当我尝试登录生产实例时使用了 firebase auth。新用户是在 https://console.firebase.google.com/u/0/project/sagereact/authentication/users 而不是我的本地模拟器中创建的。

此外，当我硬刷新我的 web 应用程序时，我看到以下日志行，这也将我注销：

⚠  Received a signed JWT. Auth Emulator does not validate JWTs and IS NOT SECURE

我已经确认我的模拟器正在运行：

 ❮❮❮ firebase emulators:start
i  emulators: Starting emulators: auth, functions, firestore, database, hosting, pubsub
...stuff

┌────────────────────────────────────────────────────────────────┐
│ ✔  All emulators ready! View status and logs at localhost:4000 │
└────────────────────────────────────────────────────────────────┘

┌────────────────┬────────────────┬──────────────────────────┐
│ Emulator       │ Host:Port      │ View in Emulator UI      │
├────────────────┼────────────────┼──────────────────────────┤
│ Authentication │ localhost:9099 │ localhost:4000/auth      │
├────────────────┼────────────────┼──────────────────────────┤
│ Functions      │ localhost:5001 │ localhost:4000/functions │
├────────────────┼────────────────┼──────────────────────────┤
│ Firestore      │ localhost:8080 │ localhost:4000/firestore │
├────────────────┼────────────────┼──────────────────────────┤
│ Database       │ localhost:9000 │ localhost:4000/database  │
├────────────────┼────────────────┼──────────────────────────┤
│ Hosting        │ localhost:5055 │ n/a                      │
├────────────────┼────────────────┼──────────────────────────┤
│ Pub/Sub        │ localhost:8085 │ n/a                      │
└────────────────┴────────────────┴──────────────────────────┘
  Other reserved ports: 4400, 4500

Issues? Report them at https://github.com/firebase/firebase-tools/issues and attach the *-debug.log files.

和

我如何找出为什么 firebase 不使用我的本地模拟器进行身份验证？

Answer 1

您需要从您的客户端代码设置身份验证模拟器。下面是 Dart 中使用 Flutter 的等效项：

void main() async {
  WidgetsFlutterBinding.ensureInitialized();
  var app = await Firebase.initializeApp();

  if (USE_FIRESTORE_EMULATOR) {
    FirebaseFirestore.instance.settings = Settings(host: 'localhost:8080', sslEnabled: false, persistenceEnabled: false);
    FirebaseFunctions.instance.useFunctionsEmulator(origin: 'http://localhost:5001');
    FirebaseAuth.instanceFor(app: app).useEmulator('http://localhost:9099');
  }

对于 firebaseui-web-react，请查看此拉取请求 (https://github.com/firebase/firebaseui-web-react/pull/125) 并确保您使用的是正确的版本。