チュートリアル: 外部テナントに対して React SPA へのサインインとサインアウトを追加する

このチュートリアルは、React シングルページ アプリケーション (SPA) を構築して、それを Microsoft Entra 管理センターを使用する認証用に準備する方法を示すシリーズの最後のパートです。 このシリーズのパート 3 では、Visual Studio Code で React SPA を作成し、それを認証用に構成しました。 この最後の手順では、アプリにサインインとサインアウトの機能を追加する方法を示します。

このチュートリアルでは、

• ページ レイアウトを作成し、サインインとサインアウトのエクスペリエンスを追加する
• 既定の関数を置き換えて認証済み情報をレンダリングする
• ユーザー フローを使用してアプリケーションのサインインとサインアウトを行う

前提条件

• チュートリアル: React SPA でユーザーを認証するように外部テナントを準備する。

ファイル名を変更し、認証済み情報をレンダリングする関数を追加する

既定では、アプリケーションは App.js という JavaScript ファイルを介して実行されます。 これは、開発者が HTML を React で記述できるようにする拡張子である .jsx に変更する必要があります。

1. App.js の名前が App.jsx に変更されていることを確認します。

2. 既存のコードを次のコード スニペットに置き換えます。

    import { MsalProvider, AuthenticatedTemplate, useMsal, UnauthenticatedTemplate } from '@azure/msal-react';
    import { Container, Button } from 'react-bootstrap';
    import { PageLayout } from './components/PageLayout';
    import { IdTokenData } from './components/DataDisplay';
    import { loginRequest } from './authConfig';
   
    import './styles/App.css';
   
    /**
     * Most applications will need to conditionally render certain components based on whether a user is signed in or not. 
     * msal-react provides 2 easy ways to do this. AuthenticatedTemplate and UnauthenticatedTemplate components will 
     * only render their children if a user is authenticated or unauthenticated, respectively. For more, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
     */
    const MainContent = () => {
        /**
         * useMsal is hook that returns the PublicClientApplication instance,
         * that tells you what msal is currently doing. For more, visit:
         * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/hooks.md
         */
        const { instance } = useMsal();
        const activeAccount = instance.getActiveAccount();
   
        const handleRedirect = () => {
            instance
                .loginRedirect({
                    ...loginRequest,
                    prompt: 'create',
                })
                .catch((error) => console.log(error));
        };
        return (
            <div className="App">
                <AuthenticatedTemplate>
                    {activeAccount ? (
                        <Container>
                            <IdTokenData idTokenClaims={activeAccount.idTokenClaims} />
                        </Container>
                    ) : null}
                </AuthenticatedTemplate>
                <UnauthenticatedTemplate>
                    <Button className="signInButton" onClick={handleRedirect} variant="primary">
                        Sign up
                    </Button>
                </UnauthenticatedTemplate>
            </div>
        );
    };
   
   
    /**
     * msal-react is built on the React context API and all parts of your app that require authentication must be 
     * wrapped in the MsalProvider component. You will first need to initialize an instance of PublicClientApplication 
     * then pass this to MsalProvider as a prop. All components underneath MsalProvider will have access to the 
     * PublicClientApplication instance via context as well as all hooks and components provided by msal-react. For more, visit:
     * https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/lib/msal-react/docs/getting-started.md
     */
    const App = ({ instance }) => {
        return (
            <MsalProvider instance={instance}>
                <PageLayout>
                    <MainContent />
                </PageLayout>
            </MsalProvider>
        );
    };
   
    export default App;
   

プロジェクトを実行してサインインする

必要なコード スニペットはすべて追加されたので、これでアプリケーションを Web ブラウザーでテストできるようになりました。

1. アプリケーションは既にターミナルで実行されているはずです。 実行されていない場合は、次のコマンドを実行してアプリケーションを開始します。

   npm start
   

2. 自動的にリダイレクトされない場合は、Web ブラウザーを開き http://localhost:3000/ に移動します。

3. このチュートリアルの目的に合わせて、[ポップアップを使用してサインインする] オプションを選択します。

4. ポップアップ ウィンドウにサインイン オプションが表示されたら、サインインするアカウントを選択します。

5. コードがメール アドレスに送信されるということを示す 2 つ目のウィンドウが表示されることがあります。 この場合は、[コードの送信] を選択します。 送信者が Microsoft アカウント チームであるメールを開き、7 桁のシングルユース コードを入力します。 入力したら、[サインイン] を選択します。

6. [サインイン状態を維持] には [いいえ] または [はい] を選択できます。

7. アプリは、サインインとデータへのアクセスのためのアクセス許可を求めます。 [同意する] を選択して続行します。

アプリケーションからサインアウトする

1. アプリケーションからサインアウトするには、ナビゲーション バーで [サインアウト] を選択します。
2. サインアウトするアカウントを確認するウィンドウが表示されます。
3. 正常にサインアウトすると、すべてのブラウザー ウィンドウを閉じることを勧める最後のウィンドウが表示されます。

関連項目

• セルフサービス パスワード リセットを有効にする
• 既定のブランド化をカスタマイズする
• Google でのサインインを構成する