Add_security_Azure_AD_B2C

Author: DiegoTinitana

.github/workflows/CD-time-tracker-ui.yml

@@ -24,6 +24,26 @@ jobs:
       with:
         node-version: '12.x'
 
+    - name: Inject Secrets
+      shell: python
+      env:
+        SCOPES: ${{ secrets.scopes }}
+        CLIENT_ID: ${{ secrets.client_id }}
+        AUTHORITY: ${{ secrets.authority }}
+        BASE_PATH: "src/environments/"
+      run: |
+        import os
+        import json
+        data = {}
+        base_path = os.environ.get('BASE_PATH', 'src/environments/')
+        with open(base_path + "keys.example.json", "r+") as jsonFileRead:
+          data = json.load(jsonFileRead)
+          data["scopes"] = str(os.environ['SCOPES']).split(",")
+          data["client_id"] = os.environ['CLIENT_ID']
+          data["authority"] = os.environ['AUTHORITY']
+        with open(base_path + ".keys.json", "w+") as jsonFileWrite:
+          json.dump(data, jsonFileWrite)
+
     - name: 'run: npm install and build'
       run: |
         npm install

.github/workflows/CI-time-tracker-ui.yml

@@ -39,5 +39,25 @@ jobs:
     - name: Install dependencies
       run: npm install
 
+    - name: Inject Secrets
+      shell: python
+      env:
+        SCOPES: ${{ secrets.scopes }}
+        CLIENT_ID: ${{ secrets.client_id }}
+        AUTHORITY: ${{ secrets.authority }}
+        BASE_PATH: "src/environments/"
+      run: |
+        import os
+        import json
+        data = {}
+        base_path = os.environ.get('BASE_PATH', 'src/environments/')
+        with open(base_path + "keys.example.json", "r+") as jsonFileRead:
+          data = json.load(jsonFileRead)
+          data["scopes"] = str(os.environ['SCOPES']).split(",")
+          data["client_id"] = os.environ['CLIENT_ID']
+          data["authority"] = os.environ['AUTHORITY']
+        with open(base_path + ".keys.json", "w+") as jsonFileWrite:
+          json.dump(data, jsonFileWrite)
+
     - name: Run the test
       run: npm run ci-test --if-present

.gitignore

@@ -40,7 +40,7 @@ npm-debug.log
 yarn-error.log
 testem.log
 /typings
-
+.keys.json
 # System Files
 .DS_Store
 Thumbs.db

README.md

@@ -23,8 +23,12 @@ Run `npm install` to install the required node_modules for this project.
 Run `ng serve` to run the app in dev mode. After executing this command, you can navigate to `http://localhost:4200/` to see the app working.
 The app will automatically reload if you change anything in the source files.
 
-## Prepare your environment for vscode
+## Prepare your environment 
 
+### Set environment variables
+Create file .keys.json from keys.example.ts into environments folder
+
+### Prepare your environment for vscode
 Install the following extensions:
 
 - `EditorConfig for Visual Studio Code`.

package-lock.json

@@ -23,6 +23,7 @@
     "bootstrap": "^4.4.1",
     "jquery": "^3.4.1",
     "minimist": "^1.2.5",
+    "msal": "^1.2.1",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
     "zone.js": "~0.10.2"

package.json

@@ -1,19 +1,28 @@
 import { NgModule } from '@angular/core';
 import { Routes, RouterModule } from '@angular/router';
+
+import { AzureGuardService } from './guards/azure-guard.service'
 import { ReportsComponent } from './modules/reports/pages/reports.component';
 import { TimeClockComponent } from './modules/time-clock/pages/time-clock.component';
 import { TimeEntriesComponent } from './modules/time-entries/pages/time-entries.component';
 import { ProjectManagementComponent } from './modules/project-management/pages/project-management.component';
 import { ActivitiesManagementComponent } from './modules/activities-management/pages/activities-management.component';
+import { HomeComponent } from './modules/home/home.component';
+import { LoginComponent } from './modules/login/login.component';
 
 const routes: Routes = [
-  {path: 'reports', component: ReportsComponent},
-  {path: 'time-clock', component: TimeClockComponent},
-  {path: 'time-entries', component: TimeEntriesComponent},
-  {path: 'project-management', component: ProjectManagementComponent},
-  {path: 'activities-management', component: ActivitiesManagementComponent},
-  {path: '', pathMatch: 'full', redirectTo: 'time-clock'},
-  {path: '**', pathMatch: 'full', redirectTo: 'time-clock'},
+
+  { path: '', component: HomeComponent, canActivate:[AzureGuardService],
+    children: [
+      { path: 'reports', component: ReportsComponent },
+      { path: 'time-clock', component: TimeClockComponent },
+      { path: 'time-entries', component: TimeEntriesComponent },
+      { path: 'project-management', component: ProjectManagementComponent },
+      { path: 'activities-management', component: ActivitiesManagementComponent },
+      {path: '', pathMatch: 'full', redirectTo: 'time-clock'},
+    ]
+  },
+  { path: 'login', component: LoginComponent },
 ];
 
 @NgModule({

src/app/app-routing.module.ts

@@ -1,5 +1 @@
-<app-navbar></app-navbar>
-
-<app-sidebar>
-    <router-outlet></router-outlet>
-</app-sidebar>
+<router-outlet></router-outlet>

src/app/app.component.html

@@ -25,6 +25,8 @@ import { ActivitiesManagementComponent } from './modules/activities-management/p
 import { ActivityListComponent } from './modules/activities-management/components/activity-list/activity-list.component';
 import { CreateActivityComponent } from './modules/activities-management/components/create-activity/create-activity.component';
 
+import { HomeComponent } from './modules/home/home.component';
+import { LoginComponent } from './modules/login/login.component';
 
 @NgModule({
   declarations: [
@@ -47,7 +49,9 @@ import { CreateActivityComponent } from './modules/activities-management/compone
     GroupByDatePipe,
     ActivitiesManagementComponent,
     CreateActivityComponent,
-    ActivityListComponent
+    ActivityListComponent,
+    HomeComponent,
+    LoginComponent
   ],
   imports: [
     CommonModule,

src/app/app.module.ts

@@ -0,0 +1,48 @@
+import { TestBed, inject } from '@angular/core/testing';
+import { RouterTestingModule } from '@angular/router/testing';
+import { Router } from '@angular/router'
+
+import { AzureAdB2CService } from '../modules/login/services/azure.ad.b2c.service';
+import { AzureGuardService } from './azure-guard.service';
+
+
+describe('AzureGuardService', () => {
+  let service: AzureGuardService;
+  let azureAdB2CService: AzureAdB2CService;
+  const azureAdB2CServiceStub = {
+    isLogin() {
+      return true;
+    }
+  };
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      imports: [ RouterTestingModule ],
+      providers: [
+        { providers: AzureAdB2CService, useValue: azureAdB2CServiceStub},
+      ]
+    });
+    service = TestBed.inject(AzureGuardService);
+    azureAdB2CService = TestBed.inject(AzureAdB2CService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+
+  it('should check if is login', () => {
+    spyOn(azureAdB2CService, 'isLogin').and.returnValue(true)
+    const isAcitve = service.canActivate();
+    expect(azureAdB2CService.isLogin).toHaveBeenCalled;
+    expect(isAcitve).toEqual(true);
+  });
+
+  it('should check if not is login', inject([Router],  (router: Router) => {
+    spyOn(azureAdB2CService, 'isLogin').and.returnValue(false)
+    spyOn(router, 'navigate').and.stub();
+    const isAcitve = service.canActivate();
+    expect(azureAdB2CService.isLogin).toHaveBeenCalled;
+    expect(isAcitve).toEqual(false);
+    expect(router.navigate).toHaveBeenCalledWith(['login']);
+  }));
+
+});