将 Firebase 身份验证添加到 angular-cli 2 应用程序

Question

这是一个新手问题。我已经完成了添加 Google 身份验证的 Firebase 教程，效果很好。我还完成了 angular-cli 快速入门教程，这也很好。但是，在 Firebase 教程中，您将身份验证脚本（如下）添加到 index.html 页面，而在 angular-cli 应用程序中，您不应修改 index.html 文件。那么，将 Firebase 身份验证脚本放在哪里的最佳做法是什么？

<script src="https://www.gstatic.com/firebasejs/3.0.5/firebase.js"></script>
  <script>
    // Initialize Firebase
    // TODO: Replace with your project's customized code snippet
    var config = {
      apiKey: "apiKey",
      authDomain: "projectId.firebaseapp.com",
      databaseURL: "https://databaseName.firebaseio.com",
      storageBucket: "bucket.appspot.com",
    };
    firebase.initializeApp(config);
  </script>

Answer 1

如果您不想更改 CLI 文件结构，可以下载脚本并将其添加到 angular-cli-builds.js -> vendorNpmFiles；添加 map/package 信息到 src/system-config.ts:

/*******************************************************************************
 * User Configuration.
 *******************************************************************************/
/** Map relative paths to URLs. */
const map: any = {
  'firebase': 'vendor/firebase.js'
};

/** User packages configuration. */
const packages: any = {
  // not sure if this is needed
  // or what type of module the file is...
  'firebase': { defaultExtension: 'js' } 
};

然后将初始化代码添加到main.ts:

// imports and stuff
...

import * as firebase from 'firebase';
// import 'firebase'; // or this?
bootstrap(AppComponent).then(() => {
    // Initialize Firebase
    // TODO: Replace with your project's customized code snippet
    var config = {
      apiKey: "apiKey",
      authDomain: "projectId.firebaseapp.com",
      databaseURL: "https://databaseName.firebaseio.com",
      storageBucket: "bucket.appspot.com",
    };
    firebase.initializeApp(config);
});

此处有更多信息：3rd party lib installation。

Answer 2

我在这里找到了 AugularFire2 用户身份验证的文档页面： https://github.com/angular/angularfire2/blob/master/docs/5-user-authentication.md

将 Firebase 身份验证添加到 angular-cli 2 应用程序

Adding Firebase authentication to angular-cli 2 app

google-authentication

firebase

angular