我正在尝试使用以下库“react-aad-msal”在 Azure 中对我的用户进行身份验证并检索访问令牌。一旦检索到,我会将其传递给我的安全 api。问题是我每次登录时都无法获取访问令牌。不知何故,访问令牌没有出现
这是我的 authProvider 文件
// authProvider.js
import { MsalAuthProvider, LoginType } from 'react-aad-msal';
// Msal Configurations
const config = {
auth: {
authority:
// cannot use https://login.microsoftonline.com/common because my tenant doesnt allow it
'https://login.microsoftonline.com/b8630d64-c577-438b-9b8a-8c2d51da77d4/',
clientId: '5ea2d3b2-ea57-4648-b05a-6dea685333f8',
redirectUri: 'https://myWebsite.azurewebsites.net',
},
cache: {
cacheLocation: 'localStorage',
storeAuthStateInCookie: true,
},
};
// Authentication Parameters
const authenticationParameters = {
scopes: ['user.read'],
};
// Options
const options = {
loginType: LoginType.Redirect,
tokenRefreshUri: window.location.origin + '/auth.html',
};
export const authProvider = new MsalAuthProvider(
config,
authenticationParameters,
options
);
在我的 App.jsx 上我使用这个
/* eslint-disable react/jsx-no-comment-textnodes */
import React, { Component } from 'react';
import { AzureAD, AuthenticationState } from 'react-aad-msal';
import { authProvider } from './constant/authProvider';
import Inside from './Inside';
class App extends Component {
render() {
return (
<div className="App">
<AzureAD provider={authProvider} forceLogin={true}>
<React.Fragment>
<AzureAD provider={authProvider} forceLogin={true}>
<Inside provider={authProvider}></Inside>
<span>Only authenticated users can see me.</span>
</AzureAD>
<AzureAD provider={authProvider} forceLogin={true}>
{({ login, logout, authenticationState, error, accountInfo }) => {
// eslint-disable-next-line default-case
switch (authenticationState) {
case AuthenticationState.Authenticated:
return (
<p>
<p>
<span style={{ fontWeight: 'bold' }}>ID Token:</span>{' '}
{accountInfo.jwtIdToken}
</p>
<p>
<span style={{ fontWeight: 'bold' }}>Username:</span>{' '}
{accountInfo.account.userName}
</p>
<p>
<span style={{ fontWeight: 'bold' }}>
Access Token:
</span>{' '}
{accountInfo.jwtAccessToken}
</p>
<p>
<span style={{ fontWeight: 'bold' }}>Name:</span>{' '}
{accountInfo.account.name}
</p>
<button onClick={logout}>Logout</button>
</p>
);
case AuthenticationState.Unauthenticated:
return (
<div>
{error && (
<p>
<span>
An error occured during authentication, please try
again!
</span>
</p>
)}
<p>
<span>Hey stranger, you look new!</span>
<button onClick={login}>Login</button>
</p>
</div>
);
case AuthenticationState.InProgress:
return <p>Authenticating...</p>;
}
}}
</AzureAD>
</React.Fragment>
</AzureAD>
<div> Page Tests</div>
</div>
// <div className="App">
// <MainTable />
// </div>
);
}
}
export default App;
我能够检索 accountInfo.userName 但不能检索 accountInfo.jwtAccessToken。对于 inside.jsx 我有以下
import React, { useState, useEffect } from 'react';
import PropTypes from 'prop-types';
const Inside = ({ provider }) => {
useEffect(() => {
const request = (url) => {
provider.getAccessToken().then((token) => {
console.log('token', token);
});
};
request();
}, []);
return <div>Inside</div>;
};
Inside.propTypes = {};
export default Inside;