Bacancy Bacancy
  • Customers

      Fortune 500 Clients

      Verizon
      Verizon
      Franklin Templeton
      Franklin Templeton
      The Container Store
      The Container Store
      KPMG
      KPMG
      AdviceWorks
      AdviceWorks
      Bridgestone
      Bridgestone
      NatWest Markets
      NatWest Markets
      Shell
      Shell
      Bangkok Bank Ltd
      Bangkok Bank Ltd
      The Children's Place
      The Children's Place
      Edward Jones
      Edward Jones
      United Parcel Service
      United Parcel Service
      Academy Sports & Outdoors
      Academy Sports & Outdoors

      Case Studies

      React JS VueJS Angular JS React Native Flutter Full Stack
      Ruby on Rails Node JS Golang AI & ML Data Science Java
      Python Salesforce DevOps Laravel Mobile App Embedded & Hardware

      Industries

      Information Technology BFSI Education Marketing & Advertising Manufacturing Retail Logistics & Transportation
      Healthcare eCommerce Public Services Travel & Hospitality Cloud Telecommunications Real Estate
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • what we do

      Experience

      Digital Workplace Services Product Enhancement

      Insights

      AI & Automation Data Analytics

      SAP Solutions

      SAP Consultation

      Innovate

      Robotic Process Automation Software Engineering Services Internet of Things (IoT) Data Science Artificial Intelligence Machine Learning

      Accelerate

      Cloud - Bacancy Combat Digital Process Automation Open Source Microsoft Dynamics Salesforce

      Assure

      Quality Assurance IT Staff Augmentation

      Embedded & Hardware

      Product Engineering Analog Design Services FPGA Engineering Service Wireless Design Embedded Software Design

      not list

      Hardware Engineering Power Engineering IoT Hardware
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • who we work with

      Industries

      Banking Financial services & Insurance Startups Oil & Gas

      not list

      Healthcare Life Science Real Estate & Construction Logistics
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • about us

      Culture

      Agile Mindset Bacancy Values Bacancy Culture

      About Company

      About Us Leadership Team Awards & Recognition Infrastructure

      not list

      Customer Reviews Our Locations Partnership Media Coverage

      WE ARE

      GREAT PLACE TO WORK - CERTIFIEDTM

      Building and sustaining High-Trust, High-Performance CultureTM

      Bacancy Great Place to Work
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • technology

      Front End

      Angular Reactjs Vue.js UI/UX

      Platforms

      MS Dynamics Salesforce

      Back End

      Ruby on Rails Node.js Golang Laravel .NET Java Python

      Mobile

      React Native Flutter Android iOS

      Cloud

      AWS DevOps

      QA

      Automation Testing Software Testing

      Embedded & Hardware

      Embedded
      bacancy

      World-class expertise,Delivered

      get quote
      Explore All
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
  • PRODUCTS

      EV Products

      Battery Management System Motor Controller AC Charger Explore All

      not list

      CCS2 Controller DC Fast Charger AC Charge Controller
      bacancy

      Let’s grow together Partner with us

      get quote
      skype-icon

      Skype ID

      bacancy
      gmail-icon

      Email Us

      [email protected]
      call-yellow-icon

      USA

      +1 347 441 4161
      wp-icon

      UK

      +44 127 479 2316
hire developers

Bacancy

Bacancy represents the connected world, offering innovative and customer-centric information technology experiences, enabling Enterprises, Associates and the Society to Rise™.

12+

Countries where we have happy customers

1050+

Agile enabled employees

06

World wide offices

12+

Years of Experience

05

Agile Coaches

14

Certified Scrum Masters

1000+

Clients projects

1458

Happy customers

  • Customers
      Case Studies
      • React JS
      • Angular JS
      • Vue JS
      • Node JS
      • AI & ML
      • Explore All
      Fortune 500 Clients
      • Verizon
      • The Container Store
      • KPMG
      • Academy Sports & Outdoors
      • Bangkok Bank Ltd
      • The Children's Place
      • Edward Jones
      • Franklin Templeton
      • AdviceWorks
      • NatWest Markets
      • Bridgestone
      • United Parcel Service
      Industries
      • Information Technology
      • BFSI
      • Education
      • Marketing & Advertising
      • Manufacturing
      • Retail
      • Logistics & Transportation
      • Healthcare
      • eCommerce
      • Public Services
      • Travel & Hospitality
      • Cloud
      • Telecommunications
      • Real Estate
  • What we do
      Experience
      • Digital Workplace Services
      • Product Enhancement
      Insights
      • AI & Automation
      • Data Analytics
      SAP Solutions
      • SAP Consultation
      Innovate
      • Blockchain
      • Software Engineering Services
      • Internet of Things (IoT)
      Accelerate
      • Cloud - Bacancy Combat
      • Digital Process Automation
      • Open Source
      • Microsoft Dynamics
      • Salesforce
      • Service Experience Transformation
      Assure
      • Testing
      • Resource Augmentation
      Embedded & Hardware
      • Product Engineering
      • Analog Design Services
      • FPGA Engineering Service
      • Wireless Design
      • Embedded Software Design
      • Hardware Engineering
      • Power Engineering
      • IoT Hardware
      • AL/ML
  • who we work with
      Industries
      • Banking Financial services & Insurance
      • Startups
      • Oil & Gas
      • Healthcare Life Science
      • Real Estate & Construction
      • Logistics
  • About Us
      About Company
      • About Us
      • Leadership Team
      • Awards & Recognition
      • Infrastructure
      • Our Locations
      • Partnership
      Culture
      • Agile Mindset
      • Bacancy Values
      • Bacancy Culture
  • Technology
      Front End
      • Angular
      • Reactjs
      • Vue.js
      • UI/UX
      Platforms
      • MS Dynamics
      • Salesforce
      Back End
      • Ruby on Rails
      • Node.js
      • Golang
      • Laravel
      • .NET
      • Java
      • Python
      Mobile
      • React Native
      • Flutter
      • Android
      • iOS
      Cloud
      • AWS
      • DevOps
      QA
      • Automation Testing
      • Software Testing
      Embedded & Hardware
      • Embedded
      Explore All
  • Products
    • Battery Management System
    • Motor Controller
    • CCS2 Controller
    • AC Charger
    • DC Fast Charger
    • AC Charge Controller
    • Explore All
  • Careers
  • Work @ Bacancy
  • Blogs
  • Resources
  • Customer Reviews
  • Contact
  • Get Quote
FB Authenticate Using Angular 8

How to Integrate Google and Facebook Authenticate Using Angular 8

Chandresh Patel
Chandresh Patel CEO and Agile Coach
Last Updated on December 28, 2021 | Written By: Dolly Shah
March 9, 2020 7 min read

Many of you might have used Sign-In with Google or Facebook in several websites to escape prolonged Sign Up procedure. Right?

Yes, I have too logged in this way. As I dive into a developer career, I was always fascinated to know how social logins actually work on any website. So, after exploring, I am here to share my knowledge.

So, in this article, we will gradually learn how any user can register into our application using Google or Facebook Sign-In in Angular.

Note:- I am not going to use any NPM package for this.

Let’s get started!

GMAIL

To integrate Gmail Sign in, we need to have an OAuth Client ID from the developer’s console. So, first of all, let’s create it.

Step (1) Go to Google developer console. And login with your developer’s credentials.

Step (2) Click on select a project.

Gmail

Step (3) A modal popup will be open. Click on NEW PROJECT. If you already have a project, you can go directly to Step5.

NEW PROJECT.

Step (4) Write your Google project name and click on the CREATE
button.

Create

Step (5) Go to the OAuth consent screen from the left sidebar and then select External. So your OAuth consent screen will be available to all users who are holding google accounts. Click on CREATE.

OAuth consent screen

Step (6) Write the name of your application. This name will be shown on your OAuth consent screen. There are also other optional fields like Authorised domain link, Application Homepage link, Privacy policy link, and Terms of Service link. And these must be hosted on an Authorised domain.

If provided, these links will be shown on your OAuth consent screen.

After providing these details, click on the Save button below.

 OAuth consent screen2

Step (7) Now go to Credentials from the left sidebar and click on + CREATE CREDENTIALS.

CREATE CREDENTIALS

Now click on OAuth Client ID

OAuth Client ID

Then select a Web application and fill the below details.

This name will be the name of your credentials. Also, you must enter the Authorised javascript origins. I am running my application on localhost:4200.

 Authorised javascript origins

Authorized redirect URIs are optional.

After filling all the details, click on CREATE.

A modal popup will get open; there you will get your Client ID and Client Secret.

Now you have successfully created your OAuth Client ID.

NOTE: If I change my authorized javascript origin to localhost:4100,

As this origin is not listed in Authorised Javascript Origins, an error will be thrown in an application at runtime.

Authorised Javascript Origins

Now let’s add code in our Angular 8 application.

Open your index.html file and add below lines in < head > tag.

< meta name="google-signin-client_id" content="your-client-id" >
< script src="https://apis.google.com/js/platform.js" >< /script >

Now, add the below code in your component.

component.html:

< div id="googleBtn" >< /div > < br / >

component.ts:

Firstly, Declare a global variable after all the import statements.

declare var gapi: any;

Now declare and define the below function

public btnRender(): void {
   const options = {
     scope: 'profile email', 
     width: 250,
     height: 50,
     longtitle: true,
     theme: 'dark',
     onsuccess: (googleUser => {
       let profile = googleUser.getBasicProfile();
       console.log('Token || ' + googleUser.getAuthResponse().id_token);
       console.log('ID: ' + profile.getId());
       console.log('Name: ' + profile.getName());
       console.log('Image URL: ' + profile.getImageUrl());
       console.log('Email: ' + profile.getEmail());
	
	// your-code-goes-here
      
     }),
     onfailure: ((error) => {
       console.log('failure', error);
     })
   };
   gapi.signin2.render('googleBtn', options);
 }

Now, Call the above function in ngOninit() lifecycle,

 ngOnInit() {
   this.btnRender();
 }

Now run the application…
You should see a Gmail Login button.

After successful login, you will get user id token. This id token should be sent to your server with an HTTPS request. There you must verify this token.

All information is given in this here.

That’s it! This is all you need to do.

NOTE: I have described only one of the methods to integrate Gmail sign-in button. But there are many other different ways to do it. You can check it in the official documentation.

FACEBOOK

For integrating Facebook login button in any application, we must have an APP ID, for that we need to create an application in Facebook developer’s console.

So, to set up your Facebook application, follow these steps.

Step (1) Go to Facebook developor’s console. And login with your developer’s credentials.

Step (2) After successful login, go to My Apps and click on Create App.

Facebook developor’s console

Step (3) A modal popup of Create a New App ID will be shown. Write the name of your application and then click on Create App ID.

Create a New App ID

You will see ReCaptcha dialog, check on it, and then click on submit.

Step (4) You can see your APP ID below the navigation bar. But it is a must to whitelist your site URL. So Set Up the Facebook Login option.

Facebook Login

Step (5) Select the Web option.

Facebook Login web

Step (6) Write your application running URL and save it. I am running my application on http:\\localhost:4200.

Angular 8

Save it.

That’s it. Your Facebook application is set up.

On clicking continue, you can see the steps to integrate Facebook login in your application. You can go through it. But don’t worry. I am not going to show you in just a moment.

Now let’s add code in our Angular 8 application.

Open index.html

< script async defer crossorigin="anonymous"
src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v5.0&appId=your-app-id&autoLogAppEvents=1" >< /script >

Now open your component,

component.html

< div class="fb-login-button" data-width="250px" data-size="medium" data-button-type="login_with" data-use-continue-as="true" data-auto-logout-link="false" >< /div >

component.ts

Declare a global variable after all import statements,

declare var FB: any;

In your class constructor,

FB.fbAsyncInit = () => {
     FB.init({
       appId: ‘your-app-id’,
       cookie: true,
       xfbml: true,
       version: 'v5.0'
     });
     FB.AppEvents.logPageView();
   };

In ngOninit lifecycle,

  ngOnInit() {
   ((d, s, id) => {
     var js, fjs = d.getElementsByTagName(s)[0];
     if (d.getElementById(id)) { return; }
     js = d.createElement(s); js.id = id;
     js.src = "https://connect.facebook.net/en_US/sdk.js";
     fjs.parentNode.insertBefore(js, fjs);
   })(document, 'script', 'facebook-jssdk');

   this.statusChange();
 }

Add the below function,

 private statusChange(): void {
   FB.Event.subscribe('auth.statusChange', (response) => {
     console.log("submit login to facebook", response);
     if (response.status === 'connected') {
       if (response.authResponse) {
         FB.api('/me', {
           fields: 'last_name, first_name, email , picture , middle_name, name, name_format, short_name',
         }, (userInfo) => {
           console.log('userInfo', userInfo);
  		// your-code-goes-here
         });
       }
     }
     else {
       console.log('User login failed');
     }
   });
 }

Make sure that the application id you have mentioned in index.html and in the component should be the same.

That’s it. Now run the application.

You should see the Facebook login button.

This is the official documentation for Facebook login.

Few Points :

i) For getting more information about users aside from the above scopes, you need to grant your application. You can check this here.

ii) Facebook fetches only test user and developer account’s data in test mode. To fetch each user’s data, you need to make your application live. You can find test users in Roles Tab.

For more, please check out my GITHUB repository.

This is it. I hope you have enjoyed reading this blog post, and soon. In case if you are looking for Angular minds, to make user authentication even more secure, then hire angular developer from us to leverage our top-of-the-line expertise. For any suggestions and queries, feel free to comment to below

Happy Coding


Expand Your Digital Horizons With Us.

Start a new project or take an existing one to the next level. Get in touch to start small, scale-up, and go Agile.


Or
E-mail us : [email protected]

Your Success Is Guaranteed !

Related Articles

Voice UI in Web
Divyesh Maheta

July 13, 2023

Web Development

How Can You Leverage Voice User Interface in Web Development?

By : Divyesh Maheta

Quick Summary: There was a time when people used to interact with computers using Character User Interface or CUI; wherein people used to type text...

< 1 Minute Read
Read More
Angularjs Development Tools
Reynal Dsouza

July 11, 2023

AngularJS

15 Best AngularJS Development Tools to Know in 2023

By : Reynal Dsouza

Quick Summary: The blog covers a well-curated list of top AngularJS Development Tools. Discover a handpicked selection that will empower your development process and elevate...

< 1 Minute Read
Read More
Dockerize Angular Apps
Ritwik Verma

June 14, 2023

AngularJS

Steps to Dockerize Angular Apps With Docker Containerization

By : Ritwik Verma

Quick Summary: As technological advancements take a step further to change our daily lives. Every business owner strives for faster, more efficient, and more effective...

< 1 Minute Read
Read More

How Can We Help You?

india India (HQ)

Corporate House
15-16, Times Corporate Park, Thaltej, Ahmedabad, Gujarat 380059

USA USA

601 Brickell Key Drive, Suite 700, Miami, Florida, 33131, USA

canada Canada

71 Dawes Road, Brampton, On L6X 5N9, Toronto

australia-flag Australia

351A Hampstead Rd, Northfield SA 5085

UAE UAE

1608 Clover Bay, Business Bay, Dubai, UAE. PO Box 62049

sweden Sweden

Junkergatan 4, 126 53 Hagersten


Get in Touch

call-yellow-icon

Contact Number

+1 347 441 4161

gmail-icon

Email Us

[email protected]


  • Employee
  • Brochure
  • Quality Assurance
  • Resources
  • Privacy Policy
  • Sitemap
  • Solutions
  • Careers
  • Testimonials
  • Tutorials
  • QandA
  • Contact Us
  • bacancy google review 4.6
    bacancy google review
    bacancy glassdoor review 4.5
    bacancy glassdoor review
    bacancy clutch review 4.8
    bacancy clutch review
    bacancy goodfirms review 4.8
    bacancy goodfirms review
    iso
    X

    Get Our Newsletter

    Be The First To Get The Latest Updates And Tutorials.

    Request A Free Consultation