Kurz: Přidání přihlašovacího tlačítka Microsoftu do React SPA - Azure

Článek
12/03/2021
7 min ke čtení

V tomto kurzu k TypeScriptu přidejte ověřování Microsoftu, které vám umožní zadat tlačítko pro přihlášení nebo odhlášení. Vyvíjet aplikaci pomocí sady SDK na straně klienta Azure @azure/msal-browser pro zajištění funkcí ověřování.

Ukázka kódu

Architektura a funkce aplikací

Spa postavená v tomto kurzu je React aplikace (create-react-app) s následujícími úkoly:

Přihlaste se pomocí přihlášení podporovaného Microsoftem, jako je Office 365 nebo Outlook.com.
Odhlásit se z aplikace

K zajištění rychlé a jednoduché jedno stránkovací aplikace používá ukázka create-react-app s TypeScriptem. Tato front-endová rozhraní poskytuje několik zástupců při typickém vývoji klientů pomocí azure SDK:

Sdružování vyžadované pro azure SDK používané v klientské aplikaci
Proměnné prostředí v .env souboru

1. Nastavení vývojového prostředí

Ověřte, že je na místním počítači nainstalovaný následující software.

Uživatelský účet Azure s aktivním předplatným. Vytvořte si ho zdarma.
Node.js a npm – nainstalované na místním počítači.
Visual Studio Code nebo ekvivalentní integrované vývojové prostředí s prostředím Bash nebo terminálem – nainstalované na místním počítači.

2. Zachovat hodnotu proměnné prostředí

Místo pro zkopírování hodnoty ID klienta registrace aplikace, jako je například textový soubor. Toto ID klienta získáte v kroku 5 další části. Hodnota se použije jako proměnná prostředí pro webovou aplikaci.

3. Vytvoření registrace aplikace pro ověřování

Přihlaste se Azure Portal výchozího adresáře pro Registrace aplikací.
Vyberte + Nová registrace.

Pomocí následující tabulky zadejte registrační data aplikace:

Pole	Hodnota	Popis
Název	`Simple Auth Tutorial`	Toto je název aplikace, který uživatel uvidí ve formuláři oprávnění, když se přihlásí k vaší aplikaci.
Podporované typy účtu	Účty v libovolném organizačním adresáři (libovolný adresář Azure AD – vícetenant) a osobní účty Microsoft	Bude se vztahovat na většinu typů účtů.
Typ identifikátoru URI přesměrování	Jednostránková aplikace (SPA)
Hodnota identifikátoru URI přesměrování	`http://localhost:3000`	Adresa URL, ke které se vrátíte po úspěšném nebo neúspěšném ověření.

Vyberte Zaregistrovat. Počkejte na dokončení procesu registrace aplikace.
Zkopírujte ID aplikace (klienta) z části Přehled registrace aplikace. Tuto hodnotu později přidáte do proměnné prostředí pro klientskou aplikaci.

4. Vytvoření React pro TypeScript

V prostředí Bash vytvořte aplikaci create-react-app, která jako jazyk používá TypeScript:
```
npx create-react-app tutorial-demo-login-button --template typescript
```
Změňte adresář na nový a nainstalujte @azure/msal-browser ověřovací balíček:
```
cd tutorial-demo-login-button && npm install @azure/msal-browser
```
Vytvořte soubor na kořenové úrovni a .env přidejte následující řádek:
```
REACT_APP_AZURE_ACTIVE_DIRECTORY_APP_CLIENT_ID=
```
Soubor .env se čte jako součást architektury create-react-app. Do tohoto souboru můžete uložit ID klienta pro místní vývoj.
Zkopírujte ID aplikace (klienta) do hodnoty .

Ve složce vytvořte podsložku s názvem pro soubory azure specifické pro ./src Azure.

Ve složce vytvořte nový soubor pro konfiguraci ověřování s názvem a azureazure-authentication-config.ts zkopírujte do následujícího kódu:

import { Configuration, LogLevel } from "@azure/msal-browser";

const AzureActiveDirectoryAppClientId: any =
  process.env.REACT_APP_AZURE_ACTIVE_DIRECTORY_APP_CLIENT_ID;

export const MSAL_CONFIG: Configuration = {
  auth: {
    clientId: AzureActiveDirectoryAppClientId,
  },
  cache: {
    cacheLocation: "sessionStorage",
    storeAuthStateInCookie: false,
  },
  system: {
    loggerOptions: {
      loggerCallback: (level, message, containsPii) => {
        if (containsPii) {
          return;
        }
        switch (level) {
          case LogLevel.Error:
            console.error(message);
            return;
          case LogLevel.Info:
            console.info(message);
            return;
          case LogLevel.Verbose:
            console.debug(message);
            return;
          case LogLevel.Warning:
            console.warn(message);
            return;
        }
      },
    },
  },
};

Tento soubor přečte ID vaší aplikace ze souboru , nastaví relaci jako úložiště prohlížeče místo souborů cookie a poskytuje protokolování, které je zvážení .env osobních údajů.

Ve složce vytvořte nový soubor pro middleware ověřování Azure s názvem a azureazure-authentication-context.ts zkopírujte ho do následujícího kódu:

import {
  PublicClientApplication,
  AuthenticationResult,
  AccountInfo,
  EndSessionRequest,
  RedirectRequest,
  PopupRequest,
} from "@azure/msal-browser";

import { MSAL_CONFIG } from "./azure-authentication-config";

export class AzureAuthenticationContext {
  private myMSALObj: PublicClientApplication = new PublicClientApplication(
    MSAL_CONFIG
  );
  private account?: AccountInfo;
  private loginRedirectRequest?: RedirectRequest;
  private loginRequest?: PopupRequest;

  public isAuthenticationConfigured = false;

  constructor() {
    // @ts-ignore
    this.account = null;
    this.setRequestObjects();
    if (MSAL_CONFIG?.auth?.clientId) {
      this.isAuthenticationConfigured = true;
    }
  }

  private setRequestObjects(): void {
    this.loginRequest = {
      scopes: [],
      prompt: "select_account",
    };

    this.loginRedirectRequest = {
      ...this.loginRequest,
      redirectStartPage: window.location.href,
    };
  }

  login(signInType: string, setUser: any): void {
    if (signInType === "loginPopup") {
      this.myMSALObj
        .loginPopup(this.loginRequest)
        .then((resp: AuthenticationResult) => {
          this.handleResponse(resp, setUser);
        })
        .catch((err) => {
          console.error(err);
        });
    } else if (signInType === "loginRedirect") {
      this.myMSALObj.loginRedirect(this.loginRedirectRequest);
    }
  }

  logout(account: AccountInfo): void {
    const logOutRequest: EndSessionRequest = {
      account,
    };

    this.myMSALObj.logout(logOutRequest);
  }
  handleResponse(response: AuthenticationResult, incomingFunction: any) {
    if(response !==null && response.account !==null) {
      this.account = response.account;
    } else {
      this.account = this.getAccount();
    }

    if (this.account) {
      incomingFunction(this.account);
    }
  }
  private getAccount(): AccountInfo | undefined {
    console.log(`loadAuthModule`);
    const currentAccounts = this.myMSALObj.getAllAccounts();
    if (currentAccounts === null) {
      // @ts-ignore
      console.log("No accounts detected");
      return undefined;
    }

    if (currentAccounts.length > 1) {
      // TBD: Add choose account code here
      // @ts-ignore
      console.log(
        "Multiple accounts detected, need to add choose account code."
      );
      return currentAccounts[0];
    } else if (currentAccounts.length === 1) {
      return currentAccounts[0];
    }
  }
}

export default AzureAuthenticationContext;

Tento soubor poskytuje ověřování pro uživatele v Azure pomocí funkcí loginlogout a .

Vytvořte nový soubor pro soubor komponenty tlačítka uživatelského rozhraní ve složce s názvem a azureazure-authentication-component.tsx zkopírujte ho do následujícího kódu:

import React, { useState } from "react";
import AzureAuthenticationContext from "./azure-authentication-context";
import { AccountInfo } from "@azure/msal-browser";

const ua = window.navigator.userAgent;
const msie = ua.indexOf("MSIE ");
const msie11 = ua.indexOf("Trident/");
const isIE = msie > 0 || msie11 > 0;

// Log In, Log Out button
const AzureAuthenticationButton = ({ onAuthenticated }: any): JSX.Element => {
  // Azure client context
  const authenticationModule: AzureAuthenticationContext = new AzureAuthenticationContext();

  const [authenticated, setAuthenticated] = useState<Boolean>(false);
  const [user, setUser] = useState<AccountInfo>();

  const logIn = (method: string): any => {
    const typeName = "loginPopup";
    const logInType = isIE ? "loginRedirect" : typeName;

    // Azure Login
    authenticationModule.login(logInType, returnedAccountInfo);
  };
  const logOut = (): any => {
    if (user) {
      onAuthenticated(undefined);
      // Azure Logout
      authenticationModule.logout(user);
    }
  };

  const returnedAccountInfo = (user: AccountInfo) => {
    // set state
    setAuthenticated(user?.name ? true : false);
    onAuthenticated(user);
    setUser(user);
  };

  const showLogInButton = (): any => {
    return (
      <button id="authenticationButton" onClick={() => logIn("loginPopup")}>
        Log in
      </button>
    );
  };

  const showLogOutButton = (): any => {
    return (
      <div id="authenticationButtonDiv">
        <div id="authentication">
          <button id="authenticationButton" onClick={() => logOut()}>
            Log out
          </button>
        </div>
      </div>
    );
  };

  const showButton = (): any => {
    return authenticated ? showLogOutButton() : showLogInButton();
  };

  return (
    <div id="authentication">
      {authenticationModule.isAuthenticationConfigured ? (
        showButton()
      ) : (
        <div>Authentication Client ID is not configured.</div>
      )}
    </div>
  );
};

export default AzureAuthenticationButton;

Toto tlačítko zahlásí uživatele a předá uživatelský účet volající nebo nadřazené komponentě.

Text a funkce tlačítka se přepíná v závislosti na tom, jestli je uživatel aktuálně přihlášený, zachycen pomocí funkce jako vlastnosti předané onAuthenticated komponentě.

Když se uživatel přihlásí, tlačítko zavolá metodu knihovny ověřování Azure s authenticationModule.loginreturnedAccountInfo jako funkcí zpětného volání. Vrácený uživatelský účet se pak předá zpět nadřazené komponentě pomocí onAuthenticated funkce .

Otevřete soubor a nahraďte veškerý kód následujícím kódem, který začlení komponentu tlačítka ./src/App.tsx Login/Logout (Přihlášení/odhlášení):

import React, { useState } from "react";
import AzureAuthenticationButton from "./azure/azure-authentication-component";
import { AccountInfo } from "@azure/msal-browser";

function App() {
  // current authenticated user
  const [currentUser, setCurrentUser] = useState<AccountInfo>();

  // authentication callback
  const onAuthenticated = async (userAccountInfo: AccountInfo) => {
    setCurrentUser(userAccountInfo);
  };

  // Render JSON data in readable format
  const PrettyPrintJson = ({ data }: any) => {
    return (
      <div>
        <pre>{JSON.stringify(data, null, 2)}</pre>
      </div>
    );
  };

  // Quick link - user revokes app's permission
  const ShowPermissionRevokeLinks = () => {
    return (
      <div>
        <div><a href="https://myapps.microsoft.com" target="_blank" rel="noopener">Revoke AAD permission</a></div>
        <div><a href="https://account.live.com/consent/manage" target="_blank" rel="noopener">Revoke Consumer permission</a></div>
      </div>
    );
  };

  return (
    <div id="App">
      <h2>Microsoft Login Button application</h2>
      <AzureAuthenticationButton onAuthenticated={onAuthenticated} />
      {currentUser && (
        <div>
          <PrettyPrintJson data={currentUser} />
          <ShowPermissionRevokeLinks />
        </div>
      )}
    </div>
  );
}

export default App;

Jakmile se uživatel přihlásí a ověření se přesměruje zpět do této aplikace, zobrazí se objekt currentUser.

V Visual Studio Code terminálu spusťte aplikaci:

npm run start

Sledujte integrovanou aplikaci VSCode a všimněte si, že je aplikace zcela spuštěná.

Compiled successfully!

You can now view js-e2e-client-azure-login-button in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://x.x.x.x:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

Otevřete webovou aplikaci v prohlížeči http://localhost:3000 .
Ve webovém prohlížeči vyberte tlačítko Přihlásit se.
Vyberte uživatelský účet. Nemusí to být stejný účet, který jste použili pro přístup k Azure Portal, ale měl by to být účet, který poskytuje ověřování Microsoftem.
Zkontrolujte automaticky otevírané okno zobrazující 1) uživatelské jméno, 2) název aplikace, 3) oprávnění, se kterým souhlasíte, a pak vyberte Ano.
Zkontrolujte informace o uživatelském účtu.
V aplikaci vyberte tlačítko Odhlásit se. Aplikace také nabízí pohodlné odkazy na uživatelské aplikace Microsoftu, které vám posou í odvolání oprávnění.

7. Uložení informací o uživateli specifických pro aplikaci

Volitelně můžete ID uživatele uložit do vlastní aplikační databáze, abyste mohli korelovat identitu zprostředkovatele Microsoftu s daty uživatele požadovanými ve vaší vlastní aplikaci. Deklarace identity tokenu obsahuje dvě ID, o které byste měli sledovat:

sub: ID specifické pro uživatele pro vaše konkrétní ID aplikace Active Directory. Toto je ID, které byste měli uložit do vlastní databáze aplikace, pokud potřebujete korelovat data vlastní aplikace s uživatelem zprostředkovatele identity Microsoftu.
oid: Toto je univerzální ID uživatele ve všech aplikacích zprostředkovatele Microsoft Identity. Tuto hodnotu uložte, pokud potřebujete sledovat uživatele napříč několika aplikacemi ve zprostředkovateli identity.

8. Vyčištění prostředků

Až budete hotovi s tímto kurzem, odstraňte aplikaci ze seznamu registrace Azure Portal App registration list.

Pokud chcete zachovat aplikaci, ale odvolat oprávnění, která aplikaci přidá konkrétní uživatelský účet, použijte jeden z následujících odkazů:

Další kroky

Jednotné přihlašování s využitím MSAL.js
MSAL.js
MSAL.js ukázky
Všechny ukázky MSAL
Pokračujte v používání knihovny MSAL k získání profilu uživatele a zajištění tichého přihlášení.
Přidání služby Microsoft Graph pro přístup k uživatelským účtům v Microsoft 365 zahrnutí e-mailových a kalendářových schůzek
Statické webové aplikace Azure
Webové aplikace Azure

Přidání tlačítka pro přihlášení k ověřování Od Microsoftu do jedno stránkové aplikace

Ohodnoťte vaše zkušenosti