reactjs - Azure 访问令牌 react-aad-msal
问题描述
我正在尝试使用以下库“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;
解决方案
您可以通过这种方式获取访问令牌,authProvider['_accountInfo'].jwtIdToken
因为authProvider
它是一个数组,并且_accountInfo
是您获取jwtIdToken
.
推荐阅读
- c++ - GCC编译器一个字节有多少位
- django - Django 不保存保存前分配的 OneToOne 关系
- html - 带有单选按钮和复选框的页面样式问题
- wordpress - 在 WordPress 用户登录时插入自定义帖子类型,可以吗?
- python-3.x - 在神经网络中模拟输入的日志系统
- node.js - 使用 sequelize.js 根据其键查询和更新 json 对象
- scala - 每次为给定数字生成相同的随机唯一数字
- c++ - How to safely release resources allocated by constructor?
- python - 有没有办法使用 django restframework 和我创建的模型制作一个 5 星评级系统?
- openedge - 如何使用正在进行的 ENTRY 4GL 匹配两条记录?