Join Ray Villalobos for an in-depth discussion in this video Integrating Firebase into our application, part of AngularJS 1: Adding Registration to Your Application.
You can do that by clicking on this sign up link right here and then going through the different prompts. Now I already have an account so I'm going to login into my account. And you just type in an email and a password. And once you do that you'll go into the Firebase Dashboard. Now this should look slightly different for you since you won't have any apps created yet. To create an app, you simply specify an app's name. So I'm going to type in right here and just put in something like a-n-g-r-e-g and then I'll just type in a number.
You can put in your own application name and notice that it's also creating an app URL for you. The actual app URL is what appears down here. This is a really important concept in Firebase because the URL is also how you access your data. So you're going to need to remember what this is. Once you've created an app name, I'm going to click on this button right here to create my app. And once you do that you'll see that it'll appear right here on the list of apps and you can click on Manage App to take a look at the data inside your application.
Now obviously we haven't done anything yet, so there will be no data in here. But if you want to you can import or export the data by clicking on these buttons. So you can literally import a JSONObject into your database and start using Firebase with existing data. Now you'll notice that when we take a look at the URL bar you'll see that this URL is exactly the URL for our application. So it's how you access the Firebase tool for looking at the data as well as how you refer to the data within your application.
Now this tool is sometimes referred to as the Forge tool. It's a visual tool where you can manage the data for your app and do some other utility things. What we want to do is go to the left side and click on Login & Authentication. That is going to allow us to turn on the authentication for our app in different formats. So you can see down here that it allows you to do email and password authentication as well as Facebook, Twitter, GitHub, Google, and others.
Now the one that we're interested in for our app is going to be this Email & Password. So I'm going to click on email & password authentication and that is going to turn on some additional features right here. So you can see that through this interface we can also reset passwords if we've had some users already authenticate with Firebase and down here will be a list of users. Now, of course, we don't have any users quite yet. We haven't done anything, but this is where you can take a look at the list of currently registered users.
And you can add a user manually right here or click on a user when you have one and delete them. Now one thing that is important up here is this Session Length parameters. So if you want your application to automatically log off a user if they haven't been around for a certain time, you would type that here. So you can say after 24 hours, the cookie that I'm storing for this user will disappear and they will have to login again into your application.
So you can control how long that happens. Now you can also authorize different domains if you've got some security sort of concerns. You can type those domains right here as well. But the default setting should work pretty well for what we're going to be doing. However, in order to use Firebase in our application we're going to add some scripts into our index.html page. Now to do that you can go to this page right there and if you scroll down you can see that you can add these script dependencies by just copying some code and adding it to your app.
But because we're using AngularJS we need to also include, of course, the AngularJS library. Now that one is sometimes referred to as AngularFire as you can see right here. And on the left you can see some of the other libraries that you have access to. So let's go ahead and switch over to our application. And I'm going to back into my index.html file and after I load up my Angular libraries, before I load my application code and my controllers, I'm going to paste those two links.
I don't need the comments. You can leave them if you want to. I like to sort of put a little bit of separation between the Angular libraries and then the Firebase scripts and then the actual code that we are writing ourselves. So that's all you need to add the registration features of Firebase as well as the script that is going to bring in the services that we need to control registration within our application. We'll start working with that in the next video.
- Adding a basic MVC structure
- Using routes
- Processing form input
- Integrating Firebase
- Storing registration information in the database
- Logging users in and out of an app