feat(auth): add microsoft azure authentification

infra-geo-ouverte · Sep 30, 2020 · 055cb7f · 055cb7f
1 parent 7fd2d74
commit 055cb7f
Show file tree

Hide file tree

Showing 26 changed files with 280 additions and 36 deletions.
diff --git a/demo/src/app/auth/auth-form/auth-form.module.ts b/demo/src/app/auth/auth-form/auth-form.module.ts
@@ -8,7 +8,7 @@ import { AppAuthFormRoutingModule } from './auth-form-routing.module';
 
 @NgModule({
   declarations: [AppAuthFormComponent],
-  imports: [AppAuthFormRoutingModule, MatCardModule, IgoAuthModule],
+  imports: [AppAuthFormRoutingModule, MatCardModule, IgoAuthModule.forRoot()],
   exports: [AppAuthFormComponent]
 })
 export class AppAuthFormModule {}
diff --git a/demo/src/app/geo/search/search.component.html b/demo/src/app/geo/search/search.component.html
@@ -10,10 +10,6 @@
     <hr>
     <br>
     <span *ngIf="!isTouchScreen" title="Details">
-      You can trigger the seach by coordinate by holding the CRTL key down while moving your cursor (on desktop). Don't
-      forget to focus on map before.
-      <br>
-      <br>
       F2 activate/desactivate the pointer location.
     </span>
   </mat-card-content>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -77,6 +77,7 @@
     "@angular/platform-browser": "^10.0.3",
     "@angular/platform-browser-dynamic": "^10.0.3",
     "@angular/router": "^10.0.3",
+    "@azure/msal-angular": "^1.1.1",
     "@ionic-native/core": "^5.10.0",
     "@ionic-native/file": "^5.6.0",
     "@ionic-native/file-opener": "^5.6.0",
@@ -100,6 +101,7 @@
     "jszip": "^3.1.5",
     "jwt-decode": "^2.2.0",
     "moment": "^2.22.2",
+    "msal": "^1.4.0",
     "ngx-cacheable": "^1.0.9",
     "ol": "^6.3.1",
     "ol-mapbox-style": "^6.1.2",

diff --git a/packages/auth/ng-package.json b/packages/auth/ng-package.json
@@ -5,13 +5,17 @@
   "lib": {
     "entryFile": "src/public_api.ts",
     "umdModuleIds": {
-      "@igo2/core" : "core",
-      "@igo2/utils" : "utils",
-      "jwt-decode" : "jwt",
-      "ngx-cacheable" : "ngxCacheable",
-      "ts-md5" : "tsMd5",
-      "@ngx-translate/core" : "ngxt-core"
+      "@igo2/core": "core",
+      "@igo2/utils": "utils",
+      "jwt-decode": "jwt",
+      "ngx-cacheable": "ngxCacheable",
+      "ts-md5": "tsMd5",
+      "@ngx-translate/core": "ngxt-core"
     }
   },
-  "whitelistedNonPeerDependencies": ["jwt-decode", "ngx-cacheable", "ts-md5"]
+  "whitelistedNonPeerDependencies": [
+    "jwt-decode",
+    "ngx-cacheable",
+    "ts-md5"
+  ]
 }
diff --git a/packages/auth/ng-package.prod.json b/packages/auth/ng-package.prod.json
@@ -4,13 +4,17 @@
   "lib": {
     "entryFile": "src/public_api.ts",
     "umdModuleIds": {
-      "@igo2/core" : "core",
-      "@igo2/utils" : "utils",
-      "jwt-decode" : "jwt",
-      "ngx-cacheable" : "ngxCacheable",
-      "ts-md5" : "tsMd5",
-      "@ngx-translate/core" : "ngxt-core"
+      "@igo2/core": "core",
+      "@igo2/utils": "utils",
+      "jwt-decode": "jwt",
+      "ngx-cacheable": "ngxCacheable",
+      "ts-md5": "tsMd5",
+      "@ngx-translate/core": "ngxt-core"
     }
   },
-  "whitelistedNonPeerDependencies": ["jwt-decode", "ngx-cacheable", "ts-md5"]
+  "whitelistedNonPeerDependencies": [
+    "jwt-decode",
+    "ngx-cacheable",
+    "ts-md5"
+  ]
 }
diff --git a/packages/auth/package.json b/packages/auth/package.json
@@ -3,7 +3,9 @@
   "version": "1.4.3",
   "description": "IGO Library",
   "author": "MSP",
-  "keywords": ["igo"],
+  "keywords": [
+    "igo"
+  ],
   "license": "MIT",
   "homepage": "https://github.com/infra-geo-ouverte/igo2-lib#readme",
   "repository": {
@@ -18,7 +20,7 @@
     "ngx-cacheable": "^1.0.9",
     "ts-md5": "^1.2.4",
     "tslib": "^2.0.0"
-},
+  },
   "peerDependencies": {
     "@angular/cdk": "^10.0.1",
     "@angular/common": "^10.0.3",
@@ -27,6 +29,8 @@
     "@angular/material": "^10.0.1",
     "@igo2/core": "^1.4.3",
     "@igo2/utils": "^1.4.3",
-    "rxjs": "^6.6.0"
+    "rxjs": "^6.6.0",
+    "@azure/msal-angular": "^1.1.1",
+    "msal": "^1.4.0"
   }
 }
diff --git a/packages/auth/src/lib/auth-form/auth-facebook.component.html b/packages/auth/src/lib/auth-form/auth-facebook.component.html
@@ -1,5 +1,5 @@
 <div scope="public_profile,email"
      class="fb-login-button" data-max-rows="1" data-size="large"
-     data-button-type="continue_with" data-show-faces="false"
+     data-button-type="login_with" data-show-faces="false"
      data-auto-logout-link="false" data-use-continue-as="false">
 </div>
diff --git a/packages/auth/src/lib/auth-form/auth-facebook.component.scss b/packages/auth/src/lib/auth-form/auth-facebook.component.scss
@@ -1,3 +1,6 @@
-.fb-login-button {
-  padding: 10px 0;
+:host {
+  padding: 10px 10px 10px 0;
+  display: inline-block;
+  position: relative;
+  top: -3px;
 }
diff --git a/packages/auth/src/lib/auth-form/auth-facebook.component.ts b/packages/auth/src/lib/auth-form/auth-facebook.component.ts
@@ -28,8 +28,10 @@ export class AuthFacebookComponent {
   ) {
     this.options = this.config.getConfig('auth.facebook') || {};
 
-    if (this.options.apiKey) {
+    if (this.options.appId) {
       this.loadSDKFacebook();
+    } else {
+      console.warn('Facebook authentification needs "appId" option');
     }
   }
 
@@ -64,7 +66,7 @@ export class AuthFacebookComponent {
     const fjs = document.getElementsByTagName('script')[0];
     const js = document.createElement('script');
     js.id = 'facebook-jssdk';
-    js.src = `${urlSDK}&appId=${this.options.apiKey}`;
+    js.src = `${urlSDK}&appId=${this.options.appId}`;
     js.onload = () => {
       this.subscribeEvents();
     };

diff --git a/packages/auth/src/lib/auth-form/auth-form.component.html b/packages/auth/src/lib/auth-form/auth-form.component.html
@@ -8,6 +8,10 @@ <h1>{{'igo.auth.connection' | translate}}</h1>
       *ngIf="options.google && options.google.enabled !== false"
       (login)="onLogin()">
     </igo-auth-google>
+    <igo-auth-microsoft
+      *ngIf="options.microsoft && options.microsoft.enabled !== false"
+      (login)="onLogin()">
+    </igo-auth-microsoft>
     <igo-auth-facebook
       *ngIf="options.facebook && options.facebook.enabled !== false"
       (login)="onLogin()">

diff --git a/packages/auth/src/lib/auth-form/auth-google.component.scss b/packages/auth/src/lib/auth-form/auth-google.component.scss
@@ -1,3 +1,8 @@
-.google-login-button {
-  padding: 10px 0;
+:host {
+  padding: 10px 10px 10px 0;
+  display: inline-block;
+}
+
+.google-login-button ::ng-deep .abcRioButton {
+  color: rgba(0, 0, 0, 0.87);
 }
diff --git a/packages/auth/src/lib/auth-form/auth-google.component.ts b/packages/auth/src/lib/auth-form/auth-google.component.ts
@@ -6,7 +6,7 @@ import {
   EventEmitter
 } from '@angular/core';
 
-import { ConfigService } from '@igo2/core';
+import { ConfigService, LanguageService } from '@igo2/core';
 import { AuthGoogleOptions } from '../shared/auth.interface';
 import { AuthService } from '../shared/auth.service';
 
@@ -24,13 +24,16 @@ export class AuthGoogleComponent {
   constructor(
     private authService: AuthService,
     private config: ConfigService,
+    private languageService: LanguageService,
     private appRef: ApplicationRef
   ) {
     this.options = this.config.getConfig('auth.google') || {};
 
     if (this.options.apiKey && this.options.clientId) {
       this.loadSDKGoogle();
       this.loadPlatform();
+    } else {
+      console.warn('Google authentification needs "apiKey" and "clientId" options');
     }
   }
 
@@ -58,18 +61,31 @@ export class AuthGoogleComponent {
       })
       .then(() => {
         this.handleSignOutClick();
+        this.updateTextButton();
         (window as any).gapi.auth2.getAuthInstance().isSignedIn.listen(rep => {
           this.updateSigninStatus(rep);
         });
       });
   }
 
   private updateSigninStatus(isSignedIn) {
+    this.updateTextButton();
     if (isSignedIn) {
       this.loginGoogle((window as any).gapi.client.getToken().access_token);
     }
   }
 
+  private updateTextButton() {
+    const btn = document.querySelector('span[id^="not_signed_"]');
+    if (btn && this.languageService.getLanguage() !== 'en') {
+      if (btn.innerHTML === 'Sign in with Google') {
+        btn.innerHTML = this.languageService.translate.instant('igo.auth.google.login');
+      } else if (btn.innerHTML === 'Signed in with Google') {
+        btn.innerHTML = this.languageService.translate.instant('igo.auth.google.logged');
+      }
+    }
+  }
+
   private loginGoogle(token) {
     this.authService.loginWithToken(token, 'google').subscribe(() => {
       this.appRef.tick();

diff --git a/packages/auth/src/lib/auth-form/auth-intern.component.html b/packages/auth/src/lib/auth-form/auth-intern.component.html
@@ -11,8 +11,8 @@
     </mat-form-field>
   </div>
 
-  <button mat-raised-button type="submit" [disabled]="!form.valid || loading">{{'igo.auth.login' | translate}}</button>
-  <button *ngIf="allowAnonymous" mat-raised-button type="button" [disabled]="loading" (click)="loginAnonymous()">{{'igo.auth.accessAnonymous' | translate }}</button>
+  <button mat-raised-button type="submit" color="primary" [disabled]="!form.valid || loading">{{'igo.auth.login' | translate}}</button>
+  <button id="anonymousBtn" *ngIf="allowAnonymous" mat-raised-button type="button" [disabled]="loading" (click)="loginAnonymous()">{{'igo.auth.accessAnonymous' | translate }}</button>
   <div *ngIf="error">
     <br/>
     <font size="3" color="red">{{error}}</font>

diff --git a/packages/auth/src/lib/auth-form/auth-intern.component.scss b/packages/auth/src/lib/auth-form/auth-intern.component.scss
@@ -1,3 +1,7 @@
 .full-width {
   width: 100%;
 }
+
+#anonymousBtn {
+  margin-left: 10px;
+}
diff --git a/packages/auth/src/lib/auth-form/auth-microsoft.component.html b/packages/auth/src/lib/auth-form/auth-microsoft.component.html
@@ -0,0 +1,4 @@
+<button class="microsoft-login-button" mat-raised-button (click)="loginMicrosoft()">
+  <mat-icon svgIcon="microsoft"></mat-icon>
+  {{'igo.auth.microsoft.login' | translate}}
+</button>
diff --git a/packages/auth/src/lib/auth-form/auth-microsoft.component.scss b/packages/auth/src/lib/auth-form/auth-microsoft.component.scss
@@ -0,0 +1,16 @@
+:host {
+  padding: 10px 10px 10px 0;
+  display: inline-block;
+  position: relative;
+  top: -15px;
+}
+
+:host > button {
+  font-size: 15px;
+  height: 40px;
+  width: 265px;
+}
+
+mat-icon {
+  margin-right: 10px;
+}