From 14e7f173691442ac7a5b6aa3000dae451ab1f3b5 Mon Sep 17 00:00:00 2001 From: Sumanth Chinthagunta Date: Sat, 20 Jul 2019 17:59:51 -0700 Subject: [PATCH] feat(auth): switching back to angular-oauth2-oidc switching back to angular-oauth2-oidc as it now support code flow --- PLAYBOOK.md | 40 +++++++++++++------ libs/auth/src/lib/admin.guard.ts | 2 +- libs/auth/src/lib/auth.guard.ts | 2 +- libs/auth/src/lib/auth.module.ts | 17 +++++++- libs/auth/src/lib/auth.service.ts | 3 +- libs/auth/src/lib/auth.state.ts | 2 +- .../lib/components/login/login.component.ts | 7 ++-- libs/auth/src/lib/oauth.config.ts | 18 ++++++++- libs/auth/src/lib/oauth.init.ts | 4 +- libs/auth/src/lib/ropc.service.ts | 2 +- .../src/lib/interceptors/jwt.interceptor.ts | 2 +- .../dashboard-layout.component.ts | 2 +- package.json | 4 +- stories/awesome.md | 17 ++++---- yarn.lock | 30 ++++++-------- 15 files changed, 94 insertions(+), 58 deletions(-) diff --git a/PLAYBOOK.md b/PLAYBOOK.md index dc4c9afa0..883ddba9f 100644 --- a/PLAYBOOK.md +++ b/PLAYBOOK.md @@ -29,13 +29,13 @@ Do-it-yourself step-by-step instructions to create this project structure from s | Software | Version | Optional | | -------------------- | ------- | -------- | | Node | v12.5.0 | | -| Yarn | v1.17.0 | | +| Yarn | v1.17.3 | | | Lerna | v3.14.1 | | -| Angular CLI | v8.1.0 | | -| @nrwl/workspace | v8.2.0 | | +| Angular CLI | v8.2.0 | | +| @nrwl/workspace | v8.3.0 | | | @nestjs/cli | v6.5.0 | | | semantic-release-cli | v5.1.1 | | -| commitizen | v3.1.1 | | +| commitizen | v4.0.3 | | ### Install Prerequisites @@ -89,7 +89,7 @@ yarn global remove commitizen yarn global add lerna yarn global add @angular/cli@next -yarn global add @nrwl/workspace +yarn global add @nrwl/workspace@next yarn global add @nestjs/cli yarn global add semantic-release-cli yarn global add commitizen @@ -180,6 +180,9 @@ cd ngx-starter-kit # Add PWA ng add @angular/pwa@next --project webapp +# Add architect for gh-pages deployment +ng add ngx-gh + # Add Material # Ref: https://material.angular.io/guide/schematics # Ref: https://material.angular.io/guide/getting-started @@ -194,7 +197,7 @@ yarn add @angular/flex-layout yarn add angular-in-memory-web-api # Add oauth2-oidc ~yarn add angular-oauth2-oidc~ -yarn add @xmlking/angular-oauth2-oidc-all +yarn add angular-oauth2-oidc # Add NGXS ng add @ngxs/schematics # makesure "defaultCollection" is set back to "@nrwl/schematics" in angular.json @@ -679,15 +682,26 @@ npx compodoc -s -d docs ### Deploy -> deploy demo to gh-pages +#### deploy this app with mock config to gh-pages + +This command will + +1. build with mock config +2. compress +3. and push build to gh-pages + +```bash +deploy:mock +``` + +#### CI/CD Pipeline ```bash -# build for gh-pages -yarn build:mock -# maybe compress -gzip -k -r dist/apps/webapp/*.js -# push gh-pages -npx ngh --dir dist/apps/webapp +# deploy only `webapp` app +ng run webapp:deploy +# ng run webapp:deploy --base-href /ngx-starter-kit/ +# deploy all affected apps +nx affected --target deploy ``` ### Release diff --git a/libs/auth/src/lib/admin.guard.ts b/libs/auth/src/lib/admin.guard.ts index e5e543c10..002191314 100644 --- a/libs/auth/src/lib/admin.guard.ts +++ b/libs/auth/src/lib/admin.guard.ts @@ -1,7 +1,7 @@ import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot } from '@angular/router'; import { Observable } from 'rxjs'; -import { OAuthService } from '@xmlking/angular-oauth2-oidc-all'; +import { OAuthService } from 'angular-oauth2-oidc'; import { MatSnackBar } from '@angular/material/snack-bar'; @Injectable({ diff --git a/libs/auth/src/lib/auth.guard.ts b/libs/auth/src/lib/auth.guard.ts index 2612d1a95..23a9167cc 100644 --- a/libs/auth/src/lib/auth.guard.ts +++ b/libs/auth/src/lib/auth.guard.ts @@ -1,6 +1,6 @@ import { Injectable } from '@angular/core'; import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router'; -import { OAuthService } from '@xmlking/angular-oauth2-oidc-all'; +import { OAuthService } from 'angular-oauth2-oidc'; import { Store } from '@ngxs/store'; import { Login } from './auth.actions'; // import { waitUntil } from '@ngx-starter-kit/utils'; diff --git a/libs/auth/src/lib/auth.module.ts b/libs/auth/src/lib/auth.module.ts index a845845fa..a20c34bab 100644 --- a/libs/auth/src/lib/auth.module.ts +++ b/libs/auth/src/lib/auth.module.ts @@ -2,7 +2,13 @@ import { APP_INITIALIZER, ModuleWithProviders, NgModule } from '@angular/core'; import { CommonModule } from '@angular/common'; import { RouterModule } from '@angular/router'; import { NgxsModule, Store } from '@ngxs/store'; -import { JwksValidationHandler, OAuthModule, OAuthService, ValidationHandler } from '@xmlking/angular-oauth2-oidc-all'; +import { + JwksValidationHandler, + NullValidationHandler, + OAuthModule, + OAuthService, + ValidationHandler, +} from 'angular-oauth2-oidc'; import { environment } from '@env/environment'; import { ReactiveFormsModule } from '@angular/forms'; @@ -57,7 +63,14 @@ const matModules = [ ], declarations: [LoginComponent], entryComponents: [LoginComponent], - providers: [ROPCService, AuthService, AuthGuard, { provide: ValidationHandler, useClass: JwksValidationHandler }], + providers: [ + ROPCService, + AuthService, + AuthGuard, + { provide: ValidationHandler, useClass: JwksValidationHandler }, + // NOTE: for CodeFlow use NullValidationHandler + // { provide: ValidationHandler, useClass: NullValidationHandler }, + ], }) export class AuthModule { static forRoot(): ModuleWithProviders { diff --git a/libs/auth/src/lib/auth.service.ts b/libs/auth/src/lib/auth.service.ts index cce815014..7e72164a7 100644 --- a/libs/auth/src/lib/auth.service.ts +++ b/libs/auth/src/lib/auth.service.ts @@ -1,5 +1,5 @@ import { Injectable } from '@angular/core'; -import { OAuthService } from '@xmlking/angular-oauth2-oidc-all'; +import { OAuthService, OAuthEvent } from 'angular-oauth2-oidc'; import { HttpClient, HttpErrorResponse } from '@angular/common/http'; import { Observable, Subscription, throwError } from 'rxjs'; import { catchError, filter, mergeMap, tap } from 'rxjs/operators'; @@ -10,7 +10,6 @@ import { LoginComponent } from './components/login/login.component'; import { MatDialog } from '@angular/material/dialog'; import { Router } from '@angular/router'; import { fromPromise } from 'rxjs/internal/observable/fromPromise'; -import { OAuthEvent } from '@xmlking/angular-oauth2-oidc-all/events'; @Injectable() export class AuthService { diff --git a/libs/auth/src/lib/auth.state.ts b/libs/auth/src/lib/auth.state.ts index fc705c94f..f4c99ea61 100644 --- a/libs/auth/src/lib/auth.state.ts +++ b/libs/auth/src/lib/auth.state.ts @@ -13,7 +13,7 @@ import { import { AuthService } from './auth.service'; import { Router } from '@angular/router'; import { authConfigCodeFlow, authConfigHybridFlow, authConfigImplicit, authConfigPassword } from './oauth.config'; -import { OAuthService } from '@xmlking/angular-oauth2-oidc-all'; +import { OAuthService } from 'angular-oauth2-oidc'; import { map } from 'rxjs/operators'; export interface AuthStateModel { diff --git a/libs/auth/src/lib/components/login/login.component.ts b/libs/auth/src/lib/components/login/login.component.ts index 960e83e70..74f0a4263 100644 --- a/libs/auth/src/lib/components/login/login.component.ts +++ b/libs/auth/src/lib/components/login/login.component.ts @@ -3,7 +3,7 @@ import { HttpErrorResponse } from '@angular/common/http'; import { FormGroup, FormBuilder, Validators } from '@angular/forms'; import { Store } from '@ngxs/store'; import { MAT_DIALOG_DATA, MatDialogRef } from '@angular/material/dialog'; -import { OAuthService } from '@xmlking/angular-oauth2-oidc-all'; +import { OAuthService } from 'angular-oauth2-oidc'; import { ROPCService } from '../../ropc.service'; import { ChangeAuthMode, AuthMode } from '../../auth.actions'; @@ -53,9 +53,8 @@ export class LoginComponent { } initSSO() { - this.store.dispatch(new ChangeAuthMode(AuthMode.ImplicitFLow)).subscribe(() => { - this.oauthService.initImplicitFlow(); - // this.oauthService.initAuthorizationCodeFlow(); + this.store.dispatch(new ChangeAuthMode(AuthMode.ImplicitFLow /* HINT: AuthMode.CodeFLow*/)).subscribe(() => { + this.oauthService.initLoginFlow(); console.log('initSSO'); }); } diff --git a/libs/auth/src/lib/oauth.config.ts b/libs/auth/src/lib/oauth.config.ts index f7ea332b3..5bd40c44e 100644 --- a/libs/auth/src/lib/oauth.config.ts +++ b/libs/auth/src/lib/oauth.config.ts @@ -1,4 +1,4 @@ -import { AuthConfig } from '@xmlking/angular-oauth2-oidc-all'; +import { AuthConfig } from 'angular-oauth2-oidc'; import { environment } from '@env/environment'; const authConfig: AuthConfig = { @@ -51,8 +51,22 @@ export const authConfigCodeFlow: AuthConfig = { timeoutFactor: environment.production ? 0.75 : 0.1, disableAtHashCheck: true, - // PingFederate Specific + // set the scope for the permissions the client should request + // The first four are defined by OIDC. + // Important: Request offline_access to get a refresh token + // The ngxapi-audience scope is a usecase specific one + scope: 'openid profile email ngxapi-audience', + // TODO: scope: 'openid profile email offline_access ngxapi-audience', + + responseType: 'code', + // PingFederate Specific: + + // Just needed if your auth server demands a secret. In general, this + // is a sign that the auth server is not configured with SPAs in mind + // and it might not enforce further best practices vital for security + // such applications. // dummyClientSecret: '.....', + // customQueryParams: { acr_values: '....' }, }; diff --git a/libs/auth/src/lib/oauth.init.ts b/libs/auth/src/lib/oauth.init.ts index dcbdd2e6a..dbea1c709 100644 --- a/libs/auth/src/lib/oauth.init.ts +++ b/libs/auth/src/lib/oauth.init.ts @@ -1,11 +1,11 @@ -import { OAuthService } from '@xmlking/angular-oauth2-oidc-all'; +import { OAuthService } from 'angular-oauth2-oidc'; import { Store } from '@ngxs/store'; import { LoginSuccess } from './auth.actions'; import { AuthorizationErrorResponse } from './oauth.errors'; import { authConfigImplicit, authConfigCodeFlow } from './oauth.config'; export function initializeAuth(oauthService: OAuthService, store: Store) { - // use appropriate authConfig, matching to initSSO() in login.component.ts + // HINT: use appropriate authConfig, matching to initSSO() in login.component.ts // oauthService.configure(authConfigCodeFlow); oauthService.configure(authConfigImplicit); oauthService.setStorage(sessionStorage); diff --git a/libs/auth/src/lib/ropc.service.ts b/libs/auth/src/lib/ropc.service.ts index ef4efe9b2..5794f9a8f 100644 --- a/libs/auth/src/lib/ropc.service.ts +++ b/libs/auth/src/lib/ropc.service.ts @@ -1,5 +1,5 @@ import { Inject, Injectable } from '@angular/core'; -import { OAuthService } from '@xmlking/angular-oauth2-oidc-all'; +import { OAuthService } from 'angular-oauth2-oidc'; import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http'; import { environment } from '@env/environment'; diff --git a/libs/core/src/lib/interceptors/jwt.interceptor.ts b/libs/core/src/lib/interceptors/jwt.interceptor.ts index 8a4e7f7ae..fe82edab2 100644 --- a/libs/core/src/lib/interceptors/jwt.interceptor.ts +++ b/libs/core/src/lib/interceptors/jwt.interceptor.ts @@ -3,7 +3,7 @@ import { HttpEvent, HttpHandler, HttpInterceptor, HttpRequest } from '@angular/c import { Observable } from 'rxjs'; import { Store } from '@ngxs/store'; import { environment } from '@env/environment'; -import { OAuthService } from '@xmlking/angular-oauth2-oidc-all'; +import { OAuthService } from 'angular-oauth2-oidc'; const allowedUrls = [environment.API_BASE_URL, environment.DOCS_BASE_URL]; diff --git a/libs/dashboard/src/lib/containers/dashboard-layout/dashboard-layout.component.ts b/libs/dashboard/src/lib/containers/dashboard-layout/dashboard-layout.component.ts index 9486b9c3d..a20384bed 100644 --- a/libs/dashboard/src/lib/containers/dashboard-layout/dashboard-layout.component.ts +++ b/libs/dashboard/src/lib/containers/dashboard-layout/dashboard-layout.component.ts @@ -9,7 +9,7 @@ import { RouterState } from '@ngxs/router-plugin'; import { filter, map } from 'rxjs/operators'; import { RouterStateData, WINDOW } from '@ngx-starter-kit/core'; import { untilDestroy } from '@ngx-starter-kit/ngx-utils'; -import { OAuthService } from '@xmlking/angular-oauth2-oidc-all'; +import { OAuthService } from 'angular-oauth2-oidc'; // import { AuthService } from '@ngx-starter-kit/oidc'; diff --git a/package.json b/package.json index ecddf7163..730d8fc38 100644 --- a/package.json +++ b/package.json @@ -132,11 +132,11 @@ "@ngxs/router-plugin": "^3.4.3", "@ngxs/storage-plugin": "^3.4.3", "@ngxs/store": "^3.4.3", - "@xmlking/angular-oauth2-oidc-all": "^6.0.1", "@xmlking/api-ai-javascript": "^2.0.0-beta.22", - "@xmlking/ngx-knob": "^0.2.0", + "@xmlking/ngx-knob": "^0.3.0", "@xmlking/ngx-quicklink": "^0.0.11", "angular-in-memory-web-api": "^0.8.0", + "angular-oauth2-oidc": "8.0.1", "chart.js": "^2.8.0", "chart.piecelabel.js": "^0.15.0", "core-js": "^2.6.7", diff --git a/stories/awesome.md b/stories/awesome.md index 510e9c8d7..e62f607f5 100644 --- a/stories/awesome.md +++ b/stories/awesome.md @@ -18,7 +18,7 @@ A curated list of awesome Angular resources - Differential Loading - Find what browsers are supported? `cd apps/webapp`, `npx browserslist` + Find what browsers are supported? `cd apps/webapp`, `npx browserslist` - How do I design Landing page? @@ -126,16 +126,15 @@ A curated list of awesome Angular resources > `{ enableTracing: true }` > Read [debugging router](https://dzone.com/articles/note-to-self-debugging-angular-4-routing) +- How to open Angular Material Dialog via route link? -* How to open Angular Material Dialog via route link? - > useful for sharing bookmarkable links. e.g., `/account/edit` `/account/add` - > [Routing to Angular Material Dialogs](https://medium.com/ngconf/routing-to-angular-material-dialogs-c3fb7231c177) - -* How to use new `providedIn` Dependency Injection? + > useful for sharing bookmarkable links. e.g., `/account/edit` `/account/add` > [Routing to Angular Material Dialogs](https://medium.com/ngconf/routing-to-angular-material-dialogs-c3fb7231c177) + +- How to use new `providedIn` Dependency Injection? > Read Total Guide To Angular 6+ Dependency Injection — : [providedIn vs providers: []](https://medium.com/@tomastrajan/total-guide-to-angular-6-dependency-injection-providedin-vs-providers-85b7a347b59f) -* How to manage state in the front-end? +- How to manage state in the front-end? > use [NGXS](https://amcdnl.gitbooks.io/ngxs/) > Read [Immer with NGXS](https://blog.angularindepth.com/simple-state-mutations-in-ngxs-with-immer-48b908874a5e) @@ -199,6 +198,10 @@ Total Guide To Dynamic Angular Animations That Can Be Customized At Runtime > [Rendering on the Web](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) > Refer [here](https://blog.angularindepth.com/creating-an-angular-universal-app-with-the-angular-cli-5ef26c9fd9a5)
> [nest-next](https://github.com/kyle-mccarthy/nest-next)
> [nuxt/vue.js + nest](https://github.com/chanlito/nuxt-ts-starter)
> [nest + angular](https://github.com/kamilmysliwiec/universal-nest)
+- dynamic form group builder with class-validator + + > todo [ngx-dynamic-form-builder](https://github.com/EndyKaufman/ngx-dynamic-form-builde) + - How to configure nginx? > Use [blog](https://medium.freecodecamp.org/an-introduction-to-nginx-for-developers-62179b6a458f) diff --git a/yarn.lock b/yarn.lock index ac7cca817..f91750922 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2816,15 +2816,6 @@ "@webassemblyjs/wast-parser" "1.8.5" "@xtuc/long" "4.2.2" -"@xmlking/angular-oauth2-oidc-all@^6.0.1": - version "6.0.1" - resolved "https://registry.yarnpkg.com/@xmlking/angular-oauth2-oidc-all/-/angular-oauth2-oidc-all-6.0.1.tgz#3c0c2bf2200b0536eb505c1ffebafe507bdb131f" - integrity sha512-viZEyNFUifMoqw13dAAhvE0FnHgl4rbRD9tmupN1rnO5L58wr4kFjbfVKUoQAhGdYVw9hmprCc56bdidfgIA/A== - dependencies: - js-sha256 "^0.9.0" - jsrsasign "^8.0.12" - tslib "^1.9.0" - "@xmlking/api-ai-javascript@^2.0.0-beta.22": version "2.0.0-beta.22" resolved "https://registry.yarnpkg.com/@xmlking/api-ai-javascript/-/api-ai-javascript-2.0.0-beta.22.tgz#36799dda95515b4010e5381d11fc37cc602c53fc" @@ -2842,10 +2833,10 @@ ms "^2.1.1" request "^2.88.0" -"@xmlking/ngx-knob@^0.2.0": - version "0.2.0" - resolved "https://registry.yarnpkg.com/@xmlking/ngx-knob/-/ngx-knob-0.2.0.tgz#8d87881e45b1e7ef04fa2a28a350ba156c32c84a" - integrity sha512-orGZTH+rZjZxhfBeuBkJbuLZO5bJAuTM3ucfOEcIN23tMf8WfEgWLhTLBwOZ8Knc6kzBTwXG7QkCinJdvPpE1Q== +"@xmlking/ngx-knob@^0.3.0": + version "0.3.0" + resolved "https://registry.yarnpkg.com/@xmlking/ngx-knob/-/ngx-knob-0.3.0.tgz#68fd9cb236858985fac2c0320c58122dcf9bfc08" + integrity sha512-nCtk88sGu/MhMGbKsqwGZinT2vnXjbbALlvF3V7CWb1rQDtoszHJ9CSFmazKGQDsx96wJs9u6IsfLYzXsjKb1g== dependencies: tslib "^1.9.0" @@ -3102,6 +3093,14 @@ angular-in-memory-web-api@^0.8.0: resolved "https://registry.yarnpkg.com/angular-in-memory-web-api/-/angular-in-memory-web-api-0.8.0.tgz#6cb63c9e8e22c59383dfcccaf0512791400bf4e1" integrity sha512-2n0YtCLFxZo4JePHvH6q8b7JmBmhZq44Ic8VaBPRSXE4vAmlKXHU+kI2quNa612EAETDRkZcvLOU8K8CkhIZgQ== +angular-oauth2-oidc@8.0.1: + version "8.0.1" + resolved "https://registry.yarnpkg.com/angular-oauth2-oidc/-/angular-oauth2-oidc-8.0.1.tgz#b5326874297362957d1da9e70a07243d6e249800" + integrity sha512-EHy/jxAJtkNrZ8sjDsSLPZ4qCXIDyCj7SBDpHzyUAdxMklGRoTkyWnjLdC8j0jYC6nEycaaVe06k1esm54XPAg== + dependencies: + jsrsasign "^8.0.12" + tslib "^1.9.0" + ansi-align@^2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/ansi-align/-/ansi-align-2.0.0.tgz#c36aeccba563b89ceb556f3690f0b1d9e3547f7f" @@ -10252,11 +10251,6 @@ js-levenshtein@^1.1.3: resolved "https://registry.yarnpkg.com/js-levenshtein/-/js-levenshtein-1.1.6.tgz#c6cee58eb3550372df8deb85fad5ce66ce01d59d" integrity sha512-X2BB11YZtrRqY4EnQcLX5Rh373zbK4alC1FW7D7MBhL2gtcC17cTnr6DmfHZeS0s2rTHjUTMMHfG7gO8SSdw+g== -js-sha256@^0.9.0: - version "0.9.0" - resolved "https://registry.yarnpkg.com/js-sha256/-/js-sha256-0.9.0.tgz#0b89ac166583e91ef9123644bd3c5334ce9d0966" - integrity sha512-sga3MHh9sgQN2+pJ9VYZ+1LPwXOxuBJBA5nrR5/ofPfuiJBE2hnjsaN8se8JznOmGLN2p49Pe5U/ttafcs/apA== - js-stringify@^1.0.1: version "1.0.2" resolved "https://registry.yarnpkg.com/js-stringify/-/js-stringify-1.0.2.tgz#1736fddfd9724f28a3682adc6230ae7e4e9679db"