MSAL React'i kullanmaya başlama

Bu makale, @azure/msal-react ile nasıl başlayacağınız konusunda size yol gösterecektir. Başlatmayı, bir kullanıcının kimliğinin doğrulanıp doğrulanmadığını belirlemeyi, bileşenleri korumayı, kullanıcının oturum açmasını ve erişim belirteci alma işlemini ele alacağız.

Prerequisites

Başlatma İşlemi

@azure/msal-react, React context API'si üzerine kuruludur ve uygulamanızda kimlik doğrulama gerektiren tüm bölümler MsalProvider bileşeni ile sarmalanmalıdır. Öncelikle PublicClientApplication öğesinin bir örneğini başlatmanız, ardından bunu MsalProvider öğesine bir prop olarak geçirmeniz gerekir.

import React from "react";
import { createRoot } from "react-dom/client";

import { MsalProvider } from "@azure/msal-react";
import { Configuration,  PublicClientApplication } from "@azure/msal-browser";

import App from "./app.jsx";

// MSAL configuration
const configuration: Configuration = {
    auth: {
        clientId: "client-id"
    }
};

const pca = new PublicClientApplication(configuration);

// Component
const AppProvider = () => (
    <MsalProvider instance={pca}>
        <App />
    </MsalProvider>
);

const root = createRoot(document.getElementById("root"));
root.render(<AppProvider />);

MsalProvider altındaki tüm bileşenler bağlam aracılığıyla PublicClientApplication örneğine ve @azure/msal-reacttarafından sağlanan tüm kancalara ve bileşenlere erişebilir.

Kullanıcının kimliğinin doğrulanıp doğrulanmadığını belirleme

Çoğu uygulamanın, kullanıcının oturum açıp açmadığına bağlı olarak belirli bileşenleri koşullu olarak işlemesi gerekir. @azure/msal-react bunu yapmanın 2 kolay yolunu sağlar.

AuthenticatedTemplate ve UnauthenticatedTemplate

AuthenticatedTemplate ve UnauthenticatedTemplate bileşenleri, yalnızca kullanıcı sırasıyla kimliği doğrulanmış veya doğrulanmamışsa çocuklarını oluşturur.

import React from 'react';
import { AuthenticatedTemplate, UnauthenticatedTemplate } from "@azure/msal-react";

export function App() {
    return (
        <React.Fragment>
            <p>Anyone can see this paragraph.</p>
            <AuthenticatedTemplate>
                <p>At least one account is signed in!</p>
            </AuthenticatedTemplate>
            <UnauthenticatedTemplate>
                <p>No users are signed in!</p>
            </UnauthenticatedTemplate>
        </React.Fragment>
    );
}

useIsAuthenticated hook

Yukarıdaki sarmalayıcı bileşenlere alternatif olarak uygulamanız useIsAuthenticated kancasını kullanabilir. Bu konu hakkında daha fazla bilgiyi MSAL React'teki Kancalar bölümünden okuyabilirsiniz.

import React from 'react';
import { useIsAuthenticated } from "@azure/msal-react";

export function App() {
    const isAuthenticated = useIsAuthenticated();

    return (
        <React.Fragment>
            <p>Anyone can see this paragraph.</p>
            {isAuthenticated && (
                <p>At least one account is signed in!</p>
            )}
            {!isAuthenticated && (
                <p>No users are signed in!</p>
            )}
        </React.Fragment>
    );
}

Bileşenleri Koruma

Yalnızca kimliği doğrulanmış kullanıcılara göstermek istediğiniz bileşenleriniz varsa yukarıdaki yöntemlerden herhangi birini kullanabilirsiniz. Peki kullanıcının kimliği henüz doğrulanmamışsa otomatik olarak oturum açmayı çağırmak isterseniz ne olur? @azure/msal-react, MsalAuthenticationTemplate veya useMsalAuthentication kancasını kullanarak bunu yapmanın 2 yolunu sunar.

MsalAuthenticationTemplate bileşeni

Bir MsalAuthenticationTemplate kullanıcının kimliği doğrulanırsa veya bir kullanıcı oturum açmaya çalışırsa bileşen alt öğelerini işler. Yalnızca kullanmak istediğiniz etkileşim türünü (yeniden yönlendirme veya açılır pencere) ve isteğe bağlı olarak oturum açma API'sine geçirilecek bir istek nesnesini , kimlik doğrulaması devam ederken görüntülenecek bir bileşeni veya hata oluştuğunda görüntülenecek bir bileşeni sağlayın.

Bunun çalışan bir örneğini sayfadaki örneklerimizden/profile herhangi birinde bulabilirsiniz.

import React from "react";
import { MsalAuthenticationTemplate } from "@azure/msal-react";
import { InteractionType } from "@azure/msal-browser";

function ErrorComponent({error}) {
    return <p>An Error Occurred: {error}</p>;
}

function LoadingComponent() {
    return <p>Authentication in progress...</p>;
}

export function Example() {
    const authRequest = {
        scopes: ["openid", "profile"]
    };

    return (
        // authenticationRequest, errorComponent and loadingComponent props are optional
        <MsalAuthenticationTemplate 
            interactionType={InteractionType.Popup} 
            authenticationRequest={authRequest} 
            errorComponent={ErrorComponent} 
            loadingComponent={LoadingComponent}
        >
            <p>At least one account is signed in!</p>
        </MsalAuthenticationTemplate>
      )
};

useMsalAuthentication hook

Kanca useMsalAuthentication önce kullanıcının oturum açmış olup olmadığını denetler, ardından oturum açmış kullanıcı yoksa oturum açmayı dener. Kullanmak istediğiniz etkileşim türünü (yeniden yönlendirme veya açılır pencere) sağlamanız gerekir. Oturum açma işleminin sonucunu, oluşan hataları ve yeniden denemeniz gerekirse kullanabileceğiniz oturum açma işlevini döndürür.

Bu kanca hakkında daha fazla bilgiyi hooks dokümanında bulabilirsiniz.

import React from 'react';
import { useMsalAuthentication } from "@azure/msal-react";
import { InteractionType } from '@azure/msal-browser';

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

    return (
        <React.Fragment>
            <p>Anyone can see this paragraph.</p>
            <AuthenticatedTemplate>
                <p>At least one account is signed in!</p>
            </AuthenticatedTemplate>
            <UnauthenticatedTemplate>
                <p>No users are signed in!</p>
            </UnauthenticatedTemplate>
        </React.Fragment>
    );
}

@azure/msal-browser tarafından sağlanan oturum açma API'lerini kullanarak bir kullanıcının oturum açmasını sağlayın

Oturum açmayı başlatmanın bir başka yolu, bağlamdaki PublicClientApplication örneğinden doğrudan @azure/msal-browser API’lerini kullanmaktır. Örneğe bağlam içinden erişmenin 3 yolu vardır.

useMsal hook

Örneği döndüren PublicClientApplication bir kanca, şu anda oturum açmış olan tüm hesaplardan oluşan bir dizi ve msal'ın şu anda ne yaptığını size bildiren bir inProgress değer.

Bu kanca hakkında daha fazla bilgiyi hooks dokümantasyonunda bulabilirsiniz.

import React from 'react';
import { useMsal } from "@azure/msal-react";

export function App() {
    const { instance, accounts, inProgress } = useMsal();

    if (accounts.length > 0) {
        return <span>There are currently {accounts.length} users signed in!</span>
    } else if (inProgress === "login") {
        return <span>Login is currently in progress!</span>
    } else {
        return (
            <>
                <span>There are currently no users signed in!</span>
                <button onClick={() => instance.loginPopup()}>Login</button>
            </>
        );
    }
}

Ham bağlamı kullanma

Sınıf bileşeni kullanıyorsanız ve hook’ları kullanamıyorsanız, MsalContext aracılığıyla ham MSAL bağlamına erişebilirsiniz. Sınıf bileşenlerinde kullanma @azure/msal-react hakkında daha fazla bilgiyi burada bulabilirsiniz.

import React from "react";
import { MsalContext } from "@azure/msal-react";

class App extends React.Component {
    static contextType = MsalContext;

    render() {
        if (this.context.accounts.length > 0) {
            return <span>There are currently {this.context.accounts.length} users signed in!</span>
        } else if (this.context.inProgress === "login") {
            return <span>Login is currently in progress!</span>
        } else {
            return (
                <>
                    <span>There are currently no users signed in!</span>
                    <button onClick={() => this.context.instance.loginPopup()}>Login</button>
                </>
            );
        }
    }
}

Bileşeninizi withMsal Yüksek Düzeyli Bileşen ile sarmalama

Hem sınıf hem de işlev bileşenlerinde MSAL bağlamını kullanmanın bir diğer yolu da, bileşeninizi bağlamı withMsal bileşeninizin destek bileşenlerine ekleyebilen HOC ile sarmalamadır.

import React from "react";
import { withMsal } from "@azure/msal-react";

class LoginButton extends React.Component {
    render() {
        const isAuthenticated = this.props.msalContext.accounts.length > 0;
        const msalInstance = this.props.msalContext.instance;
        if (isAuthenticated) {
            return <button onClick={() => msalInstance.logout()}>Logout</button>    
        } else {
            return <button onClick={() => msalInstance.loginPopup()}>Login</button>
        }
    }
}

export default YourWrappedComponent = withMsal(LoginButton);

Erişim belirteci alma

API’ye erişmek için bir erişim belirtecine her ihtiyaç duyduğunuzda, uygulamanızın PublicClientApplication nesneniz üzerinde acquireTokenSilent API’sini çağırmasını öneriyoruz. Bu, önceki bölümde belirtilen yollara benzer şekilde yapılabilir.

import React, { useState, useEffect } from "react"
import { useMsal, useAccount } from "@azure/msal-react";

export function App() {
    const { instance, accounts, inProgress } = useMsal();
    const account = useAccount(accounts[0] || {});
    const [apiData, setApiData] = useState(null);

    useEffect(() => {
        if (account) {
            instance.acquireTokenSilent({
                scopes: ["User.Read"],
                account: account
            }).then((response) => {
                if(response) {
                    callMsGraph(response.accessToken).then((result) => setApiData(result));
                }
            });
        }
    }, [account, instance]);

    if (accounts.length > 0) {
        return (
            <>
                <span>There are currently {accounts.length} users signed in!</span>
                {apiData && (<span>Data retreived from API: {JSON.stringify(apiData)}</span>)}
            </>
        );
    } else if (inProgress === "login") {
        return <span>Login is currently in progress!</span>
    } else {
        return <span>There are currently no users signed in!</span>
    }
}

React bileşeni dışında erişim belirteci alma

React bileşeninin dışında bir erişim belirteci gerekiyorsa doğrudan üzerinde acquireTokenSilentişlevini çağırabilirsinizPublicClientApplication. MsalProvider tarafından sağlanan React bağlamı dışında, kullanıcının kimlik doğrulama durumunu değiştiren işlevlerin (oturum açma, oturumu kapatma) çağrılmasını önermiyoruz; çünkü bağlam içindeki bileşenler düzgün şekilde güncellenmeyebilir.

Belirteci alabilmeniz için önce kullanıcının oturum açması gerektiğini unutmayın.

import { PublicClientApplication } from "@azure/msal-browser";

// This should be the same instance you pass to MsalProvider
const msalInstance = new PublicClientApplication(config);

const acquireAccessToken = async (msalInstance) => {
    const activeAccount = msalInstance.getActiveAccount(); // This will only return a non-null value if you have logic somewhere else that calls the setActiveAccount API
    const accounts = msalInstance.getAllAccounts();

    if (!activeAccount && accounts.length === 0) {
        /*
        * User is not signed in. Throw error or wait for user to login.
        * Do not attempt to log a user in outside of the context of MsalProvider
        */   
    }
    const request = {
        scopes: ["User.Read"],
        account: activeAccount || accounts[0]
    };

    const authResult = await msalInstance.acquireTokenSilent(request);

    return authResult.accessToken
};

Ayrıca bakınız

  • Last updated on