Konfigurace ověřování v ukázkové jednostrákové aplikaci pomocí Azure AD B2C

  • Článek

Tento článek používá ukázkovou jednostránkovou aplikaci JavaScriptu (SPA) k ilustraci přidání ověřování Azure Active Directory B2C (Azure AD B2C) do vašich služeb SPA.

Přehled

OpenID Připojení (OIDC) je ověřovací protokol založený na OAuth 2.0. Můžete ho použít k bezpečnému přihlášení uživatele k aplikaci. Tato ukázka SPA používá MSAL.js a tok PKCE OIDC. MSAL.js je knihovna poskytovaná microsoftem, která zjednodušuje přidávání podpory ověřování a autorizace do spA.

Tok přihlášení

Tok přihlášení zahrnuje následující kroky:

  1. Uživatelé přejdou do webové aplikace a vyberou Přihlášení.
  2. Aplikace zahájí žádost o ověření a přesměruje uživatele do Azure AD B2C.
  3. Uživatelé se zaregistrují nebo přihlásí a resetují heslo. Případně se můžou přihlásit pomocí účtu sociální sítě.
  4. Po přihlášení uživatelů azure AD B2C vrátí autorizační kód do aplikace.
  5. Jednostránová aplikace ověří token ID, přečte deklarace identity a umožní uživatelům volat chráněné prostředky a rozhraní API.

Přehled registrace aplikací

Pokud chcete aplikaci povolit přihlášení pomocí Azure AD B2C a volat webové rozhraní API, zaregistrujete dvě aplikace v adresáři Azure AD B2C.

  • Registrace webové aplikace umožňuje vaší aplikaci přihlásit se pomocí Azure AD B2C. Během registrace zadáte identifikátor URI přesměrování. Identifikátor URI přesměrování je koncový bod, na který jsou uživatelé přesměrováni službou Azure AD B2C po dokončení ověřování pomocí Azure AD B2C. Proces registrace aplikace vygeneruje ID aplikace, označované také jako ID klienta, které jednoznačně identifikuje vaši aplikaci.

  • Registrace webového rozhraní API umožňuje vaší aplikaci volat zabezpečené webové rozhraní API. Registrace zahrnuje rozsahy webového rozhraní API. Obory poskytují způsob, jak spravovat oprávnění k chráněným prostředkům, jako je například webové rozhraní API. Oprávnění webové aplikace udělíte rozsahům webového rozhraní API. Při vyžádání přístupového tokenu aplikace určuje požadovaná oprávnění v parametru oboru požadavku.

Architektura a registrace aplikací jsou znázorněny v následujícím diagramu:

Diagram of a web app with web API call registrations and tokens.

Volání webového rozhraní API

Po dokončení ověřování uživatelé komunikují s aplikací, která vyvolá chráněné webové rozhraní API. Webové rozhraní API používá ověřování nosné tokeny . Nosný token je přístupový token, který aplikace získala z Azure AD B2C. Aplikace předá token v autorizační hlavičce požadavku HTTPS.

Authorization: Bearer <access token>

Pokud obor přístupového tokenu neodpovídá oborům webového rozhraní API, knihovna ověřování získá nový přístupový token se správnými obory.

Tok odhlášení

Tok odhlášení zahrnuje následující kroky:

  1. Z aplikace se uživatelé odhlásí.
  2. Aplikace vymaže objekty relace a knihovna ověřování vymaže mezipaměť tokenů.
  3. Aplikace přesáhne uživatele do koncového bodu pro odhlášení z Azure AD B2C, aby ukončila relaci Azure AD B2C.
  4. Uživatelé se přesměrují zpět do aplikace.

Předpoklady

Počítač, na kterém běží:

Krok 1: Konfigurace toku uživatele

Když se uživatelé pokusí přihlásit k aplikaci, aplikace spustí žádost o ověření do koncového bodu autorizace prostřednictvím toku uživatele. Tok uživatele definuje a řídí uživatelské prostředí. Jakmile uživatelé dokončí tok uživatele, Azure AD B2C vygeneruje token a pak přesměruje uživatele zpět do vaší aplikace.

Pokud jste to ještě neudělali, vytvořte tok uživatele nebo vlastní zásadu. Opakujte kroky pro vytvoření tří samostatných toků uživatelů následujícím způsobem:

  • Kombinovaný tok přihlášení a registrace uživatele, například susi. Tento tok uživatele podporuje také zapomenuté heslo .
  • Profil upravuje tok uživatele, například edit_profile.
  • Tok uživatele resetování hesla, například reset_password.

Předzálohuje B2C_1_ Azure AD B2C na název toku uživatele. Například z susi se stane B2C_1_susi.

Krok 2: Registrace spa a rozhraní API

V tomto kroku vytvoříte spa a registraci aplikací webového rozhraní API a zadáte rozsahy webového rozhraní API.

Krok 2.1: Registrace aplikace webového rozhraní API

Pokud chcete vytvořit registraci aplikace webového rozhraní API (ID aplikace: 2), postupujte takto:

  1. Přihlaste se k portálu Azure.

  2. Ujistěte se, že používáte adresář, který obsahuje vašeho tenanta Azure AD B2C. Na panelu nástrojů portálu vyberte ikonu Adresáře a předplatná .

  3. V nastavení portálu | Adresářů a stránka předplatných , vyhledejte adresář Azure AD B2C v seznamu názvů adresářů a pak vyberte Přepnout.

  4. Na webu Azure Portal vyhledejte a vyberte Azure AD B2C.

  5. Vyberte Registrace aplikací a pak vyberte Nová registrace.

  6. Jako Název zadejte název aplikace (například my-api1). U identifikátoru URI přesměrování a podporovaných typů účtů ponechte výchozí hodnoty.

  7. Vyberte Zaregistrovat.

  8. Po dokončení registrace aplikace vyberte Přehled.

  9. Poznamenejte si hodnotu ID aplikace (klienta) pro pozdější použití při konfiguraci webové aplikace.

    Screenshot that demonstrates how to get a web A P I application I D.

Krok 2.2: Konfigurace oborů

  1. Výběrem aplikace my-api1, kterou jste vytvořili (ID aplikace: 2), otevřete její stránku Přehled.

  2. V části Spravovat vyberte Zveřejnit rozhraní API.

  3. Vedle identifikátoru URI ID aplikace vyberte odkaz Nastavit. Nahraďte výchozí hodnotu (GUID) jedinečným názvem (například tasks-api) a pak vyberte Uložit.

    Když vaše webová aplikace požádá o přístupový token pro webové rozhraní API, měl by tento identifikátor URI přidat jako předponu pro každý obor, který definujete pro rozhraní API.

  4. V části Obory definované tímto rozhraním API vyberte Přidat obor.

  5. Vytvoření oboru, který definuje přístup pro čtení k rozhraní API:

    1. Jako název oboru zadejte tasks.read.
    2. Pro Správa zobrazovaný název souhlasu zadejte přístup pro čtení k rozhraní API pro úlohy.
    3. Jako popis souhlasu Správa zadejte Možnost Umožňuje přístup pro čtení k rozhraní API pro úlohy.

  6. Vyberte Přidat rozsah.

  7. Vyberte Přidat obor a pak přidejte obor, který definuje přístup k zápisu do rozhraní API:

    1. Jako název oboru zadejte tasks.write.
    2. Pro Správa zobrazovaný název souhlasu zadejte přístup k zápisu do rozhraní API pro úlohy.
    3. Jako popis souhlasu Správa zadejte Povolení přístupu k zápisu do rozhraní API pro úlohy.

  8. Vyberte Přidat rozsah.

Krok 2.3: Registrace spa

Pokud chcete vytvořit registraci spa, postupujte následovně:

  1. Přihlaste se k portálu Azure.
  2. Pokud máte přístup k více tenantům, v horní nabídce vyberte ikonu Nastavení a v nabídce Adresáře a předplatná přepněte do svého tenanta Azure AD B2C.
  3. Vyhledejte a vyberte Azure AD B2C.
  4. Vyberte Registrace aplikací a pak vyberte Nová registrace.
  5. Zadejte název aplikace (například Moje aplikace).
  6. V sekci Podporované typy účtů vyberte Účty u libovolného zprostředkovatele identity nebo organizačního adresáře (pro ověřování uživatelů pomocí toků uživatelů).
  7. V části Identifikátor URI pro přesměrování vyberte jednostránkové aplikace (SPA) a do pole adresa URL zadejte http://localhost:6420.
  8. V části Oprávnění zaškrtněte políčko Udělit souhlas správce s otevřenými a offline přístupy.
  9. Vyberte Zaregistrovat.

Poznamenejte si ID aplikace (klienta), které se použije později při konfiguraci webové aplikace.

Screenshot of the web app Overview page for recording your web application ID.

Krok 2.4: Povolení toku implicitního udělení

Pokud vaše aplikace SPA používá MSAL.js 1.3 nebo starší a implicitní tok udělení nebo nakonfigurujete https://jwt.ms/ aplikaci pro testování toku uživatele nebo vlastních zásad, musíte v registraci aplikace povolit implicitní tok udělení:

  1. V nabídce vlevo v části Spravovat vyberte Ověřování.

  2. V části Implicitní udělení a hybridní toky zaškrtněte políčka Přístupové tokeny (používané pro implicitní toky) i tokeny ID (používané pro implicitní a hybridní toky).

  3. Zvolte Uložit.

Pokud vaše aplikace používá MSAL.js 2.0 nebo novější, nepovolujte implicitní udělení toku, protože MSAL.js 2.0+ podporuje tok autorizačního kódu s PKCE. Aplikace SPA v tomto článku používá tok PKCE, takže není nutné povolit implicitní tok udělení.

Krok 2.5: Udělení oprávnění

Pokud chcete aplikaci udělit oprávnění (ID aplikace: 1), postupujte takto:

  1. Vyberte Registrace aplikací a pak vyberte aplikaci, kterou jste vytvořili (ID aplikace: 1).

  2. V části Spravovat vyberte oprávnění rozhraní API.

  3. V části Nakonfigurovaná oprávnění vyberte Přidat oprávnění.

  4. Vyberte kartu Moje rozhraní API.

  5. Vyberte rozhraní API (ID aplikace: 2), ke kterému má mít webová aplikace udělený přístup. Zadejte například my-api1.

  6. V části Oprávnění rozbalte úkoly a vyberte obory, které jste definovali dříve (například tasks.read a tasks.write).

  7. Vyberte Přidat oprávnění.

  8. Vyberte Udělení souhlasu správce pro <název> vašeho tenanta.

  9. Vyberte Ano.

  10. Vyberte Aktualizovat a potom ověřte, že se pro oba obory zobrazuje hodnota Uděleno pro ... .

  11. V seznamu Nakonfigurovaná oprávnění vyberte obor a zkopírujte celý název oboru.

    Screenshot of the configured permissions pane, showing that read access permissions are granted.

Krok 3: Získání ukázkového kódu SPA

Tato ukázka ukazuje, jak může jednostránka používat Azure AD B2C k registraci a přihlášení uživatelů. Aplikace pak získá přístupový token a zavolá chráněné webové rozhraní API.

Pokud chcete získat vzorový kód SPA, můžete udělat jednu z těchto věcí:

  • Stáhněte si soubor ZIP.

  • Naklonujte ukázku z GitHubu spuštěním následujícího příkazu:

    git clone https://github.com/Azure-Samples/ms-identity-b2c-javascript-spa.git

Krok 3.1: Aktualizace ukázky SPA

Teď, když jste získali ukázku SPA, aktualizujte kód hodnotami Azure AD B2C a webového rozhraní API. V ukázkové složce ve App složce otevřete soubory JavaScriptu uvedené v následující tabulce a aktualizujte je odpovídajícími hodnotami.

Soubor Key Hodnota
authConfig.js clientId ID SPA z kroku 2.3.
policies.js názvy Toky uživatelů nebo vlastní zásady, které jste vytvořili v kroku 1.
policies.js Orgány Toky uživatelů Azure AD B2C nebo vlastní zásady, například https://<your-tenant-name>.b2clogin.com/<your-tenant-name>.onmicrosoft.com/<your-sign-in-sign-up-policy>. Nahrazení your-sign-in-sign-up-policy tokem uživatele nebo vlastní zásadou, kterou jste vytvořili v kroku 1
policies.js authorityDomain Vaše doména autority Azure AD B2C, například <your-tenant-name>.b2clogin.com.
apiConfig.js b2cScopes Obory webového rozhraní API, které jste vytvořili v kroku 2.2 (například b2cScopes: ["https://<your-tenant-name>.onmicrosoft.com/tasks-api/tasks.read"]).
apiConfig.js webApi Adresa URL webového rozhraní API, http://localhost:5000/hello.

Výsledný kód by měl vypadat podobně jako v následující ukázce:

authConfig.js:

const msalConfig = {
    auth: {
      clientId: "<your-MyApp-application-ID>", // This is the ONLY mandatory field; everything else is optional.
      authority: b2cPolicies.authorities.signUpSignIn.authority, // Choose sign-up/sign-in user-flow as your default.
      knownAuthorities: [b2cPolicies.authorityDomain], // You must identify your tenant's domain as a known authority.
      redirectUri: "http://localhost:6420", // You must register this URI on Azure Portal/App Registration. Defaults to "window.location.href".
    },
    cache: {
      cacheLocation: "sessionStorage",  
      storeAuthStateInCookie: false, 
    },
    system: {
      loggerOptions: {
        loggerCallback: (level, message, containsPii) => {
          if (containsPii) {
            return;
          }
          switch (level) {
            case msal.LogLevel.Error:
              console.error(message);
              return;
            case msal.LogLevel.Info:
              console.info(message);
              return;
            case msal.LogLevel.Verbose:
              console.debug(message);
              return;
            case msal.LogLevel.Warning:
              console.warn(message);
              return;
          }
        }
      }
    }
  };
};

const loginRequest = {
  scopes: ["openid", ...apiConfig.b2cScopes],
};

const tokenRequest = {
  scopes: [...apiConfig.b2cScopes],  // e.g. ["https://fabrikamb2c.onmicrosoft.com/helloapi/demo.read"]
  forceRefresh: false // Set this to "true" to skip a cached token and go to the server to get a new token
};

policies.js:

const b2cPolicies = {
    names: {
        signUpSignIn: "b2c_1_susi",
        forgotPassword: "b2c_1_reset",
        editProfile: "b2c_1_edit_profile"
    },
    authorities: {
        signUpSignIn: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_susi",
        },
        forgotPassword: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_reset",
        },
        editProfile: {
            authority: "https://your-tenant-name.b2clogin.com/your-tenant-name.onmicrosoft.com/b2c_1_edit_profile"
        }
    },
    authorityDomain: "your-tenant-name.b2clogin.com"
}

apiConfig.js:

const apiConfig = {
  b2cScopes: ["https://your-tenant-name.onmicrosoft.com/tasks-api/tasks.read"],
  webApi: "http://localhost:5000/hello"
};

Krok 4: Získání ukázkového kódu webového rozhraní API

Teď, když je webové rozhraní API zaregistrované a definovali jste jeho obory, nakonfigurujte kód webového rozhraní API tak, aby fungoval s vaším tenantem Azure AD B2C.

Pokud chcete získat ukázkový kód webového rozhraní API, udělejte jednu z těchto věcí:

Krok 4.1: Aktualizace webového rozhraní API

  1. Otevřete soubor config.json v editoru kódu.

  2. Upravte hodnoty proměnných pomocí registrace aplikace, kterou jste vytvořili dříve. A aktualizujte policyName tok uživatele, který jste vytvořili jako součást požadavků (například b2c_1_susi).

    "credentials": {
    "tenantName": "<your-tenant-name>",
    "clientID": "<your-webapi-application-ID>"
},
"policies": {
    "policyName": "b2c_1_susi"
},
"resource": {
    "scope": ["tasks.read"] 
},

Krok 4.2: Povolení CORS

Pokud chcete jednostrápové aplikaci povolit volání webového rozhraní API Node.js, musíte povolit sdílení prostředků mezi zdroji (CORS) ve webovém rozhraní API. V produkční aplikaci buďte opatrní ohledně toho, která doména požadavek provádí. V tomto příkladu povolte požadavky z jakékoli domény.

K povolení CORS použijte následující middleware. V ukázce kódu webového rozhraní API Node.js, který jste stáhli, už byl přidán do souboru index.js .

app.use((req, res, next) => {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Authorization, Origin, X-Requested-With, Content-Type, Accept");
    next();
});

Krok 5: Spuštění spa a webového rozhraní API

Teď jste připraveni otestovat přístup k rozhraní API s vymezeným oborem jednostráňové aplikace. Na místním počítači spusťte webové rozhraní API Node.js i ukázkovou jednostrákovou aplikaci JavaScriptu. Pak se přihlaste k jednostránka aplikaci a výběrem tlačítka Rozhraní API volání zahajte požadavek na chráněné rozhraní API.

Spuštění webového rozhraní API Node.js

  1. Otevřete okno konzoly a přejděte do adresáře, který obsahuje ukázku webového rozhraní API Node.js. Příklad:

    cd active-directory-b2c-javascript-nodejs-webapi

  2. Spusťte následující příkazy:

    npm install && npm update
node index.js

    V okně konzoly se zobrazí číslo portu, kde je aplikace hostovaná.

    Listening on port 5000...

Spuštění jednostráňové aplikace

  1. Otevřete další okno konzoly a přejděte do adresáře, který obsahuje ukázku javascriptového spa. Příklad:

    cd ms-identity-b2c-javascript-spa

  2. Spusťte následující příkazy:

    npm install && npm update
npm start

    V okně konzoly se zobrazí číslo portu, kde je aplikace hostovaná.

    Listening on port 6420...

  3. Pokud chcete aplikaci zobrazit, přejděte v prohlížeči na http://localhost:6420 stránku.

    Screenshot of the SPA sample app displayed in the browser window.

  4. Dokončete proces registrace nebo přihlášení. Po úspěšném přihlášení by se měla zobrazit zpráva "Uživatel <, vaše uživatelské jméno> přihlášené".

  5. Vyberte tlačítko Rozhraní API pro volání. Spa odešle přístupový token v požadavku do chráněného webového rozhraní API, který vrátí zobrazovaný název přihlášeného uživatele:

    Screenshot of the SPA in a browser window, showing the username JSON result that's returned by the API.

Nasazení aplikace

V produkční aplikaci je identifikátor URI přesměrování registrace aplikace obvykle veřejně přístupným koncovým bodem, ve kterém je vaše aplikace spuštěná, například https://contoso.com/signin-oidc.

Identifikátory URI pro přesměrování můžete v registrovaných aplikacích kdykoli přidávat a upravovat. Pro identifikátory URI přesměrování platí následující omezení:

  • Adresa URL odpovědi musí začínat schématem https.
  • V adrese URL odpovědi se rozlišují malá a velká písmena. Jeho případ se musí shodovat s případem cesty URL spuštěné aplikace.

Další kroky

Další informace o konceptech probíraných v tomto článku: