在Flutter网页项目中用.gitignore隐藏你的Firebase配置

在Flutter应用中添加Firebase时，我们需要在Android上添加google-services.json ，在iOS上添加GoogleService.plist 。

在网页上也需要类似的设置。我们可以从Firebase项目设置中复制这个脚本，并将其添加到生成的index.html 文件的body 标签中。

<!-- The core Firebase JS SDK is always required and must be listed first -->
<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-app.js"></script>

<!-- TODO: Add SDKs for Firebase products that you want to use
     https://firebase.google.com/docs/web/setup#available-libraries -->
<script src="https://www.gstatic.com/firebasejs/7.14.0/firebase-analytics.js"></script>

<script>
  // Your web app's Firebase configuration
  var firebaseConfig = {
    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>",
    measurementId: "<your-measurement-id>"
  };
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

然而，firebaseConfig 里面的所有值最好都储存在一个单独的文件里面。这对公共开源项目来说非常有用，这样我们就不会把我们的Firebase配置细节分享给整个世界。 😉

为了解决这个问题，我们可以把生成的firebaseConfig 变量移到我们项目的./firebase-config.js 文件中（确保使用export ）。

export var firebaseConfig = {
    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>",
    measurementId: "<your-measurement-id>"
};

然后我们可以在index.html 文件中导入。

<script src="./firebase-config.js"></script>

<!-- https://stackoverflow.com/questions/950087/how-do-i-include-a-javascript-file-in-another-javascript-file -->
<script type="module">
  // Your web app's Firebase configuration
  import { firebaseConfig } from './firebase-config.js';
  // Initialize Firebase
  firebase.initializeApp(firebaseConfig);
  firebase.analytics();
</script>

最后，我们可以从git上隐藏这个配置文件，把它添加到.gitignore 。

# web
web/firebase-config.js

Viola!我们现在可以提交和推送，安全地知道firebase-config.js 将对我们保持隐私。

注意：这并不妨碍最终用户看到配置变量，因为一旦网络应用被加载，很容易检查所有加载的Javascript代码。不过，在分享开源项目时，不提交这些代码还是很有用的，就像我在这里做的那样。

编码愉快!