feat: enable auth token dialog in api explorer

Make the authentication token dialog available in API Explorer

Signed-off-by: Dominique Emond <dremond@ca.ibm.com>

packages/shopping/src/application.ts

@@ -29,6 +29,8 @@ import {
 import {PasswordHasherBindings} from './keys';
 import {BcryptHasher} from './services/hash.password.bcryptjs';
 import {JWTAuthenticationStrategy} from './authentication-strategies/jwt-strategy';
+import {RestBindings} from '@loopback/rest';
+import {addSecuritySchemesToOpenApiSpec} from './utils/security-spec';
 
 /**
  * Information from package.json
@@ -99,4 +101,15 @@ export class ShoppingApplication extends BootMixin(
 
     this.bind(UserServiceBindings.USER_SERVICE).toClass(MyUserService);
   }
+
+  modifyApiSpecAndRebind() {
+    let openAPISchema = this.getSync(RestBindings.API_SPEC);
+    addSecuritySchemesToOpenApiSpec(openAPISchema);
+    this.bind(RestBindings.API_SPEC).to(openAPISchema);
+  }
+
+  async start(): Promise<void> {
+    this.modifyApiSpecAndRebind();
+    await super.start();
+  }
 }

packages/shopping/src/controllers/user.controller.ts

@@ -5,7 +5,15 @@
 
 import {repository} from '@loopback/repository';
 import {validateCredentials} from '../services/validator';
-import {post, param, get, requestBody, HttpErrors} from '@loopback/rest';
+import {
+  post,
+  param,
+  get,
+  requestBody,
+  HttpErrors,
+  RestBindings,
+  Request,
+} from '@loopback/rest';
 import {User, Product} from '../models';
 import {UserRepository} from '../repositories';
 import {RecommenderService} from '../services/recommender.service';
@@ -29,6 +37,7 @@ import {
   UserServiceBindings,
 } from '../keys';
 import * as _ from 'lodash';
+import {SECURITY_SPEC_OPERATION} from '../utils/security-spec';
 
 export class UserController {
   constructor(
@@ -41,6 +50,7 @@ export class UserController {
     public jwtService: TokenService,
     @inject(UserServiceBindings.USER_SERVICE)
     public userService: UserService<User, Credentials>,
+    @inject(RestBindings.Http.REQUEST) private request: Request,
   ) {}
 
   @post('/users', {
@@ -102,6 +112,7 @@ export class UserController {
   }
 
   @get('/users/me', {
+    security: SECURITY_SPEC_OPERATION,
     responses: {
       '200': {
         description: 'The current user profile',

packages/shopping/src/utils/security-spec.ts

@@ -0,0 +1,26 @@
+// Copyright IBM Corp. 2018,2019. All Rights Reserved.
+// Node module: loopback4-example-shopping
+// This file is licensed under the MIT License.
+// License text available at https://opensource.org/licenses/MIT
+
+import {SecuritySchemeObject, ReferenceObject} from '@loopback/openapi-v3';
+import {OpenApiSpec} from '@loopback/rest';
+
+export const SECURITY_SPEC_OPERATION = [{bearerAuth: []}];
+export type SecuritySchemeObjects = {
+  [securityScheme: string]: SecuritySchemeObject | ReferenceObject;
+};
+export const SECURITY_SCHEME_SPEC: SecuritySchemeObjects = {
+  bearerAuth: {
+    type: 'http',
+    scheme: 'bearer',
+    bearerFormat: 'JWT',
+  },
+};
+
+
+export function addSecuritySchemesToOpenApiSpec(schema: OpenApiSpec) {
+  schema.components = schema.components || {};
+  schema.components.securitySchemes = schema.components.securitySchemes || {};
+  Object.assign(schema.components.securitySchemes, SECURITY_SCHEME_SPEC);
+}