reactjs - Azure 访问 token react-aad-msal

Question

我正在尝试使用以下库“react-aad-msal”对 Azure 中的用户进行身份验证并检索访问 token 。一旦检索到，我将把它传递给我的安全 api。问题是我每次登录时都无法获取访问 token 。不知何故，访问 token 没有显示

这是我的 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;

Answer 1

您可以通过以下方式获取访问 token authProvider['_accountInfo'].jwtIdToken，因为authProvider是一个数组，_accountInfo是您将获得jwtIdToken的 key 。