Angular 8 Tutorial: Facebook Login with Example

We will be using angularx-social-login Angular module to make integration easier event Facebook can integrate using their HTML login button.

The application flow is very simple. Just a default Angular 8 component that displays a header and the Sign In With Facebook button. After login to Facebook dialog successful, it will back to that component and change the button to the Sign Out From Facebook and display the basic user profile.

There are a few steps to accomplish this tutorial:

• Setup a Facebook App
• Create a New Angular 8 Application
• Install and Configure the "angularx-social-login" Module
• Display Sign In With Facebook Button and Basic User Profile
• Run and Test the Angular 8 Facebook Login Application

The following tools, framework, libraries, and modules are required for this tutorial:

• Node.js
• Angular 8
• angularx-social-login
• Terminal or Node.js Command Line
• IDE or Text Editor

Before moving to the steps, make sure you have installed the latest Node.js. To check it, type this command in the terminal or Node.js command line.

node -v
v10.15.1
npm -v
6.10.2

Setup a Facebook App

To setup, a Facebook App and get an App ID/Secret, go to Facebook Developers Dashboard. Login with your Facebook developers account or credentials.

Click `+ Add a New App` button. Enter the display name (we use `AngularAuth` name) then click `Create App ID` button. Make sure to use the valid name that allowed by Facebook Developers.

After checking the captcha dialog and click submit button, now, you can see App ID and Secret, write it to your notepad.

Click the Settings menu on the left menu then click Basic. Scroll down then click + Add Platform button then choose the website. Fill site URL with the callback URL for OAuth authentication callback URL, we are using this callback URL `http://127.0.0.1:1337/auth/facebook/callback`.

Click `Save Changes` button and don't forget to write down the App ID and App Secret to your notepad.

Create a New Angular 8 Application

We will use Angular CLI to create a new Angular 8 application. For that, we have to install or upgrade the Angular CLI first. Type this command from the terminal or Node.js command line.

sudo npm install -g @angular/cli

You can skip `sudo` if you are using Command-Line or if your terminal allowed without `sudo`. To check the existing version of Angular CLI, type this command.

ng version
                      ____   __

  /  _   _  | | __ _ _   / | | | |

  / △ \ | ’ \ / _ | | | | |/ _ | '| | | | |  | |

 / ___ | | | | (| | || | | (| | |   | || |___ | |

 // __| ||_, |_,||_,||   _|||

        |___/
Angular CLI: 8.2.0

Node: 10.15.1

OS: darwin x64

Angular:

…
Package           Version
@angular-devkit/architect  0.802.0

@angular-devkit/core    8.2.0

@angular-devkit/schematics 8.2.0

@schematics/angular     8.2.0

@schematics/update     0.802.0

rxjs            6.4.0

Next, we have to create a new Angular 8 application using this command.

ng new angular-fblogin

Answer the question the same as below.

? Would you like to add Angular routing? No

? Which stylesheet format would you like to use? SCSS   [ https://sass-lang.com/documentation/syntax#

scss

Next, go to the newly created Angular 8 application folder then run the application for the first time.

cd ./angular-fblogin

ng serve

Now, open the browser then go to http://localhost;4200/ and you will see the standard Angular page.

Install and Configure the “angularx-social-login” Module

The easy way to integrate Sign In With Facebook is using the angularx-social-login. For that, install that module using this command.

npm install --save angularx-social-login

Register that module to the src/app/app.module.ts by imports these required objects.

import { SocialLoginModule, AuthServiceConfig, FacebookLoginProvider } from ‘angularx-social-login’;

Next, declare the configuration constant variable and export as the module before the @NgModule line.

const config = new AuthServiceConfig([

 {

  id: FacebookLoginProvider.PROVIDER_ID,

  provider: new FacebookLoginProvider(‘2203659926599837’)

 }

]);

export function provideConfig() {

 return config;

}

Next, register SocialLoginModule to the @NgModule imports array.

imports: [

 BrowserModule,

 SocialLoginModule

],

And also above AuthServiceConfig to the Providers array.

providers: [

 {

  provide: AuthServiceConfig,

  useFactory: provideConfig

 }

],

Display Sign In With Facebook Button and Basic User Profile

We will display the Sign In With Facebook button and basic Facebook profile inside the main component view. To make the main component has a better style, we will install the Angular Material first.

ng add @angular/material

Answer all question that shows during the installation as below.

? Choose a prebuilt theme name, or “custom” for a custom theme: Indigo/Pink    [ Preview: https

://material.angular.io?theme=indigo-pink ]

? Set up HammerJS for gesture recognition? Yes

? Set up browser animations for Angular Material? Yes

We will register all required Angular Material components or modules to src/app/app.module.ts. Open and edit that file then add these imports.

import {

 MatIconModule,

 MatButtonModule,

 MatCardModule } from ‘@angular/material’;

Above imports just imports some of the required Angular Material modules. Next, register that imported modules to the @NgModule imports.

imports: [

 …

 MatIconModule,

 MatButtonModule,

 MatCardModule

],

Next, open and edit src/app/app.component.ts then add these imports.

import { AuthService, FacebookLoginProvider, SocialUser } from ‘angularx-social-login’;

Add OnInit implementation to the class name.

export class AppComponent implements OnInit {

 …

}

Declare the variable for the user and login status after the existing title variable.

user: SocialUser;

loggedIn: boolean;

Add a constructor to inject the AuthService module.

constructor(private authService: AuthService) { }

Add these Facebook login and logout functions after the constructor.

signInWithFB(): void {

 this.authService.signIn(FacebookLoginProvider.PROVIDER_ID);

}

signOut(): void {

 this.authService.signOut();

}

Add ngOnInit function that calls the auth service results as a user object.

ngOnInit() {

 this.authService.authState.subscribe((user) => {

  this.user = user;

  this.loggedIn = (user != null);

  console.log(this.user);

 });

}

Next, open and edit src/app/app.component.html then replace all HTML tags with these Angular Material tags.

<div class=“example-container mat-elevation-z8”>

 <mat-card class=“example-card”>

  <mat-card-header>

   <mat-card-title><h2>Welcome <span *ngIf=“loggedIn===true”>{{user.firstName}} {{user.lastName}}, </span> to Angular 8 Application</h2></mat-card-title>

   <mat-card-subtitle>

    <button type=“button” (click)=“signInWithFB()” *ngIf=“loggedIn===false” mat-flat-button color=“primary”>Sign In With Facebook</button>

    <button type=“button” (click)=“signOut()” *ngIf=“loggedIn===true” mat-flat-button color=“primary”>Sign Out From Facebook</button>

   </mat-card-subtitle>

  </mat-card-header>

 </mat-card>

 <mat-card class=“example-card” *ngIf=“loggedIn===true”>

  <mat-card-header>

   <mat-card-title><h2>Your Facebook Profile:</h2></mat-card-title>

   <mat-card-subtitle>Full Name: {{user.firstName}} {{user.lastName}}</mat-card-subtitle>

  </mat-card-header>

  <img mat-card-image [src]=“user.photoUrl” alt=“My Facebook Photo”>

  <mat-card-content>

   Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

  </mat-card-content>

 </mat-card>

</div>

Finally, give it a little style by open and edit src/app/app.component.scss then add these lines of SCSS codes.

.example-container {

 position: relative;

 padding: 5px;

 background-color: aqua;

}

.example-loading-shade {

 position: absolute;

 top: 0;

 left: 0;

 bottom: 56px;

 right: 0;

 background: rgba(0, 0, 0, 0.15);

 z-index: 1;

 display: flex;

 align-items: center;

 justify-content: center;

}
.example-card {

 margin: 5px;

 padding-bottom: 40px;

}

Run and Test the Angular 8 Facebook Login Application

We have to run again the Angular 8 application using this command.

ng serve

And you will the change of the Angular 8 main page as below which now have Sign In with Facebook button.

That it’s, the Angular 8 Tutorial of Facebook Login example. You can find the full source code from our GitHub.

Thanks for reading ❤

If you liked this post, share it with all of your programming buddies!

Follow us on Facebook | Twitter

Further reading about Angular

☞ Angular 8 (formerly Angular 2) - The Complete Guide

☞ Angular & NodeJS - The MEAN Stack Guide

☞ The Complete Node.js Developer Course (3rd Edition)

☞ The Web Developer Bootcamp

☞ Best 50 Angular Interview Questions for Frontend Developers in 2019

☞ MEAN Stack Angular 8 CRUD Web Application

☞ How to build a CRUD Web App with Angular 8.0

☞ MEAN Stack Tutorial MongoDB, ExpressJS, AngularJS and NodeJS

#angular #facebook #web-development

What is GEEK

Buddha Community

Angular 11 Facebook Social Login Example

Angular 9/10/11 social login with facebook using angularx-social-login library example. In this tutorial, i would love to show you how to integrate facebook social login in angular 11 app.

And you will learn how to add facebook social login button with angular reactive login form.

Angular 11 Social Login with Facebook Tutorial

• Step 1 - Create New Angular App
• Step 2 - Install Social Login Library
• Step 3 - Add Code on App.Module.ts File
• Step 4 - Add Code on View File
• Step 5 - Add Code On App.Component ts File
• Step 6 - Start the Angular Facebook Login App

https://www.tutsmake.com/angular-11-facebook-login-tutorial-example/

#angular 11 facebook login #angular 11 social-login example #login with facebook button angular 8/9/10/11 #angular 10/11 login with facebook #angular 10 social facebook login #angular social login facebook

TS-mockito: Mocking Library for TypeScript

TS-mockito

Mocking library for TypeScript inspired by http://mockito.org/

1.x to 2.x migration guide

1.x to 2.x migration guide

Main features

• Strongly typed
• IDE autocomplete
• Mock creation (mock) (also abstract classes) #example
• Spying on real objects (spy) #example
• Changing mock behavior (when) via:
  • thenReturn - return value #example
  • thenThrow - throw an error #example
  • thenCall - call custom method #example
  • thenResolve - resolve promise #example
  • thenReject - rejects promise #example
• Checking if methods were called with given arguments (verify)
  • anything, notNull, anyString, anyOfClass etc. - for more flexible comparision
  • once, twice, times, atLeast etc. - allows call count verification #example
  • calledBefore, calledAfter - allows call order verification #example
• Resetting mock (reset, resetCalls) #example, #example
• Capturing arguments passed to method (capture) #example
• Recording multiple behaviors #example
• Readable error messages (ex. 'Expected "convertNumberToString(strictEqual(3))" to be called 2 time(s). But has been called 1 time(s).')

Installation

npm install ts-mockito --save-dev

Usage

Basics

// Creating mock
let mockedFoo:Foo = mock(Foo);

// Getting instance from mock
let foo:Foo = instance(mockedFoo);

// Using instance in source code
foo.getBar(3);
foo.getBar(5);

// Explicit, readable verification
verify(mockedFoo.getBar(3)).called();
verify(mockedFoo.getBar(anything())).called();

Stubbing method calls

// Creating mock
let mockedFoo:Foo = mock(Foo);

// stub method before execution
when(mockedFoo.getBar(3)).thenReturn('three');

// Getting instance
let foo:Foo = instance(mockedFoo);

// prints three
console.log(foo.getBar(3));

// prints null, because "getBar(999)" was not stubbed
console.log(foo.getBar(999));

Stubbing getter value

// Creating mock
let mockedFoo:Foo = mock(Foo);

// stub getter before execution
when(mockedFoo.sampleGetter).thenReturn('three');

// Getting instance
let foo:Foo = instance(mockedFoo);

// prints three
console.log(foo.sampleGetter);

Stubbing property values that have no getters

Syntax is the same as with getter values.

Please note, that stubbing properties that don't have getters only works if Proxy object is available (ES6).

Call count verification

// Creating mock
let mockedFoo:Foo = mock(Foo);

// Getting instance
let foo:Foo = instance(mockedFoo);

// Some calls
foo.getBar(1);
foo.getBar(2);
foo.getBar(2);
foo.getBar(3);

// Call count verification
verify(mockedFoo.getBar(1)).once();               // was called with arg === 1 only once
verify(mockedFoo.getBar(2)).twice();              // was called with arg === 2 exactly two times
verify(mockedFoo.getBar(between(2, 3))).thrice(); // was called with arg between 2-3 exactly three times
verify(mockedFoo.getBar(anyNumber()).times(4);    // was called with any number arg exactly four times
verify(mockedFoo.getBar(2)).atLeast(2);           // was called with arg === 2 min two times
verify(mockedFoo.getBar(anything())).atMost(4);   // was called with any argument max four times
verify(mockedFoo.getBar(4)).never();              // was never called with arg === 4

Call order verification

// Creating mock
let mockedFoo:Foo = mock(Foo);
let mockedBar:Bar = mock(Bar);

// Getting instance
let foo:Foo = instance(mockedFoo);
let bar:Bar = instance(mockedBar);

// Some calls
foo.getBar(1);
bar.getFoo(2);

// Call order verification
verify(mockedFoo.getBar(1)).calledBefore(mockedBar.getFoo(2));    // foo.getBar(1) has been called before bar.getFoo(2)
verify(mockedBar.getFoo(2)).calledAfter(mockedFoo.getBar(1));    // bar.getFoo(2) has been called before foo.getBar(1)
verify(mockedFoo.getBar(1)).calledBefore(mockedBar.getFoo(999999));    // throws error (mockedBar.getFoo(999999) has never been called)

Throwing errors

let mockedFoo:Foo = mock(Foo);

when(mockedFoo.getBar(10)).thenThrow(new Error('fatal error'));

let foo:Foo = instance(mockedFoo);
try {
    foo.getBar(10);
} catch (error:Error) {
    console.log(error.message); // 'fatal error'
}

Custom function

You can also stub method with your own implementation

let mockedFoo:Foo = mock(Foo);
let foo:Foo = instance(mockedFoo);

when(mockedFoo.sumTwoNumbers(anyNumber(), anyNumber())).thenCall((arg1:number, arg2:number) => {
    return arg1 * arg2; 
});

// prints '50' because we've changed sum method implementation to multiply!
console.log(foo.sumTwoNumbers(5, 10));

Resolving / rejecting promises

You can also stub method to resolve / reject promise

let mockedFoo:Foo = mock(Foo);

when(mockedFoo.fetchData("a")).thenResolve({id: "a", value: "Hello world"});
when(mockedFoo.fetchData("b")).thenReject(new Error("b does not exist"));

Resetting mock calls

You can reset just mock call counter

// Creating mock
let mockedFoo:Foo = mock(Foo);

// Getting instance
let foo:Foo = instance(mockedFoo);

// Some calls
foo.getBar(1);
foo.getBar(1);
verify(mockedFoo.getBar(1)).twice();      // getBar with arg "1" has been called twice

// Reset mock
resetCalls(mockedFoo);

// Call count verification
verify(mockedFoo.getBar(1)).never();      // has never been called after reset

You can also reset calls of multiple mocks at once resetCalls(firstMock, secondMock, thirdMock)

Resetting mock

Or reset mock call counter with all stubs

// Creating mock
let mockedFoo:Foo = mock(Foo);
when(mockedFoo.getBar(1)).thenReturn("one").

// Getting instance
let foo:Foo = instance(mockedFoo);

// Some calls
console.log(foo.getBar(1));               // "one" - as defined in stub
console.log(foo.getBar(1));               // "one" - as defined in stub
verify(mockedFoo.getBar(1)).twice();      // getBar with arg "1" has been called twice

// Reset mock
reset(mockedFoo);

// Call count verification
verify(mockedFoo.getBar(1)).never();      // has never been called after reset
console.log(foo.getBar(1));               // null - previously added stub has been removed

You can also reset multiple mocks at once reset(firstMock, secondMock, thirdMock)

Capturing method arguments

let mockedFoo:Foo = mock(Foo);
let foo:Foo = instance(mockedFoo);

// Call method
foo.sumTwoNumbers(1, 2);

// Check first arg captor values
const [firstArg, secondArg] = capture(mockedFoo.sumTwoNumbers).last();
console.log(firstArg);    // prints 1
console.log(secondArg);    // prints 2

You can also get other calls using first(), second(), byCallIndex(3) and more...

Recording multiple behaviors

You can set multiple returning values for same matching values

const mockedFoo:Foo = mock(Foo);

when(mockedFoo.getBar(anyNumber())).thenReturn('one').thenReturn('two').thenReturn('three');

const foo:Foo = instance(mockedFoo);

console.log(foo.getBar(1));    // one
console.log(foo.getBar(1));    // two
console.log(foo.getBar(1));    // three
console.log(foo.getBar(1));    // three - last defined behavior will be repeated infinitely

Another example with specific values

let mockedFoo:Foo = mock(Foo);

when(mockedFoo.getBar(1)).thenReturn('one').thenReturn('another one');
when(mockedFoo.getBar(2)).thenReturn('two');

let foo:Foo = instance(mockedFoo);

console.log(foo.getBar(1));    // one
console.log(foo.getBar(2));    // two
console.log(foo.getBar(1));    // another one
console.log(foo.getBar(1));    // another one - this is last defined behavior for arg '1' so it will be repeated
console.log(foo.getBar(2));    // two
console.log(foo.getBar(2));    // two - this is last defined behavior for arg '2' so it will be repeated

Short notation:

const mockedFoo:Foo = mock(Foo);

// You can specify return values as multiple thenReturn args
when(mockedFoo.getBar(anyNumber())).thenReturn('one', 'two', 'three');

const foo:Foo = instance(mockedFoo);

console.log(foo.getBar(1));    // one
console.log(foo.getBar(1));    // two
console.log(foo.getBar(1));    // three
console.log(foo.getBar(1));    // three - last defined behavior will be repeated infinity

Possible errors:

const mockedFoo:Foo = mock(Foo);

// When multiple matchers, matches same result:
when(mockedFoo.getBar(anyNumber())).thenReturn('one');
when(mockedFoo.getBar(3)).thenReturn('one');

const foo:Foo = instance(mockedFoo);
foo.getBar(3); // MultipleMatchersMatchSameStubError will be thrown, two matchers match same method call

Mocking interfaces

You can mock interfaces too, just instead of passing type to mock function, set mock function generic type Mocking interfaces requires Proxy implementation

let mockedFoo:Foo = mock<FooInterface>(); // instead of mock(FooInterface)
const foo: SampleGeneric<FooInterface> = instance(mockedFoo);

Mocking types

You can mock abstract classes

const mockedFoo: SampleAbstractClass = mock(SampleAbstractClass);
const foo: SampleAbstractClass = instance(mockedFoo);

You can also mock generic classes, but note that generic type is just needed by mock type definition

const mockedFoo: SampleGeneric<SampleInterface> = mock(SampleGeneric);
const foo: SampleGeneric<SampleInterface> = instance(mockedFoo);

Spying on real objects

You can partially mock an existing instance:

const foo: Foo = new Foo();
const spiedFoo = spy(foo);

when(spiedFoo.getBar(3)).thenReturn('one');

console.log(foo.getBar(3)); // 'one'
console.log(foo.getBaz()); // call to a real method

You can spy on plain objects too:

const foo = { bar: () => 42 };
const spiedFoo = spy(foo);

foo.bar();

console.log(capture(spiedFoo.bar).last()); // [42] 

Thanks

• Szczepan Faber (https://www.linkedin.com/in/szczepiq)
• Sebastian Konkol (https://www.linkedin.com/in/sebastiankonkol)
• Clickmeeting (http://clickmeeting.com)
• Michał Stocki (https://github.com/michalstocki)
• Łukasz Bendykowski (https://github.com/viman)
• Andrey Ermakov (https://github.com/dreef3)
• Markus Ende (https://github.com/Markus-Ende)
• Thomas Hilzendegen (https://github.com/thomashilzendegen)
• Johan Blumenberg (https://github.com/johanblumenberg)

---

Download Details:

Author: NagRock
Source Code: https://github.com/NagRock/ts-mockito 
License: MIT license

#typescript #testing #mock 

Angular 11 Google Social Login Example Tutorial

Angular 9/10/11 social login with google using angularx-social-login library example. In this tutorial, i will show you step by step on how to implement google social login in angular 11 app.

And also, this tutorial will show you How to login into Angular 10/11 application with google using angularx-social-login library in angular 11 app.

Google Login Integration In Angular 11 App

• Step 1 - Create New Angular App
• Step 2 - Install Social Login Library
• Step 3 - Add Code on App.Module.ts File
• Step 4 - Add Code on View File
• Step 5 - Add Code On App.Component ts File
• Step 6 - Start the Angular Google Login App

https://www.tutsmake.com/angular-11-google-social-login-example/

#angular 11 google login #angular 11 social-login example #login with google button angular 8/9/10/11 #angular 10/11 login with google #angular 10 social google login #angular social login google

Angular 11 Google Social Login Example

Angular 9/10/11 social login with google using angularx-social-login library example. In this tutorial, i will show you step by step on how to implement google social login in angular 11 app.

And also, this tutorial will show you How to login into Angular 10/11 application with google using angularx-social-login library in angular 11 app.

Google Login Integration In Angular 11 App

• Step 1 - Create New Angular App
• Step 2 - Install Social Login Library
• Step 3 - Add Code on App.Module.ts File
• Step 4 - Add Code on View File
• Step 5 - Add Code On App.Component ts File
• Step 6 - Start the Angular Google Login App

https://www.tutsmake.com/angular-11-google-social-login-example/

#angular 11 google login #angular 11 social-login example #login with google button angular 8/9/10/11 #angular 10/11 login with google #angular 10 social google login #angular social login google

Laravel 8 Tutorial for Beginners

Hello everyone! I just updated this tutorial for Laravel 8. In this tutorial, we’ll go through the basics of the Laravel framework by building a simple blogging system. Note that this tutorial is only for beginners who are interested in web development but don’t know where to start. Check it out if you are interested: Laravel Tutorial For Beginners

Laravel is a very powerful framework that follows the MVC structure. It is designed for web developers who need a simple, elegant yet powerful toolkit to build a fully-featured website.

#laravel 8 tutorial #laravel 8 tutorial crud #laravel 8 tutorial point #laravel 8 auth tutorial #laravel 8 project example #laravel 8 tutorial for beginners