使用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。但是,我在登录窗口中看到的只是“欢迎使用我的超赞应用程序”和“正在加载...”。
是否应该加载诸如登录按钮之类的东西?
我想念什么?为了简单起见,我省略了电子邮件地址和密码注册。我只设置了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模块,我也不会感到惊讶。
谢谢!