Azure Active Directory Library (ADAL) Support for ReactJS

Azure Active Directory Library (ADAL) support for React

react-adal

Azure Active Directory Library (ADAL) support for ReactJS

npm install react-adal

index.js

import { runWithAdal } from 'react-adal';
import { authContext } from './adalConfig';

const DO_NOT_LOGIN = false;

runWithAdal(authContext, () => {

  // eslint-disable-next-line
  require('./indexApp.js');

},DO_NOT_LOGIN);

This index wrap is needed because ADAL use iframes for token silent refresh, and we do not want to have duplicated ReactApp started on iframes too!

indexApp.js (your real app index as it already is - example below)

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { store } from './store';
import App from './App';

  ReactDOM.render(
    <Provider store={store}>
      <App />
    </Provider>,
    document.getElementById('root'),
  );

adalConfig.js

import { AuthenticationContext, adalFetch, withAdalLogin } from 'react-adal';

export const adalConfig = {
  tenant: '14d71d65-f596-4eae-be30-27f079bf8d4b',
  clientId: '14d71d65-f596-4eae-be30-27f079bf8d4b',
  endpoints: {
    api: '14d71d65-f596-4eae-be30-27f079bf8d4b',
  },
  cacheLocation: 'localStorage',
};

export const authContext = new AuthenticationContext(adalConfig);

export const adalApiFetch = (fetch, url, options) =>
  adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);

export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);

use adalApiFetch with your favorite “fetch” in your api call.

withAdalLoginApi HOC

change DO_NOT_LOGIN to true on index.js to stop login on index.js

import MyPage from './myPageComponent';
import Loading from './Loading';
import ErrorPage from './ErrorPage';

const MyProtectedPage = withAdalLoginApi(MyPage, () => <Loading />, (error) => <ErrorPage error={error}/>);

<Route 
   path="/onlyLoggedUsers"
   render={ ()=> <MyProtectedPage /> } 
/>

Logging Out

The AuthenticationContext object (authContext) has a built in function (logOut) to log out of a session. This function redirects user to the logout endpoint. After logout, the user will be redirected to the postLogoutRedirectUri if it was added as a property on the config object. The following code shows an example of how to create a Log Out dropdown in a NavBar

import React from 'react';
import { Navbar, Dropdown, DropdownMenu, DropdownItem } from 'reactstrap';
import { authContext } from '../adalConfig';

...

  render() {
    return (
      <header>
        <NavBar>
          ...
            <Dropdown>
              <DropdownMenu>
                <DropdownItem onClick={() => authContext.logOut()}>
                  Logout
                </DropdownItem>
              </DropdownMenu>
            </Dropdown>
          ...
        </NavBar>
      </header>
    );
  }

changelog

view -> CHANGELOG.md

tutorials from the web

https://itnext.io/a-memo-on-how-to-implement-azure-ad-authentication-using-react-and-net-core-2-0-3fe9bfdf9f36

https://medium.com/@dmitrii.korolev1/react-adal-typescript-pnp-sp-93ef69eddd18

inspired by

https://blog.mastykarz.nl/building-office-365-web-applications-react/

https://medium.com/@adpreg/react-with-redux-app-with-azure-ad-auth-and-net-core-starter-project-88b1bbdb7856

https://docs.microsoft.com/en-us/azure/active-directory/develop/active-directory-v2-protocols-implicit

MS adal.js

https://github.com/AzureAD/azure-activedirectory-library-for-js

Download Details:

Author: salvoravida

Source Code: https://github.com/salvoravida/react-adal

#react #reactjs #javascript

What is GEEK

Buddha Community

How to create a azure Active Directory tenant and transfer the Subscription

In this Video we have explained how to create a new azure active directory , renaming and transfer a existing Subscription

Before watching this video please watch how to create a free subscription with below link :
https://youtu.be/13NYdR1Kwu0

Timeline
Introduction :0.00
creating a new azure active directory tenant : 1.00
Rename a subscription :3.06
Transfer to an existing subscription : 3.13
Overview of azure active directory : 3.51

What’s Next ?
Watch::: what is azure resource group : https://youtu.be/vDuVVzWqDy0

Subscribe with below link 🖥🖥🖥
https://m.youtube.com/channel/UCpDM4kDe1J7DT8r_OoEpC7A?sub_confirmation=1

#azure active directory #azure #azure active

Azure Series #2: Single Server Deployment — part 1

Let’s assume for your organization, you know the number of users who will be accessing your application (web / mobile / BI reports) are defined and it does not fluctuate drastically like an Internet Organisation. All the fluctuations are measured and it is a step-up progression, measured and occurs over several years rather than like an erratic ECG graph. Your business could be a business with big ticket customers and is not catering for economies of scale. In such cases, you can go for Single server deployment in this case without over-engineering your business process and avoid unnecessary spend. Single server deployment for a lean and mean organization.

Gateway to your single server deployment

**Security **in general: Any cloud architecture should be ring fenced and also it should be security encompassing architecture in the sense that each and every resource that we deploy for the Single server architecture must have security-first architecture. Refer to “Azure Series #2: Cloud Security Roadmap” and Azure’s Security Benchmark.

1. Azure Active Directory

2. DNS

3. CDN

4. Advanced Threat Protection

5. DDoS Protection service

#azure-active-directory #azure-interview #azure-infrastructure #azure

Managed Identities in Azure with Terraform

In this article, I’ll explain the concepts around Managed Identities in Azure, the different types of managed identities, and how to assign them to a VM. Then we will show how to authenticate Terraform to Azure using the managed identity. Lastly, we will configure an Application Gateway to use a managed identity in order to access secrets in an Azure Key Vault.

What is a managed identity?

Managed identities provide an identity for applications to use when connecting to resources that support Azure Active Directory (Azure AD) authentication.

Crucially the management of credentials is handled by the managed identity (hence the word managed), and not by the application or the developer.

Using Managed Identities to Authenticate with Terraform

You can use a _system-assigned _managed identity to authenticate when using Terraform. The managed identity will need to be assigned RBAC permissions on the subscription, with a role of either Owner, or both Contributor and User access administrator.

Azure Application Gateway and Key Vault with Managed Identity in Terraform

Manged identities can also be created and managed using Terraform and then assigned a role. These can then be tied to a resource, like a VM or Application Gateway.

#azure-devops #azure-managed-identities #azure-active-directory #azure #terraform

Learn NoSQL in Azure: Diving Deeper into Azure Cosmos DB

This article is a part of the series – Learn NoSQL in Azure where we explore Azure Cosmos DB as a part of the non-relational database system used widely for a variety of applications. Azure Cosmos DB is a part of Microsoft’s serverless databases on Azure which is highly scalable and distributed across all locations that run on Azure. It is offered as a platform as a service (PAAS) from Azure and you can develop databases that have a very high throughput and very low latency. Using Azure Cosmos DB, customers can replicate their data across multiple locations across the globe and also across multiple locations within the same region. This makes Cosmos DB a highly available database service with almost 99.999% availability for reads and writes for multi-region modes and almost 99.99% availability for single-region modes.

In this article, we will focus more on how Azure Cosmos DB works behind the scenes and how can you get started with it using the Azure Portal. We will also explore how Cosmos DB is priced and understand the pricing model in detail.

How Azure Cosmos DB works

As already mentioned, Azure Cosmos DB is a multi-modal NoSQL database service that is geographically distributed across multiple Azure locations. This helps customers to deploy the databases across multiple locations around the globe. This is beneficial as it helps to reduce the read latency when the users use the application.

As you can see in the figure above, Azure Cosmos DB is distributed across the globe. Let’s suppose you have a web application that is hosted in India. In that case, the NoSQL database in India will be considered as the master database for writes and all the other databases can be considered as a read replicas. Whenever new data is generated, it is written to the database in India first and then it is synchronized with the other databases.

Consistency Levels

While maintaining data over multiple regions, the most common challenge is the latency as when the data is made available to the other databases. For example, when data is written to the database in India, users from India will be able to see that data sooner than users from the US. This is due to the latency in synchronization between the two regions. In order to overcome this, there are a few modes that customers can choose from and define how often or how soon they want their data to be made available in the other regions. Azure Cosmos DB offers five levels of consistency which are as follows:

• Strong
• Bounded staleness
• Session
• Consistent prefix
• Eventual

In most common NoSQL databases, there are only two levels – Strong and Eventual. Strong being the most consistent level while Eventual is the least. However, as we move from Strong to Eventual, consistency decreases but availability and throughput increase. This is a trade-off that customers need to decide based on the criticality of their applications. If you want to read in more detail about the consistency levels, the official guide from Microsoft is the easiest to understand. You can refer to it here.

Azure Cosmos DB Pricing Model

Now that we have some idea about working with the NoSQL database – Azure Cosmos DB on Azure, let us try to understand how the database is priced. In order to work with any cloud-based services, it is essential that you have a sound knowledge of how the services are charged, otherwise, you might end up paying something much higher than your expectations.

If you browse to the pricing page of Azure Cosmos DB, you can see that there are two modes in which the database services are billed.

• Database Operations – Whenever you execute or run queries against your NoSQL database, there are some resources being used. Azure terms these usages in terms of Request Units or RU. The amount of RU consumed per second is aggregated and billed
• Consumed Storage – As you start storing data in your database, it will take up some space in order to store that data. This storage is billed per the standard SSD-based storage across any Azure locations globally

Let’s learn about this in more detail.

#azure #azure cosmos db #nosql #azure #nosql in azure #azure cosmos db

k8s cluster on Azure integrates with Azure Active Directory(AAD) and webhook authentication

Glossary:

1. Native client

A type of client application that is installed natively on a device. It’s behalf of the human user while authenticating with AAD. We name it “kubectl app” in this article.

2. Web Client

A type of client application that executes all code on a web server, and able to function as a “confidential” client by securely storing its credentials on the server. We name it “apiserver” in this article.

#security #azure #kubernetes #azure-active-directory