08 Frontend Microservices Website

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.

placeholder

Once the sample is installed, you can access the website at : https://[your-dns-name]/store

placeholder

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’

placeholder

Create a client secret and set its value to ‘1234’

placeholder

Add the ‘orderapi-full’ and ‘productapi-full’ scopes to the client’s list of allowed scopes so that the client can access the APIs

placeholder

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.

placeholder

Configure Single-Sign-On

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

placeholder

Add a Sign Out Uri for the site. The Sign Out Uri is in the format https://[your-dns-name]/store/signout-callback-oidc

placeholder

Now, click the ‘Log In’ link in the website and sign in with your account.

placeholder

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.

placeholder

Follow these steps to create a Role Claim. In the Identity Service Admin panel, add a role called ‘OrderAdmin’.

placeholder

In the ‘OrderAdmin’ role, add a claim with a ClaimType : ‘OrderAdmin’ and a ClaimValue : ‘True’.

placeholder

Finally, add a user to the ‘OrderAdmin’ role. The user will inherit the role claim.

placeholder

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.

placeholder

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.

placeholder

Confirm the Order.

placeholder

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.

placeholder

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.

placeholder

Summary

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.

Comments