Enable the authorize button from swagger-ui in the shopping example with tutorial

[jannyHou]

Suggestion

As a follow-up story of spike #2027
PoC loopbackio/loopback4-example-shopping#267 enabled the bearer token setting globally, which demos how to perform the authentication from explorer.

• This story is created to formally add the UI in the example repo.
• And also find out the scope of the endpoints that we want to secure
• Only the /users/me will have the operation-level security requirement object setting in the OpenAPI Specification

Use Cases

Using API Explorer, after a user login and get the token, they can set the token in the "authorize" dialog so that when calling the endpoint /users/me decorated by @authenticate(), the bearer token is included in the header.

Examples

See screenshots in https://github.com/strongloop/loopback4-example-shopping/blob/6283c6b995ffcaa166babb91dd99a354bb5f3ac2/README.md#authentication

Acceptance criteria

• Decide the scope of the endpoints that you want to secure with the bearer security schema. (The spike apply it globally, but the formal PR should decide the scope first)
• Only the /users/me endpoint will have the operation-level security requirement object setting in the OpenAPI specification.
• Enable the "authorize" button by adding security scheme object and security requirement object properly.
• Update the tutorial and doc to reflect the change.
• The tutorial should include how to set global and operation level security policy.

[dhmlau]

@jannyHou, are we planning to have an out-of-box support to allow token based authentication outside the shopping example?