从React调用Azure AD保护的API

Question

我有一个react web-app，它需要访问Azure中托管的ASP.NET Core API。这两个应用程序都受Azure AD保护。我已在Azure AD应用程序注册中分别注册了这些应用程序。我公开了API，它给了我这个作用域：API://｛API_azure_client_id｝/user_impersation-这个作用域允许用户和管理员都同意。我单独注册了react应用程序，并授予它访问已暴露的API范围的权限。

我正在使用MSAL获取令牌。我可以成功签名，但我不知道如何获取access_token来调用API。我在这里关注的是react的azure广告样本。使用钩子的决定是受到这个对样本的拉动请求的启发。

MSAL配置：

export const GRAPH_SCOPES = {
OPENID: "openid",
PROFILE: "profile",
USER_READ: "User.Read",
API_CALL: "api://{api_azure_client_id}/user_impersonation"
};
export const GRAPH_ENDPOINTS = {
ME: "https://graph.microsoft.com/v1.0/me"
};
export const GRAPH_REQUESTS = {
LOGIN: {
scopes: [
GRAPH_SCOPES.OPENID,
GRAPH_SCOPES.PROFILE,
GRAPH_SCOPES.USER_READ,
GRAPH_SCOPES.API_CALL
]
}
};
export const msalApp = new UserAgentApplication({
auth: {
clientId: "react_app_azure_client_id",
authority: "https://login.microsoftonline.com/common",
validateAuthority: true,
postLogoutRedirectUri: "http://localhost:3000",
navigateToLoginRequestUrl: false
},
cache: {
cacheLocation: "localStorage",
storeAuthStateInCookie: isIE()
}
});

useAuthProvider挂钩：

import { useState, useEffect } from "react";
import { msalApp, requiresInteraction, fetchMsGraph, isIE, GRAPH_ENDPOINTS, GRAPH_REQUESTS
} from "./../utils/auth-util";
// If you support IE, our recommendation is that you sign-in using Redirect APIs
const useRedirectFlow = isIE();
// const useRedirectFlow = true;
export default function useAuthProvider() {
const [account, setAccount] = useState(null);
const [accessToken, setAccessToken] = useState(null);
const [error, setError] = useState(null);
const [graphProfile, setGraphProfile] = useState(null);
useEffect(() => {
async function doAuth() {
msalApp.handleRedirectCallback(error => {
if (error) {
const errorMessage = error.errorMessage
? error.errorMessage
: "Unable to acquire access token.";
// setState works as long as navigateToLoginRequestUrl: false
setError(errorMessage);
}
});
const account = msalApp.getAccount();
setAccount(account);
if (account) {
const tokenResponse = await acquireToken(
GRAPH_REQUESTS.LOGIN,
useRedirectFlow
);
if (tokenResponse) {
setAccessToken(tokenResponse.accessToken);
const graphProfile = await fetchMsGraph(
GRAPH_ENDPOINTS.ME,
tokenResponse.accessToken
).catch(() => {
setError("Unable to fetch Graph profile.");
});
if (graphProfile) {
setGraphProfile(graphProfile);
}
}
}
}
doAuth();
}, []);
async function acquireToken(request, redirect) {
return msalApp.acquireTokenSilent(request).catch(error => {
// Call acquireTokenPopup (popup window) in case of acquireTokenSilent failure
// due to consent or interaction required ONLY
if (requiresInteraction(error.errorCode)) {
return redirect ? msalApp.acquireTokenRedirect(request) : 
msalApp.acquireTokenPopup(request);
} else {
console.error("Non-interactive error:", error.errorCode);
}
});
}
async function onSignIn(redirect) {
if (redirect) {
return msalApp.loginRedirect(GRAPH_REQUESTS.LOGIN);
}
const loginResponse = await msalApp
.loginPopup(GRAPH_REQUESTS.LOGIN)
.catch(error => {
setError(error.message);
});
if (loginResponse) {
setAccount(loginResponse.account);
setError(null);
const tokenResponse = await acquireToken(GRAPH_REQUESTS.LOGIN).catch(
error => {
setError(error.message);
}
);
if (tokenResponse) {
setAccessToken(tokenResponse.accessToken);
const graphProfile = await fetchMsGraph(
GRAPH_ENDPOINTS.ME,
tokenResponse.accessToken
).catch(() => {
setError("Unable to fetch Graph profile.");
});
if (graphProfile) {
setGraphProfile(graphProfile);
}
}
}
}
function onSignOut() {
return msalApp.logout();
}
return {
account,
accessToken,
error,
graphProfile,
onSignIn: () => onSignIn(useRedirectFlow),
onSignOut: () => onSignOut()
};
}

我创建了一个httpService，它只是axios的包装器。我使用这个服务来调用api，httpService的配置如下所示，也是我需要访问令牌的地方。我在下面试过了，但我得到的钩子只能在函数体内调用。

import axios from "axios";
import useAuthProvider from "./useAuthProvider";
axios.interceptors.request.use(
config => {
const { accessToken } = useAuthProvider();
if (accessToken) {
config.headers["Authorization"] = "Bearer " + accessToken;
}        
return config;
},
error => {
Promise.reject(error);
}
);
export default {
get: axios.get,
post: axios.post,
put: axios.put,
delete: axios.delete
};

如果用户没有登录，我想显示一个带有"登录"按钮的组件，该按钮会提示用户输入凭据。我在应用程序组件中这样做，它运行得很完美。

App.js

import React from "react";
import useAuthProvider from "./services/useAuthProvider";
import NavBar from "./components/navigation/navBar";
import "./App.css";
import Welcome from "./components/welcome";
function App() {
const { account, accessToken, onSignIn } = useAuthProvider();
if (account === null)
return <Welcome authButtonMethod={onSignIn.bind(this)} />;
return <NavBar />;
}
export default App;

我可以将令牌放在本地存储中，然后从httpService中获取它。根据我上面的代码，我在哪里可以访问令牌并将其保存在本地存储中？

Answer 1

我可以成功签名，但我不知道如何获取access_token调用API。

由于您可以成功签名，您在本地存储中已经有一个缓存的令牌(cacheLocation:"localStorage"(。如果令牌尚未过期，您可以静默地获取它。

var accessToken = await this.userAgentApplication.acquireTokenSilent({
scopes: config.scopes
});

如果您想访问自己的webapi，那么作用域应该类似于api://{api_azure_client_id}/user_impersonation。

Answer 2

在Sign方法中，您可以通过添加window.localStorage.setItem('accessToken'，tokenResponse.accessToken(将访问令牌保存到本地存储；

async function onSignIn(redirect) {
if (redirect) {
return msalApp.loginRedirect(GRAPH_REQUESTS.LOGIN);
}
const loginResponse = await msalApp
.loginPopup(GRAPH_REQUESTS.LOGIN)
.catch(error => {
setError(error.message);
});
if (loginResponse) {
setAccount(loginResponse.account);
setError(null);
const tokenResponse = await acquireToken(GRAPH_REQUESTS.LOGIN).catch(
error => {
setError(error.message);
}
);
if (tokenResponse) {
setAccessToken(tokenResponse.accessToken);
window.localStorage.setItem('accessToken',tokenResponse.accessToken);
const graphProfile = await fetchMsGraph(
GRAPH_ENDPOINTS.ME,
tokenResponse.accessToken
).catch(() => {
setError("Unable to fetch Graph profile.");
});
if (graphProfile) {
setGraphProfile(graphProfile);
}
}
}
}

在httpService中，从本地存储添加窗口获取令牌。localStorage.getItem('accessToken'(；然后将其传递给Axios标头