// Add services to the container.
// これを追加
builder.Services.AddAuthentication(JwtBearerDefaults.AuthenticationScheme)
    .AddJwtBearer(JwtBearerDefaults.AuthenticationScheme, options =>
    {
        options.MetadataAddress = "https://login.microsoftonline.com/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/v2.0/.well-known/openid-configuration";
        options.Audience = "api://b65fa20b-cec0-4721-8eb0-daf5378acf5a";

        options.TokenValidationParameters = new TokenValidationParameters
        {
            ValidateIssuer = true,
            ValidIssuer = "https://sts.windows.net/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/"
        };
    });
builder.Services.AddControllers();    // 元からある

app.UseAuthentication();    // これを追加
app.UseAuthorization();      // 元からある

    [Authorize]
    [HttpGet(Name = "GetWeatherForecast")]
    public IEnumerable<WeatherForecast> Get()

**********************************************************************
** Visual Studio 2022 Developer PowerShell v17.6.5
** Copyright (c) 2022 Microsoft Corporation
**********************************************************************
PS C:\Users\xxxx\source\repos\AzureADSample\reactapp> npm install @azure/msal-browser @azure/msal-react

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

// MSAL configuration
const pca = new PublicClientApplication({
    auth: {
        clientId: "b65fa20b-cec0-4721-8eb0-daf5378acf5a",
        authority: "https://login.microsoftonline.com/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX",
        redirectUri: "https://localhost:3000",
    },
    cache: {
        cacheLocation: "sessionStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
    },
});

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <React.StrictMode>
        <MsalProvider instance={pca}>
            <App />
        </MsalProvider>
    </React.StrictMode>
);

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

const Login = () => {
    const { instance, accounts, inProgress } = useMsal();

    const login = async () => {
        const loginRequest = {
            scopes: ["api://b65fa20b-cec0-4721-8eb0-daf5378acf5a/appuse"],
        };
        var response = await instance.loginPopup(loginRequest);
        instance.setActiveAccount(response.account);
    }

    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={login}>Login</button>
            </>
        );
    }
}

export default Login;

        return (
            <div>
                <h1 id="tabelLabel" >Weather forecast</h1>
                <Login></Login>
                <p>This component demonstrates fetching data from the server.</p>
                {contents}
            </div>
        );

    async populateWeatherData() {
        // const response = await fetch('weatherforecast');
        // const data = await response.json();
        // this.setState({ forecasts: data, loading: false });
    }

import { useState, useEffect } from 'react';
import { useMsal } from "@azure/msal-react";
import { InteractionStatus, InteractionRequiredAuthError } from "@azure/msal-browser";

const WeatherForecast = () => {
    const [forecasts, setForecasts] = useState([]);
    const [loading, setLoading] = useState(true);

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

    useEffect(() => {
        const accessTokenRequest = {
            scopes: ["api://b65fa20b-cec0-4721-8eb0-daf5378acf5a/appuse"],
        };
        if (inProgress === InteractionStatus.None) {
            instance
                .acquireTokenSilent(accessTokenRequest)
                .then((accessTokenResponse) => {
                    // Acquire token silent success
                    let accessToken = accessTokenResponse.accessToken;
                    // Call your API with token
                    populateWeatherData(accessToken);
                })
                .catch((error) => {
                    if (error instanceof InteractionRequiredAuthError) {
                        instance.acquireTokenRedirect(accessTokenRequest);
                    }
                    console.log(error);
                });
        }
    }, [instance, inProgress, accounts]);

    const renderForecastsTable = (forecasts) => {
        return (
            <table className='table table-striped' aria-labelledby="tabelLabel">
                <thead>
                    <tr>
                        <th>Date</th>
                        <th>Temp. (C)</th>
                        <th>Temp. (F)</th>
                        <th>Summary</th>
                    </tr>
                </thead>
                <tbody>
                    {forecasts.map(forecast =>
                        <tr key={forecast.date}>
                            <td>{forecast.date}</td>
                            <td>{forecast.temperatureC}</td>
                            <td>{forecast.temperatureF}</td>
                            <td>{forecast.summary}</td>
                        </tr>
                    )}
                </tbody>
            </table>
        );
    }

    const populateWeatherData = async (accessToken) => {
        var headers = new Headers();
        var bearer = "Bearer " + accessToken;
        headers.append("Authorization", bearer);
        var options = {
            method: "GET",
            headers: headers
        };

        const response = await fetch('weatherforecast', options);
        const data = await response.json();
        setForecasts(data);
        setLoading(false);
    }

    let contents = loading
        ? <p><em>Loading... Please refresh once the ASP.NET backend has started. See <a href="https://aka.ms/jspsintegrationreact">https://aka.ms/jspsintegrationreact</a> for more details.</em></p>
        : renderForecastsTable(forecasts);

    return (
        contents
    )
}

export default WeatherForecast;

import React, { Component } from 'react';
import Login from './Login'
import WeatherForcast from './WeatherForecast'

export default class App extends Component {
    static displayName = App.name;

    render() {
        return (
            <div>
                <h1 id="tabelLabel" >Weather forecast</h1>
                <Login />
                <p>This component demonstrates fetching data from the server.</p>
                <WeatherForcast />
            </div>
        );
    }
}

builder.Services.AddSwaggerGen(c =>
{
    c.SwaggerDoc("v1", new OpenApiInfo { Title = "アプリ名 - WebApi" });

    c.AddSecurityDefinition("Azure AD", new OpenApiSecurityScheme
    {
        Name = "Authorization",
        Description = "Azure AD Authorization Code Flow authorization",
        Type = SecuritySchemeType.OAuth2,
        Flows = new OpenApiOAuthFlows
        {
            AuthorizationCode = new OpenApiOAuthFlow
            {
                AuthorizationUrl = new Uri("https://login.microsoftonline.com/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/oauth2/v2.0/authorize"),
                TokenUrl = new Uri("https://login.microsoftonline.com/XXXXXXXX-XXXX-XXXX-XXXX-XXXXXXXXXXXX/oauth2/v2.0/token"),
                Scopes = new Dictionary<string, string>
                {
                    ["openid"] = "Sign in Permissions",
                    ["api://b65fa20b-cec0-4721-8eb0-daf5378acf5a/appuse"] = "API permission",
                },
            },
        },
        In = ParameterLocation.Header,
    });

    c.AddSecurityRequirement(new OpenApiSecurityRequirement
    {
        {
            new OpenApiSecurityScheme
            {
                Reference = new OpenApiReference
                {
                    Type = ReferenceType.SecurityScheme,
                    Id = "Azure AD",
                },
            },
            Array.Empty<string>()
        }
    });
});

// Configure the HTTP request pipeline.
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI(c =>
    {
        c.OAuthClientId("b65fa20b-cec0-4721-8eb0-daf5378acf5a");
        c.OAuthUsePkce();
    });
}