Master The Art of Angular 5 Google Authentication

0
77
Angular 5 Google Authentication

Angular 5 is a latest version of the angular JS framework that is developed by Google. In this article, we are going to learn how to integrate Google Authentication in Angular 5. In this article, we will use angular five as the primary database for your project. You will also learn routing for which we will use the angularfire2 component that will help us communicate with the Google firebase. We will also create a database and use the cloud Firestore in this project.

To start the project you will need a few software downloads, mainly Visual Study Code for editing the code and NodeJS. You can download both the software in the links provided below:
Visual studio code – https://code.visualstudio.com/download

Node JS – https://nodejs.org/en/

Open the command prompt as an administrator and install the Angular CLI in your system using the command below. The Angular CLI is a command line interface for angular.

The command above will install the Angular CLI in your system and now you will need to Run the command using the code snippet below to create an Angular Project in your project folder –

Angular CLI
Run the “code” command to open the project in visual studio code
Your should be able to see your project in visual studio code. Now go to Angular 5 project and run the following command to run the project –

You will see project will run on “http://localhost:4200/”
local host
Connecting to the database:
1) Go to the “https://console.firebase.google.com/” site and click on Get Started
2) Click on Add Project and create a project under the name “CMS Database”. Also select United States in the region section. Your project with the name “CMS Database” should be created.
3) Check project overview and click on “Add Firebase To Your Web App”.
Connecting to the database
The configuration section of the Firebase database should be open as shown below in the screenshot –
configuration firebase
Basically, Google does not need all the parts of this section, but just the configuration part which is this –

Open your “environment.ts” file located in “C:\project\angular5\src\environments/environment.ts ” and add the code below –

Now, open “environment.prod.ts” from “C:\project\angular5\src\environments” location and add this code –

Install Angular fire2

Now, let’s install Angular Firebase. Check the link below to get more detailed information on Angular Fire 2.
https://github.com/angular/angularfire2

In your visual studio code, click on the View Button, you will see the integrated terminal option in the list. Open integrated terminal to execute the command below –

Create pages.json file in your desktop and add code below:

Now, go to the Firebase console and click on the database and select realtime database as shown below
console firebase
Click on the database, you will see your database name “CMS database” and on the right corner, you will see 3 dots that are used for importing JSON files. Click on those 3 dots and import the pages.json file from desktop.

Create new a component:

Open an integrated terminal and run the command below to install component globally

The above command will create a new folder with the pages-list. Now,
open the “pages-list.component.ts” file and add the code below –

open “pages-list.component.html” and add code below

open app.component.ts file from src folder and add code below

Open the “app.module.ts” file and add the code below –

Open your Firebase Console and go to the database-> rules
Now, change the code to the one given below –

Go to the Firebase Console and click on authentication and enable Google Authentication. Check the image below to help you further.
Firebase Console

Create The Second Component

Go to the integrated terminal and run the command below to create a component for the login-page using the code – “ng g component login-page ”

To create routing for this project, go to “C:\project\angular5\src\app” folder and create the “app-routing.module.ts” file and add the following code –

Add the code below in the app.module.ts file. Save and close.

Now, open the “pages-list.component.html” file from the page-list folder and add the code below

Open the “app.component.html” file from the SRC folder and add code below

You are now done with this part! To check if it works, open the http://localhost:4200/login and you will see the message login page works! as shown below

Login message

However, we still have to create a service provider, which we will do now.

To create a service provider, open an integrated terminal and run the command below to install the service providers. You will see the in-app folder and the provider folder will be created – “ng g service providers/af”

Now, inside the provider’s folder, you will see “af.service.ts” file, open this file and add the code below. Save and close.

open a “login-page.component.ts” file from “C:\project\angular5\src\app\login-page”location

open “login-page.component.html” file from “C:\project\angular5\src\app\login-page”

To check if your project is running, simply log on to your local host, in this case http://localhost:4200/login“. Now, you can login and logout using your Google Account.

Login page

Welcome login page

 

LEAVE A REPLY

Please enter your comment!
Please enter your name here