Store Frontend Website
The Store Frontend sample website consumes the Product Service and the Order Service APIs. It is a simple ASP.NET Core MVC website. In this section, we will install and explore the sample store website.
Install Store Website
To install the store website sample in your cluster, run the following commands.
Update the helm repository
helm repo update
Install the sample, replace the [placeholder] text with your data.
helm install rcl-apps/store-sample --set host=[your-dns-name]
The host parameter is the DNS name for your cluster. You can find it by clicking on the Public IP for the cluster in the resource group.
Once the sample is installed, you can access the website at : https://[your-dns-name]/store
Authentication and Authorization
At this point, the store website cannot access the APIs because it has no authorization. Also, the sign in will not work until authentication is configured.
Configure API Authorization
In the Identity Service Admin panel, create a new client for the store website and name the client ‘store-sample’
Create a client secret and set its value to ‘1234’
Add the ‘orderapi-full’ and ‘productapi-full’ scopes to the client’s list of allowed scopes so that the client can access the APIs
Open the store website and verify that you can see a list of products on the front page. This indicates that the store website client can now access the APIs.
Follow these steps to enable single-sign-on (SSO) in the store website. Add a Sign In Uri for the site. The Sign In Uri is in the format https://[your-dns-name]/store/signin-oidc
Add a Sign Out Uri for the site. The Sign Out Uri is in the format https://[your-dns-name]/store/signout-callback-oidc
Now, click the ‘Log In’ link in the website and sign in with your account.
Adding a Role Claim
Role Claims allow a user to access a protected page on a website. For instance, if you click the ‘Orders’ link in the store website, you will be forwarded to the ‘Access Denied’ page because you do not have the authority to access the page.
Follow these steps to create a Role Claim. In the Identity Service Admin panel, add a role called ‘OrderAdmin’.
In the ‘OrderAdmin’ role, add a claim with a ClaimType : ‘OrderAdmin’ and a ClaimValue : ‘True’.
Finally, add a user to the ‘OrderAdmin’ role. The user will inherit the role claim.
The store website is programmed to accept a ClaimType :’OrderAdmin’ with ClaimValue: ‘True’ to access the ‘Orders’ page. Now logout and login again with the username you added to the ‘OrderAdmin’ role, and try to access the ‘Orders’ page. (You must re-login to get the new role claims). You should now be able to access the ‘Orders’ page.
Exploring the website
The front page of the site displays products from the Product Service API. Click on the ‘Order Now’ button to create an order for pencils. The ‘inStock’ value for pencils is currently 1000.
Confirm the Order.
After the order is confirmed, you will notice that the ‘inStock’ value for pencils in now 999. As you may recall from the previous sections, each time an order is created by the Order Service, the Product Service receives a message from the Azure Service Bus and decreases the product’s ‘inStock’ value. This demonstrates how APIs can communicate with each other via asynchronous messaging. In this way, each microservice API can be decoupled from each other.
When you confirmed the order, the Order Service created a new Order. Click on the ‘Order’ link to see the new order that was created.
In this section, we installed and explored the sample store frontend website. We configured single-sign-on (SSO) and API authorization for the website using Identity Service. We saw how the website communicates with the Order and Product API microservices and provides a web UI to display data and interact with these services. We also saw how the Product and Order API microservices communicate with each other via Azure Service Bus messaging.