Microsoft Azure is a cloud-based platform created by the Microsoft company in the Platform as a Service model. It gives access to the mechanisms that allow for data processing and storage. The public release of this platform was on the 1.02.2010. From this day, it is available for commercial use.
Table of Contents
The most important elements of Microsoft Azure platform
This platform is made of three technologies that provide different possibilities and options for programmers. What is more, the Windows Azure platform can be used by the applications used locally on computers and by cloud-based applications. The Microsoft Azure platform includes the following elements:
- Windows Azure – it provides the environment that allows for launching applications based on Windows Server operating systems. This environment also provides space for data storage. This system can be launched on virtual machines that use a technology similar to the Hyper-V.
- Compute – it is responsible for computing tasks of hosted applications.
- Storage – it is responsible for in-cloud data storage.
- Fabric – it is responsible for the management and monitoring of applications launched in the cloud and for the management of machines working in the computing center.
- SQL Azure – it assures the possibility of creating a relational database implemented for in-cloud launching.
- Windows Azure Platform AppFabric – a component that provides additional functionalities and services. It includes the following mechanisms:
- Service Bus – it allows for creating a hybrid cloud and assures a safe connection between local and remote resources.
- Access Control Services – a mechanism responsible for controlling access to the services. It is based on federal conception.
- Caching – scattered cache “in memory”.
Safety – Microsoft Identity Platform
Microsoft Azure is a solution that includes many procedures and technical solutions that assure a very high safety of data and applications stored in the cloud. It means that all tasks performed with the use of this platform are safe and users of Microsoft Azure do not have to be worried about their sensitive data. For this part we will use Microsoft Identity Platform. This feature allows us to do user authentication in fully front-end (JavaScript applications).
Azure Microsoft Identity Platform – users authentication in front-end
In this article we assume that you have access to Azure Active Directory (Azure AD) of some organization, e.g. at your work, school or university. If not the first step should be to follow documentation and create the free account. The the end of this article you can find all needed links to Microsoft Azure.
Microsoft Identity Platform implements OAuth 2.0 authorization standard for access delegation, used often in the web for users to grant websites or app to access their sources (like API, data base etc.) on other websites but without giving them the passwords. In this article we will use Microsoft Identity Platform to make available user login in fully front-end application without building user verification functionality in our own back-end (generally – no back-end needed at all). Users needs to have only the Microsoft accounts (like for their own windows OS).
In this article we base on an organization’s Azure platform portal. It means that in this example, we want to build protected fully front-end (Vue, React or Angular) SPA application inside our organization (our work, company, school, university) and allow to login to this app for other users only inside our organization.
My app in this example will be built in Vue.JS 2 with TypeScript (@vue/cli-plugin-typescript).
Azure Microsoft Identity Platform for Vue SPA app – step by step
- When we have an active plan for Microsoft Azure we need to login into portal.azure.com, click on menu in top left corner and choose “Azure Active Directory”.
- Next, we click on “App registrations” in left menu.
“Accounts in this organizational directory only (COMPANY_NAME only – Single tenant)” – this means that only users from inside your organization will be able to login into your application, as we did in our example.In “Redirect URI” enter the URI of page where user should be forwarded to after successful login. This can me e.g. home page of your application. You can enter here address both for localhost or on external server available in internet or your organization’s internal network. - Once you have registered your app go in the application panel we go to the webpage bookmark “Authentication” in yours Azure app registrations panel.
- We mark in paragraph “Implicit grant”:
- ID tokens – only then, when we make login for front-end of the application
- Access tokens – when we want tokens to be verificated by back-end (API), too
- The next step is coding the final solution, using MSAL (Microsoft Authentication Library). First we need to install MSAL in our project, in our case here, in Vue CLI 2 + Typescript. We are using NPM so we need to write down in command line:
npm install –save msalMore about MSAL you can find here:
https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-core/README.md - Next we will code the solution. We need to create a file which will contain the MSAL configuration. Let’s name it “azureSrv.ts”.
import * as Msal from "msal"; const msalConfig = { auth: { clientId: 'XXXXXXXX-0000-0000-0000-YYYYYYYYYYYY', authority: 'https://login.microsoftonline.com/YOUR_TENANT_ID' } } export const azureInstance = new Msal.UserAgentApplication(msalConfig);We add here property “Authority” because we have checked in step 2 above we checked:
“Accounts in this organizational directory only (COMPANY_NAME only – Single tenant)”On image below you can see a place where you can find Tenant ID in your Azure Active Directory main page.
