Working sample added for the social login.

frontend/angular/src/app/app.service.ts

@@ -3,6 +3,7 @@ import { Observable } from 'rxjs';
 import { MessageTemplateModel } from './models/message-template.model';
 import { PlaceholderOptionsEnum } from './models/placeholder-options.enum';
 import { TemplateTypeEnum } from './models/template-type.enum';
+import { ApiService } from './oneit/services/api.service';
 import { EnumService } from './oneit/services/enum.service';
 import { SearchService } from './oneit/services/search.service';
 import { UtilsService } from './oneit/services/utils.service';
@@ -14,7 +15,8 @@ export class AppService {
     constructor(
         private enumService: EnumService,
         private searchService: SearchService,
-        private utilsService: UtilsService
+        private utilsService: UtilsService,
+        private apiService: ApiService,
     ) {
 
     }
@@ -53,4 +55,14 @@ export class AppService {
                 }
             );
     }
+
+    socicalMediaLogin(svc, params) {
+        return this.apiService.post('svc/' + svc , params).map(
+            data => {
+                if (this.utilsService.isSuccessfulResponse(data)) {
+                    return data;
+                }
+            }
+        );
+    }
 }

frontend/angular/src/app/components/my-career-web/auth/login/login.component.html

@@ -36,12 +36,12 @@
 
 
             <div class="d-flex justify-content-center">
-                <button class="action-btn google-login" [disabled]="isLoading">Sign in with Google</button>
+                <button class="action-btn google-login" (click)="socicalMediaLogin('google')" [disabled]="isLoading">Sign in with Google</button>
             </div>
 
 
             <div class="d-flex justify-content-center">
-                <button class="action-btn linkedin-login" [disabled]="isLoading">Sign in with Linkedin</button>
+                <button class="action-btn linkedin-login" (click)="socicalMediaLogin('linkedIn')" [disabled]="isLoading">Sign in with Linkedin</button>
             </div>
         </form>
     </div>

frontend/angular/src/app/components/my-career-web/auth/login/login.component.ts

 import { Component, ViewChild } from '@angular/core';
 import { NgForm } from '@angular/forms';
 import { Router } from '@angular/router';
+import { Subscription } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
+import { environment } from '../../../../../environments/environment';
+import { AppService } from '../../../../app.service';
 import { BaseComponent } from '../../base/base.component';
 import { AuthService } from '../../services/auth.service';
 import { HelperService } from '../../services/helper.service';
@@ -15,6 +18,7 @@ import { HelperService } from '../../services/helper.service';
 export class LoginComponent extends BaseComponent {
 
     year = new Date().getFullYear();
+    subscriptions: Array<Subscription> = [];
 
     loginForm = {
         username: '',
@@ -25,7 +29,8 @@ export class LoginComponent extends BaseComponent {
     constructor(
         private hs: HelperService,
         private as: AuthService,
-        private r: Router
+        private r: Router,
+        private appService: AppService
     ) {
         super();
     }
@@ -84,4 +89,25 @@ export class LoginComponent extends BaseComponent {
             });
     }
 
+    socicalMediaLogin(type : string) {
+        const params = {
+            environment: environment.envName,
+            nextPage: window.location.href.split('/#/')[0] + '/#/my-career-web/dashboard/home'
+        };
+        const svc = type === 'linkedIn' ? 'LoginWithLinkedIn' : 'LoginWithGoogle';
+
+        this.subscriptions.push(this.appService.socicalMediaLogin(svc,params)
+            .subscribe(
+                data => {
+                    if (data.destination) {
+                        window.location.href = data.destination;
+                        return;
+                    }
+                },
+                error => {
+                }
+            )
+        );
+    }
+
 }