MSAL React – nejčastější dotazy

Compatibility

Jaké prohlížeče jsou podporované?

Informace o podporovaných prohlížečích najdete tady .

Jaké verze Reactu se podporují?

Nejnovější verze @azure/msal-react (v3.x) vyžaduje React 18 nebo novější. React 19 se doporučuje pro nové projekty.

Note

Předchozí verze @azure/msal-react (v2.x) podporovala React 16.8+, 17 a 18. Pokud upgradujete z verze 2.x na verzi 3.x, ujistěte se, že vaše aplikace používá React 18 nebo novější.

Podporuje @azure/msal-react vykreslování na straně serveru (SSR) nebo generování statického webu?

Yes! Ověřování však nelze provést na straně serveru a měli byste se vyhnout vyvolání rozhraní MSAL API na straně serveru. @azure/msal-react vás zbavuje části této logiky, ale pokud implementujete vlastní autentizační logiku, ujistěte se, že jsou při vykreslování v prohlížeči volána všechna rozhraní API. Příklady najdete v ukázce Next.js a Gatsby .

Podporuje @azure/msal-react komponenty tříd?

Ano, @azure/msal-react podporuje komponenty funkcí i tříd. Háky však nelze použít v komponentách třídy, takže budete muset využívat kontext MSAL a používat rozhraní API poskytovaná @azure/msal-browser k sestavení ekvivalentní logiky. Další informace o použití @azure/msal-react v komponentách tříd najdete tady.

Je možné @azure/msal-react použít s Microsoft Graph JavaScript SDK?

Ano, @azure/msal-react lze použít jako vlastního poskytovatele ověřování pro sadu SDK Microsoft Graph pro JavaScript. Informace o implementaci najdete v ukázce: React SPA volání Graph API.

Authentication

Jak můžu zpracovat tok přesměrování v aplikaci React?

Pokud jste v minulosti používali @azure/msal-browser nebo msal v1, možná jste zvyklí volat handleRedirectCallback nebo handleRedirectPromise při načtení stránky, aby se zpracovala odpověď z přesměrování. V @azure/msal-react se to dělá na pozadí a handleRedirectPromise nemusíte volat sami. Po zavolání loginRedirect nebo acquireTokenRedirect budete přesměrováni na přihlašovací stránku Microsoft Entra a po zadání přihlašovacích údajů budete přesměrováni zpět do aplikace, která by nyní měla zobrazit, že je uživatel přihlášen. Vzhledem k tomu, že se jedná o novou, čistou instanci aplikace nelze vrátit do původního loginRedirect volání rozhraní API skutečný objekt odpovědi. Místo toho existuje několik způsobů, jak získat to, co potřebujete:

Pokud potřebujete pouze identifikátor nebo přístupový token, doporučujeme zavolat rozhraní API acquireTokenSilent až těsně předtím, než token budete potřebovat. Než se pokusíte token načíst, nezapomeňte zkontrolovat, zda je uživatel přihlášen a zda neprobíhá interakce. Pokud byla předchozí operace přesměrování úspěšná acquireTokenSilent , vrátí tokeny z mezipaměti.

const GetDataFromAPI = () => {
    const { instance, accounts, inProgress } = useMsal();
    const isAuthenticated = useIsAuthenticated();
    const [graphData, setGraphData] = useState(null);

    useEffect(() => {
        if (isAuthenticated && inProgress === InteractionStatus.None) {
            instance.acquireTokenSilent({
                account: accounts[0],
                scopes: ["User.Read"]
            }).then(response => {
                callAPI(response.accessToken);
            })
        }
    }, [inProgress, isAuthenticated, accounts, instance]);
};

Pokud potřebujete přímý přístup k objektu odpovědi nebo chybě vrácené operací přesměrování, můžete to udělat 3 způsoby:

  1. Pomocí rozhraní API událostí zaregistrujte zpětné volání, které se vyvolá s odpovědí při návratu do aplikace. Ujistěte se, že se tato registrace provádí v části kódu, která se spouští po přesměrování, protože všechna zpětná volání zaregistrovaná před přesměrováním budou ztracena.
  2. Pomocí háku useMsalAuthentication se přihlaste. Tento háček vrátí výsledek nebo chybu, když se vrátíte do aplikace.
  3. Zavolejte handleRedirectPromise, které vrátí výsledek nebo skončí chybou, pokud byla stránka načtena v důsledku přesměrování.

Co můžu dělat mimo @azure/msal-react kontext?

Stručná odpověď je, že všechny komponenty ve vaší aplikaci, které potřebují přístup k rozhraním MSAL API, by se měly vykreslit pod komponentou MsalProvider , aby vaše komponenty měly přístup k kontextu MSAL. Mohou však existovat scénáře, ve kterých je vhodnější mít funkci nástroje mimo strom komponent pro zpracování získání přístupových tokenů nebo určení, jestli je uživatel přihlášený nebo ne. To je v pořádku, pokud nevoláte API, která mohou změnit stav přihlášení uživatele nebo vyvolat interakci.

To znamená, že následující rozhraní API jsou mimo kontext MsalProvider:

  • loginPopup
  • loginRedirect
  • handleRedirectPromise
  • ssoSilent
  • logout
  • acquireTokenPopup
  • acquireTokenRedirect

Poznámka: Pokud se rozhodnete používat jakékoli jiné @azure/msal-browser rozhraní API mimo kontext React, měli byste i nadále používat stejnou instanci PublicClientApplication, kterou předáváte do MsalProvider.

Jak můžu implementovat samoobslužnou registraci?

MSAL React podporuje samoobslužnou registraci v toku ověřovacího kódu. Informace o podporovaných hodnotách výzvy v požadavku a jejich očekávaných výsledcích najdete v naší dokumentaci a přehled změn samoobslužné registrace a konfigurace, které je potřeba provést ve vašem Azure tenantovi. Upozorňujeme, že samoobslužná registrace není dostupná v B2C a testovacích prostředích.

B2C

Jak můžu zpracovat tok zapomenutého hesla v aplikaci React?

Nové prostředí pro resetování hesla je teď součástí zásad registrace nebo přihlašování. Když uživatel vybere odkaz Zapomenuté heslo?, okamžitě přejde do prostředí pro zapomenuté heslo. Pro resetování hesla už nepotřebujete samostatnou zásadu.

Doporučujeme přejít na nové prostředí pro resetování hesla, protože zjednodušuje stav aplikace a snižuje zpracování chyb na straně uživatele. Pokud z nějakého důvodu musíte použít starší postup pro zapomenuté heslo, budete muset zpracovat chybovou odpověď AADB2C90118, kterou služba B2C vrátí, když uživatel klikne na odkaz Zapomněli jste heslo?, a znovu zavolat přihlášení pomocí zásady pro zapomenuté heslo.

Pokud k přihlášení používáte useMsalAuthentication hook, můžete zkontrolovat vrácenou chybu a vyvolat zpětné volání pro přihlášení pomocí nového objektu požadavku.

function Example() {
    const { result, error, login } = useMsalAuthentication(InteractionType.Popup);

    useEffect(() => {
        if (error && error.errorMessage.indexOf("AADB2C90118") > -1) {
            const request = {
                authority: "your-b2c-authority/your-password-reset-policy"
            }
            login(InteractionType.Popup, request)
        }
    }, [error]);
}

Pokud používáte MsalAuthenticationTemplate nebo přímo voláte jedno z přihlašovacích rozhraní API, měli byste k zachycení a zpracování chyby použít rozhraní API pro události.

function Example() {
    const { instance } = useMsal();

    useEffect(() => {
        const callbackId = instance.addEventCallback((event) => {
            if (event.eventType === EventType.LOGIN_FAILURE) {
                if (event.error && event.error.errorMessage.indexOf("AADB2C90118") > -1) {
                    if (event.interactionType === InteractionType.Redirect) {
                        instance.loginRedirect(forgotPasswordRequest);
                    } else if (event.interactionType === InteractionType.Popup) {
                        instance.loginPopup(forgotPasswordRequest).catch(e => {
                            return;
                        });
                    }
                }
            }
        });

        return () => {
            if (callbackId) {
                instance.removeEventCallback(callbackId);
            }
        };
    }, []);
}

Errors

Pokud máte dotazy týkající se konkrétních chyb, které se vám zobrazují, projděte si následující dokumenty s podrobnostmi o některých běžných chybách:

Co když moje otázka nebyla zodpovězena?

Nejprve se podívejte do @azure/msal-browserFAQ, zda tam nenajdete odpověď na svou otázku. Protože @azure/msal-react je obalem nad @azure/msal-browser, najdete tam odpovědi na mnoho svých otázek.

Pokud máte dotazy k našemu plánu, najdete tady obecný přehled plánovaných funkcí a vydaných verzí.

Pokud na vaši otázku v tomto dokumentu neodpovíte nebo v @azure/msal-browser nejčastějších dotazech, můžete problém otevřít a my na ni odpovíme hned, jak to bude možné.

  • Last updated on