FirebaseUI是否可以与AngularJS一起使用?我需要在app.js中进行模块化吗?

时间:2020-10-17 00:07:09

标签: angularjs firebase firebase-authentication firebaseui

使用Authenticate Using Google Sign-In with JavaScript中的代码,Firebase Auth在我的应用程序中已经运行了近四年了。使用

firebase.auth().signInWithPopup(provider)

我看到有一种编码Firebase Auth的新方法:Easily add sign-in to your Web app with FirebaseUI。但是,我在登录窗口中看到的只是“欢迎使用我的超赞应用程序”和“正在加载...”。

enter image description here

是否应该加载诸如登录按钮之类的东西?

enter image description here

我想念什么?为了简单起见,我省略了电子邮件地址和密码注册。我只设置了OAuth注册。我将以下代码复制并粘贴到了index.html文件中:

<script src="https://www.gstatic.com/firebasejs/ui/4.7.0/firebase-ui-auth.js"></script>
<link type="text/css" rel="stylesheet" href="https://www.gstatic.com/firebasejs/ui/4.7.0/firebase-ui-auth.css" />

<script type="text/javascript">

  // Initialize the FirebaseUI Widget using Firebase.
  var ui = new firebaseui.auth.AuthUI(firebase.auth());

  // OAuth providers
  ui.start('#firebaseui-auth-container', {
    signInOptions: [
      // List of OAuth providers supported.
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      firebase.auth.TwitterAuthProvider.PROVIDER_ID,
      firebase.auth.GithubAuthProvider.PROVIDER_ID
    ],
    // Other config options...
  });

  // FirebaseUI config
  var uiConfig = {
    callbacks: {
      signInSuccessWithAuthResult: function(authResult, redirectUrl) {
        // User successfully signed in.
        // Return type determines whether we continue the redirect automatically
        // or whether we leave that to developer to handle.
        return true;
      },
      uiShown: function() {
        // The widget is rendered.
        // Hide the loader.
        document.getElementById('loader').style.display = 'none';
      }
    },
    // Will use popup for IDP Providers sign-in flow instead of the default, redirect.
    signInFlow: 'popup',
    signInSuccessUrl: '<url-to-redirect-to-on-success>',
    signInOptions: [
      // Leave the lines as is for the providers you want to offer your users.
      firebase.auth.GoogleAuthProvider.PROVIDER_ID,
      firebase.auth.FacebookAuthProvider.PROVIDER_ID,
      firebase.auth.TwitterAuthProvider.PROVIDER_ID,
      firebase.auth.GithubAuthProvider.PROVIDER_ID,
    ],
    // Terms of service url.
    tosUrl: '<your-tos-url>',
    // Privacy policy url.
    privacyPolicyUrl: '<your-privacy-policy-url>'
  };

  // The start method will wait until the DOM is loaded.
  ui.start('#firebaseui-auth-container', uiConfig);

  </script>

我没有创建重定向URL,tos URL或隐私政策URL。

我应该将代码而不是index.html放入我的AngularJS控制器中吗?我的控制器中什么也没有:

app.controller('LandingLoginController', function($scope, $location, $mdDialog, userFactory) {

});

我将此HTML放入模板中

  <h1>Welcome to My Awesome App</h1>
  <div id="firebaseui-auth-container"></div>
  <div id="loader">Loading...</div>

我没有收到任何错误消息。我的猜测是模板和index.html没有互相交谈。 AngularJS控制器中的FirebaseUI是否需要依赖项注入?

我是否需要将另一个模块放入app.js,也许是firebaseui中?

'use strict';
var app = angular.module("LanguageTwoApp", [
  'ngRoute',
  'ngMaterial',
  'ui.bootstrap',
  'firebase',
  'ngSanitize',
  'com.2fdevs.videogular',
])

我看到有一个适用于Angular 2+的模块:FirebaseUi-Angular。这意味着如果没有Angular模块,FirebaseUI将无法工作,如果没有AngularJS模块,我也不会感到惊讶。

谢谢!

0 个答案:

没有答案