DEV Community: Felipe de Senna

Autenticação ReactJS - (ReactJS, Azure AD)

Felipe de Senna — Sun, 28 Mar 2021 21:24:47 +0000

Com o crescimento constante dos sistemas na web cria-se uma necessidade e preocupação com a segurança desses sistemas. Uma forma de criar uma camada de segurança é a criação de autenticação via login.

E uma alternativa de autenticação é o Azure AD (Active Directory), com ele é possível criar configurações específicas para ter essa camada de segurança para seu sistema web.

No Azure AD é possível criar um grupo de usuários e nele adicionar todas as contas de e-mail que podem acessar o sistema web, você pode adicionar qualquer conta que esteja dentro dos domínios da Microsoft, e-mails pessoais e corporativos.

Sendo assim, nesse artigo eu vou demonstrar como fazer as configurações para ativar o Active Directory dentro do Portal do Azure e em seguida as configurações para integrar o Azure AD com o ReactJS.

O primeiro passo é a configuração dentro do Portal do Azure, após entrar no portal é necessário acessar o diretório/assinatura a qual será criada a configuração, em seguida pesquise por Azure Active Directory e selecione, agora selecione a opção Registros de aplicativo e clique em Novo registro.

Nesse momento irá abrir uma tela para cadastrar algumas informações sobre seu aplicativo, são elas: nome, quem pode usar este aplicativo e URI de redirecionamento que é opcional e finalizamos clicando em Registrar.

A imagem abaixo demonstra como ficará esta primeira etapa.

Assim que o registro do aplicativo for concluído o portal do azure irá redirecionar a página para a visão geral do aplicativo criado, uma página semelhante a imagem abaixo:

Nessa tela o importante a destacar é o ID do aplicativo (cliente), esse código é utilizado como parte da validação de token de segurança entre o sistema web e o Active Directory.

Para começar o projeto ReactJS vamos utilizar o npx create-react-app my-app para criar o projeto base da aplicação e logo em seguida criaremos uma pasta pages e dentro dela teremos duas pastas para ter rotas diferentes do projeto depois, são elas:

src/pages/SignIn/index.js

import React, { useCallback } from 'react';

import { useAuth } from '../../hooks/auth';

import logo from '../../assets/logo.svg';
import '../../assets/styles.css';

const SignIn = () => {
  const { signIn } = useAuth();

  const handleSignIn = useCallback(() => {
    const accessToken = localStorage.getItem('@AzureAd:accessToken');

    if (!accessToken) {
      signIn();
    }
  }, [signIn]);

  return (
    <div className="App">
      <img src={logo} alt="ReactJS, Azure AD" className="App-logo" />

      <button type="button" onClick={handleSignIn}>Entrar</button>
    </div>
  );
};

export default SignIn;

src/pages/Dashboard/index.js

import React from 'react';

import { useAuth } from '../../hooks/auth';

import logo from '../../assets/logo.svg';
import '../../assets/styles.css';

const Dashboard = () => {
  const { signOut, accountInfo } = useAuth();

  return (
    <div>
      <header className="App-header">
        <img src={logo} alt="ReactJS, Azure AD" className="App-logo" />

        <div>
          <p>Bem-vindo,
            <strong> {accountInfo.user.displayName}</strong>
          </p>
        </div>

        <button type="button" className="App-button" onClick={signOut}>sair</button>
      </header>
    </div>
  );
};

export default Dashboard;

Vale notar que nessas duas telas utilizamos o useAuth que é um hook que foi criado para ter acesso ao login e informações do usuário logado, mais tarde vamos falar sobre esse hook.

Agora criamos uma pasta routes, nela vamos configurar a opção de rotas do projeto e definir qual rota será publica ou privada. A rota privada será acessada somente quando o usuário fizer o login que é autenticado pelo Azure AD.

src/routes/Route.js

import React from 'react';
import { Route as ReactDOMRoute, Redirect } from 'react-router-dom';

import { useAuth } from '../hooks/auth';

const Route = ({
  isPrivate = false,
  component: Component,
  ...rest
}) => {
  const { accountInfo } = useAuth();

  return (
    <ReactDOMRoute
      {...rest}
      render={({ location }) => {
        return isPrivate === !!accountInfo.user.email ? (
          <Component />
        ) : (
          <Redirect
            to={{
              pathname: isPrivate ? '/' : '/dashboard',
              state: { from: location },
            }}
          />
        );
      }}
    />
  );
};

export default Route;

Na Route.js utilizamos o hook useAuth para recuperar as informações do usuário logado e verificar se essas informações são validas a partir do e-mail dele.

Se o e-mail do usuário for valido ele é redirecionado para a tela Dashboard onde aparece uma mensagem de boas vindas junto ao nome do usuário que logou e se essa validação do e-mail for invalida o usuário é redirecionado para a tela SignIn onde ele pode fazer o login para se autenticar.

src/routes/index.js

import React from 'react';
import { Switch } from 'react-router-dom';

import Route from './Route';

import SignIn from '../pages/SignIn';

import Dashboard from '../pages/Dashboard';

const Routes = () => (
  <Switch>
    <Route path="/" exact component={SignIn} />

    <Route path="/dashboard" component={Dashboard} isPrivate />
  </Switch>
);

export default Routes;

E para finalizar as configurações de rotas criamos um index.js para exportar as configurações de rotas e os componentes que ele irá exibir de acordo com a rota do projeto.

Para isso utilizamos a lib react-router-dom que é muito utilizada em projeto ReactJS para fazer configurações de rotas e na página index.js configuramos o que foi desenvolvido anteriormente e que recebe os valores de path que recebe o nome da rota, component que recebe o componente a ser renderizado e por fim o isPrivate que define qual rota é privada ou publica, que no nosso caso a rota /dashboard será privada.

Após as configurações de páginas e rotas partiremos para criação do hook useAuth que vai ter as configurações para efetuar login, logout, acesso ao token e acesso ao usuário que são autenticados no Azure AD.

Para começar vamos criar uma pasta hooks e nela teremos algumas arquivos.

No auth.js vamos fazer as configurações de comunicação e validação com o Azure AD e utilizaremos a lib @azure/msal-browser para fazer isso.

Basicamente no auth.js temos quatro métodos: signIn, signOut, getAccessToken, getUserProfile e um useEffect que faz uma primeira validação ao acessar a aplicação para saber se já existe um usuário logado.

signIn é um método assíncrono que faz uma chamada para a lib @azure/msal-browser abrir o login de usuário em modo Popup passando as informações de configurações do Azure Ad que falaremos depois e recuperando esse usuário com o método getUserProfile.

getUserProfile que é chamado pelo signIn envia as informações de request para o getAccessToken que retorna se o token é válido ou não, se esse token existir ele chama uma configuração do graphService para ter acesso as informações do usuário de acordo com o token, após isso ele salva o token no localStorage para utilizar em outro momento e ainda salva um estado utilizando o useState com as informações do usuário como displayName de mail.

getAccessToken faz a validação utilizando o getAllAccounts para recuperar o token do usuário e ele tem dois métodos para isso um é o acquireTokenSilent que valida o token sem interação do usuário e o outro é o acquireTokenPopup que valida o token a partir do momento que o usuário faz o login no Popup que foi aberto pelo sistema.

signOut esse método simples executa a remoção do token que foi salvo no localStorage e o logout da lib @azure/msal-browser para fazer o logout daquele usuário logado.

E por fim utilizamos o para exportar os métodos signIn, signOut, accountInfo que serão utilizados no projeto, esse último sendo um estado com as informações do usuário.

src/hooks/auth.js

import {
  createContext,
  useCallback,
  useContext,
  useEffect,
  useState,
} from 'react';
import { PublicClientApplication } from '@azure/msal-browser';

import {
  msalConfig,
  loginRequest,
} from '../utils/configAzureAd';
import { getUserDetails } from '../utils/graphService';

const AuthContext = createContext({});

const msalInstance = new PublicClientApplication(msalConfig);

const AuthProvider = ({ children }) => {
  const [accountInfo, setAccountInfo] = useState({
    isAuthenticated: false,
    user: {},
    error: null,
  });

  const signIn = async () => {
    try {
      await msalInstance.loginPopup(
        {
          scopes: loginRequest.scopes,
          prompt: "select_account"
        });

      await getUserProfile();
    }
    catch (err) {
      setAccountInfo({
        isAuthenticated: false,
        user: {},
        error: err,
      });
    }
  }

  const signOut = () => {
    localStorage.removeItem('@AzureAd:accessToken');
    msalInstance.logout();
  }

  const getAccessToken = async (scopes) => {
    try {
      const accounts = msalInstance.getAllAccounts();

      if (accounts.length <= 0) throw new Error('Login required');
      const silentResult = await msalInstance.acquireTokenSilent({
        scopes: scopes,
        account: accounts[0]
      });

      return silentResult.accessToken;
    } catch (err) {
      if (err) {
        const interactiveResult = await msalInstance.acquireTokenPopup({
          scopes: scopes,
        });

        return interactiveResult.accessToken;
      } else {
        throw err;
      }
    }
  }

  const getUserProfile = useCallback(async () => {
    try {
      const accessToken = await getAccessToken(loginRequest.scopes);

      if (accessToken) {
        const user = await getUserDetails(accessToken);

        localStorage.setItem('@AzureAd:accessToken', accessToken);

        setAccountInfo({
          isAuthenticated: true,
          user: {
            displayName: user.displayName,
            email: user.mail || user.userPrincipalName,
          },
          error: null
        });
      }
    }
    catch (err) {
      setAccountInfo({
        isAuthenticated: false,
        user: {},
        error: err,
      });
    }
  }, []);

  useEffect(() => {
    const accounts = msalInstance.getAllAccounts();

    if (accounts && accounts.length > 0) {
      getUserProfile();
    }
  }, [getUserProfile]);

  return (
    <AuthContext.Provider value={{ signIn, signOut, accountInfo }}>
      {children}
    </AuthContext.Provider>
  );
}

const useAuth = () => {
  const context = useContext(AuthContext);

  if (!context) {
    throw new Error('useAuth must be used within an AuthProvider');
  }

  return context;
}

export { AuthProvider, useAuth };

Um ponto importante do auth.js é que ele é criado como contextAPI para ser possível repassar suas informações.

src/hooks/index.js

import React from 'react';

import { AuthProvider } from './auth';

const AppProvider = ({ children }) => (
  <AuthProvider>
    {children}
  </AuthProvider>
);

export default AppProvider;

O index.js é importante para exportar os métodos signIn, signOut, accountInfo que foram desenvolvidos no auth.js, com esses dois arquivos auth.js e index.js criamos um conceito no ReactJS que é chamado de contextAPI onde é possível criar funções específicas e que serão utilizadas em mais de um lugar do projeto.

No auth.js usamos alguns dados que são acessos do Azure AD e uma configuração para recuperar informações do usuário que são disponibilizadas pela lib @microsoft/microsoft-graph-client após o usuário realizar o login na aplicação.

E para isso vamos criar uma pasta utils para fazer essas configurações.

No configAzureAd.js temos as informações do clientId e redirectUri que são disponibilizadas ao fazer o registro de um aplicativo no Azure AD e também temos a configuração do loginRequest onde falamos em qual escopo o projeto terá acesso, que nesse caso é apenas para leitura das informações desse usuário.

src/utils/configAzureAd.js

export const msalConfig = {
  auth: {
    clientId: process.env.REACT_APP_CLIENT_ID,
    redirectUri: process.env.REACT_APP_REDIRECT_URI,
  },
  cache: {
    cacheLocation: 'localStorage',
    storeAuthStateInCookie: false,
  },
}

export const loginRequest = {
  scopes: ['user.read'],
}

Para segurança dos dados sensíveis utilizados no configAzureAd.js foi criado um arquivo .env na raíz do projeto, essas informações estão disponíveis ao cadastrar um resgistro de aplicativo no Azure AD.

.env

# Config Azure AD
REACT_APP_CLIENT_ID=ID_do_aplicativo
REACT_APP_REDIRECT_URI=URIs_de_Redirecionamento

No graphService.js só fazemos uma validação com o token recuperado após o login do usuário para recuperar da API graph as informações do usuário como nome e e-mail.

src/utils/graphService.js

const graph = require('@microsoft/microsoft-graph-client');

function getAuthenticatedClient(accessToken) {
  const client = graph.Client.init({
    authProvider: (done) => {
      done(null, accessToken);
    }
  });

  return client;
}

export async function getUserDetails(accessToken) {
  const client = getAuthenticatedClient(accessToken);

  const user = await client
    .api('/me')
    .select('displayName,mail,userPrincipalName')
    .get();

  return user;
}

E para finalizar no App.js importamos do Routes as configurações de rotas que a aplicação terá acesso e também o AppProvider que vai disponibilizar os métodos de signIn, signOut, accountInfo que serão utilizados em outros componentes utilizando o contextAPI para passar as informações.

src/App.js

import React from 'react';
import { BrowserRouter as Router } from 'react-router-dom';

import AppProvider from './hooks';

import Routes from './routes';

const App = () => (
  <Router>
    <AppProvider>
      <Routes />
    </AppProvider>
  </Router>
);

export default App;

E assim finalizamos o projeto com autenticação via Azure AD, trazendo uma visão de como funciona o Azure AD e suas configurações e o seu funcionamento com o ReactJS. Espero ter ajudado!

Vale lembrar que com o próprio Azure AD você consegue criar outras configurações de permissões para quem vai acessar a aplicação, criação de grupos de usuários, e até mesmo fazer configurações para validar o token do login em uma API Rest criada pelo back end por exemplo.

Referência:
https://docs.microsoft.com/pt-br/graph/tutorials/react

O projeto completo pode ser baixado no github:
https://github.com/felipedesenna/react-authentication-azuread

Variável de ambiente - (ReactJS, Docker, AKS)

Felipe de Senna — Thu, 28 Jan 2021 22:48:23 +0000

A maioria dos projetos hoje em dia são desenvolvidos para diversos ambientes de trabalho (homolog, staging, production). E junto com esses ambientes temos a preocupação com a infraestrutura que o projeto vai utilizar, além do Framework utilizado no front-end para usabilidade e visualização de conteúdo.

Seguindo nesse raciocínio vamos falar sobre como utilizar variável de ambiente em um projeto que utiliza ReactJS, Docker e AKS, fazendo uma configuração simples para conseguir consumir a URL de uma API diferente de acordo com o ambiente em que o usuário está.

Após criar o projeto base com o npx create-react-app my-app vamos criar uma pasta onde ficará as configurações de variáveis para cada ambiente.

environments/base.js

export default {
  api: 'http://localhost:5000/api'
}

O base.js é um arquivo inicial com o proposito de ser utilizado se nenhum outro arquivo ambiente for detectado pelas configurações.

environments/Homolog.js

export default {
  api: 'http://suaapi.hlg.seudominio.com.br/api',
};

environments/Staging.js

export default {
  api: 'http://suaapi.stg.seudominio.com.br/api',
};

environments/Production.js

export default {
  api: 'http://suaapi.prd.seudominio.com.br/api',
};

Agora para finalizar as configurações das variáveis de ambiente vamos criar um último arquivo.

environments/index.js

import base from './base';

if (window.ENV) {
  localStorage.setItem('@environment', window.ENV);

  delete window.ENV;
}

const envClient = localStorage.getItem('@environment');
const environments = envClient || 'base';

const env = require('./' + environments).default;

export default {
  ...base,
  ...env,
}

Nessa configuração verificamos se existe algum valor em window.ENV se existir valor salvamos ele no localStorage e deletamos o window.ENV, depois recuperamos esse valor salvo no localStorage para utiliza-lo e caso esse valor não exista utilizamos 'base'.
Ao final da configuração criamos uma nova importação utilizando require onde ela importa o arquivo correto utilizando a variável environments que pode conter o valor do localStorage ou 'base' e na conclusão exportamos as variáveis base e env onde teremos as informações necessárias para utilizar mais tarde.

Seguindo na configuração de variáveis de ambiente eu fiz uma alteração no App.js, essa alteração é simplesmente para exibir a variável env.api que vai ser consumida das configurações que fizemos anteriormente na pasta environments.

App.js

import React from 'react';

import logo from './logo.svg';
import env from './environments';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>{env.api}</p>
      </header>
    </div>
  );
}

export default App;

E para finalizar a configuração inicial e antes de partirmos para a criação da imagem do Docker e as configurações .YAML do Kubernetes, faremos algumas modificações na pasta public.

Primeiro vamos criar um novo arquivo .js dentro dela.

config.js

window.ENV = "Homolog"

Dentro desse arquivo temos uma configuração do window.ENV que utilizamos para leitura dentro do environments/index.js e que futuramente vai ser alterada via Kubernetes.

Logo após a criação desse arquivo vamos adicionar mais um script dentro do arquivo index.html que fica na pasta public.

index.html

<script type="text/javascript" src="%PUBLIC_URL%/config.js"></script>

Essa alteração é para o projeto conseguir consumir o arquivo config.js após o build do projeto.

Configuração de build e Kubernetes

Antes de criar a imagem do projeto no Docker vamos primeiro executar o build do próprio ReactJS, o que vai facilitar a criação da imagem no Docker.

npm run build / yarn build

Para criação da imagem do Docker o arquivo Dockerfile ficará da seguinte maneira:

Dockerfile

# Stage 1
FROM nginx:1.17

# Stage 2
COPY build/ /usr/share/nginx/html

Além de já utilizar o build que foi feito pelo ReactJS anteriormente, utilizamos o nginx para rodar o html do projeto. Vale lembrar que o arquivo .dockerignore não deve conter a pasta build, porque se não ocorrerá um erro quando a imagem for criada.

Seguiremos para criação da imagem do Docker executando os comando na sequencia:

1 - Criando a imagem do projeto
docker build -t react-docker-aks .

2 - Criação do registro no Docker local
docker run -d -p 5000:5000 --restart=always --name registry registry:2

3 - Criação de tag para referencia da imagem
docker tag react-docker-aks localhost:5000/react-docker-aks

4 - Fazendo o push da imagem para o Docker local
docker push localhost:5000/react-docker-aks

Obs.: é importante lembrar que para executar os comandos acima é necessário ter o Docker Desktop instalado na máquina.

E para finalizar criaremos os arquivos .YAML que são utilizados pelo Kubernetes para configuração dos clusters.

deployment.yaml

apiVersion: v1
kind: ConfigMap
metadata:
  name: react-docker-aks
  labels:
    app: react-docker-aks
data:
  config.js: "window.ENV = \"Homolog\";"
---
kind: Deployment
apiVersion: apps/v1
metadata:
  name: react-docker-aks
spec:
  replicas: 1
  selector:
    matchLabels:
      app: react-docker-aks
  template:
    metadata:
      labels:
        app: react-docker-aks
    spec:
      containers:
        - name: react-docker-aks
          image: localhost:5000/react-docker-aks
          imagePullPolicy: Always
          ports:
            - containerPort: 80
          volumeMounts:
            - name: config-js
              mountPath: /usr/share/nginx/html/config.js
              subPath: config.js
      volumes:
        - name: config-js
          configMap:
            name: react-docker-aks
      restartPolicy: Always
---
kind: Service
apiVersion: v1
metadata:
  name: react-docker-aks
spec:
  type: NodePort
  ports:
    - port: 80
      targetPort: 80
      protocol: TCP
      nodePort: 31000
  selector:
    app: react-docker-aks

Na criação dos arquivos .YAML utilizamos uma estrutura padrão de configuração adicionando apenas alguns métodos que serviram para leitura e configuração do arquivo config.js que está na pasta public do projeto. São eles:

No ConfigMap adicionei

data:
  config.js: "window.ENV = \"Homolog\";"

No Deployment dentro de spec containers

volumeMounts:
  - name: config-js
    mountPath: /usr/share/nginx/html/config.js
    subPath: config.js

E a criação do volumes dentro do spec

volumes:
  - name: config-js
    configMap:
      name: react-docker-aks

Foi uma escolha minha criar todas as configurações dentro do arquivo deployment.yaml mas da certo criando os arquivos separados em configmap.yaml, deployment.yaml e service.yaml, e depois criando o kustomization.yaml para juntar todos eles.

Para simular outros ambientes eu criei mais dois arquivos deployment.yaml o deployment-staging.yaml e deployment-production.yaml que tem o mesmo conteúdo do primeiro só modificando namespace, o valor do window.ENV e criando uma outra porta pro service.

deployment-staging.yaml

apiVersion: v1
kind: ConfigMap
metadata:
  name: react-docker-aks-stg
  labels:
    app: react-docker-aks-stg
data:
  config.js: "window.ENV = \"Staging\";"
--------
kind: Deployment
apiVersion: apps/v1
metadata:
  name: react-docker-aks-stg
spec:
  replicas: 1
  selector:
    matchLabels:
      app: react-docker-aks-stg
  template:
    metadata:
      labels:
        app: react-docker-aks-stg
    spec:
      containers:
        - name: react-docker-aks-stg
          image: localhost:5000/react-docker-aks
          imagePullPolicy: Always
          ports:
            - containerPort: 80
          volumeMounts:
            - name: config-js
              mountPath: /usr/share/nginx/html/config.js
              subPath: config.js
      volumes:
        - name: config-js
          configMap:
            name: react-docker-aks-stg
      restartPolicy: Always
--------
kind: Service
apiVersion: v1
metadata:
  name: react-docker-aks-stg
spec:
  type: NodePort
  ports:
    - port: 80
      targetPort: 80
      protocol: TCP
      nodePort: 31001
  selector:
    app: react-docker-aks-stg

deployment-production.yaml

apiVersion: v1
kind: ConfigMap
metadata:
  name: react-docker-aks-prd
  labels:
    app: react-docker-aks-prd
data:
  config.js: "window.ENV = \"Production\";"
--------
kind: Deployment
apiVersion: apps/v1
metadata:
  name: react-docker-aks-prd
spec:
  replicas: 1
  selector:
    matchLabels:
      app: react-docker-aks-prd
  template:
    metadata:
      labels:
        app: react-docker-aks-prd
    spec:
      containers:
        - name: react-docker-aks-prd
          image: localhost:5000/react-docker-aks
          imagePullPolicy: Always
          ports:
            - containerPort: 80
          volumeMounts:
            - name: config-js
              mountPath: /usr/share/nginx/html/config.js
              subPath: config.js
      volumes:
        - name: config-js
          configMap:
            name: react-docker-aks-prd
      restartPolicy: Always
--------
kind: Service
apiVersion: v1
metadata:
  name: react-docker-aks-prd
spec:
  type: NodePort
  ports:
    - port: 80
      targetPort: 80
      protocol: TCP
      nodePort: 31002
  selector:
    app: react-docker-aks-prd

Para executar o Kubernetes no Docker Desktop é necessário ativar-lo e também é preciso ter o Minikube instalado para executar os comandos que virão na sequencia.

Ativando o Kubernetes

Executando os comandos

1 - Criando o contexto padrão para o cluster do Kubernetes
kubectl config use-context docker-desktop

2 - Criando o serviço Kubernetes
kubectl apply -f deployment.yaml

3 - Serviço do ambiente staging
kubectl apply -f deployment-staging.yaml

4 - Serviço do ambiente production
kubectl apply -f deployment-production.yaml

Os ambientes ficaram disponivéis nas URLs:
HLG
http://localhost:31000/

STG
http://localhost:31001/

PRD
http://localhost:31002/

E assim se concluí o projeto e todas as configurações realizadas para conseguir ler uma variável de ambiente após o build do ReactJS via Kubernetes.
O projeto todo pode ser acessado e baixado no meu github: https://github.com/felipedesenna/react-docker-aks