WIP: backend protection

Frontend/src/app/app.module.ts

@@ -7,6 +7,7 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { MainViewComponent } from './main-view/main-view.component';
 import { MaterialModule } from './material.module';
 import { LoginPageComponent } from './components/login-page/login-page.component';
+import { HttpClientModule } from '@angular/common/http';
 
 
 @NgModule({
@@ -20,6 +21,7 @@ import { LoginPageComponent } from './components/login-page/login-page.component
     AppRoutingModule,
     BrowserAnimationsModule,
     MaterialModule,
+    HttpClientModule
   ],
   providers: [],
   bootstrap: [AppComponent]

Frontend/src/app/auth/auth.service.ts

@@ -1,9 +1,60 @@
+import { HttpClient, HttpHeaders } from '@angular/common/http';
 import { Injectable } from '@angular/core';
+import { environment } from 'src/environments/environment';
+import { User } from '../models/user';
 
 @Injectable({
   providedIn: 'root'
 })
-export class AuthServiceService {
+export class AuthService {
 
-  constructor() { }
+  apiToken: string | null = null;
+  user: User | null = null;
+
+  constructor(
+    private http$: HttpClient
+  ) { }
+
+  loadDbUser() {
+    return new Promise((resolve, reject) => {
+      const headers = new HttpHeaders({
+        // 'Content-Type': 'application/json',
+        'Authorization': `Bearer ${this.apiToken}`
+      })
+      this.http$.get<any>(`${environment.api.url}/ping/ping`, {
+        headers,
+        withCredentials: true
+      }).subscribe({
+        next: (data) => {
+          console.log('Ping', data);
+          resolve(data);
+        },
+        error: (e) => {
+          console.error('Ping error', e);
+          reject(e);
+        }
+      }
+      );
+    });
+  }
+
+  getAPIToken(credentials: string): Promise<void> {
+    return new Promise((resolve, reject) => {
+      const header = new HttpHeaders().set('Content-type', 'application/json');
+      this.http$.post<any>(`${environment.api.url}/auth/apiToken`,  JSON.stringify(credentials), { headers: header }).subscribe({
+        next: (data) => {
+          console.log('apiToken', data);
+          this.apiToken = data.token;
+          resolve(data);
+        },
+        error: (e) => {
+          console.error('apiToken error', e);
+          reject(e);
+        }
+      }
+      );
+    });
+    //const header = new HttpHeaders().set('Content-type', 'application/json');
+    //return this.httpClient.post(this.path + "LoginWithGoogle", JSON.stringify(credentials), { headers: header });
+  }
 }

Frontend/src/app/components/login-page/login-page.component.ts

@@ -1,8 +1,10 @@
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import jwt_decode from "jwt-decode";
+import { AuthService } from 'src/app/auth/auth.service';
 import { User } from 'src/app/models/user';
 import { DataService } from 'src/app/services/data.service';
+import { environment } from 'src/environments/environment';
 
 @Component({
   selector: 'app-login-page',
@@ -13,38 +15,46 @@ import { DataService } from 'src/app/services/data.service';
 export class LoginPageComponent implements OnInit {
   constructor(
     private data$: DataService,
-    private router$: Router
+    private router$: Router,
+    private auth$: AuthService
   ) {}
 
   ngOnInit(): void {
-    // @ts-ignore
-    google.accounts.id.initialize({
-      client_id: "107631825312-bkfe438ehr9k9ecb2h76g802tj6advma.apps.googleusercontent.com",
-      callback: this.handleCredentialResponse.bind(this),
-      auto_select: true,
-      cancel_on_tap_outside: true,
-    });
-    // @ts-ignore
-    google.accounts.id.renderButton(
       // @ts-ignore
-      document.getElementById("google-button"),
-      { theme: "outline", size: "large", width: "100%" }
-    );
-    // @ts-ignore
-    google.accounts.id.prompt();
+      window.onGoogleLibraryLoad = () => {
+        // @ts-ignore
+        google.accounts.id.initialize({
+          client_id: environment.google.clientId,
+          callback: this.handleCredentialResponse.bind(this),
+          auto_select: true,
+          cancel_on_tap_outside: true
+        });
+        // @ts-ignore
+        google.accounts.id.renderButton(
+        // @ts-ignore
+        document.getElementById("google-button"),
+          { theme: "outline", size: "large", width: "100%" } 
+        );
+        // @ts-ignore
+        google.accounts.id.prompt((notification: PromptMomentNotification) => {});
+      };
   }
 
   async handleCredentialResponse(response: any) { 
     try {
+      console.log("Google Response", response);
       const responsePayload: any = jwt_decode(response.credential);
       this.data$.currentUser = new User({
-        id: 1,
-        googledId: responsePayload.aud,
+        googleCredentials: response.credential,
         userName: `${responsePayload.given_name} ${responsePayload.family_name}`,
         email: responsePayload.email,
         avatar: responsePayload.picture
       });
+      // this.auth$.loadDbUser();
       this.router$.navigate(['/app']);
+      console.log("USer", this.data$.currentUser);
+      await this.auth$.getAPIToken(response.credential);
+      this.auth$.loadDbUser();
     } catch (e) {
       console.error('Get user error', e);
     }

Frontend/src/app/models/user.ts

@@ -2,8 +2,8 @@ export class User {
     id!: string;
     email!: string;
     userName!: string;
-    googleId!: string;
-    avatar?: string | ArrayBuffer;
+    googleCredentials!: string;
+    avatar?: string;
     constructor(input: any) {
       Object.assign(this, input)
     }

Frontend/src/environments/environment.ts

@@ -3,7 +3,13 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+  production: false,
+  api: {
+    url: "http://localhost:5183/api"
+  },
+  google: {
+    clientId: "107631825312-bkfe438ehr9k9ecb2h76g802tj6advma.apps.googleusercontent.com"
+  }
 };
 
 /*