处理连接Azure AD与ADAL的响应

Question

我在react中创建了一个应用程序，我正在使用ADAL在Azure Active Directory中进行身份验证，所以每次有人访问我的站点时他都必须登录。

我必须记录（向我的API发送POST请求）所有连接和断开（当用户单击按钮注销时）。

身份验证由ADAL管理，所以我不知道在哪里放我的代码来处理这个...

import { AuthenticationContext, adalFetch, withAdalLogin } from 'react-adal';

export const adalConfig = {
    instance: 'https://login.microsoftonline.com/',
    tenant: '3v824f55-8461-4eab-9659-81cce12dfa04',
    clientId: '33h87014-dff8-4406-84ce-2608f7173fe2',
    endpoints: {
        api: '14653b62-d8444-4e7a-9362-d7267et30a0d',
    },
    postLogoutRedirectUri: window.location.origin,
    cacheLocation: 'localStorage',
    callBack:callBackFunction
};


export const authContext = new AuthenticationContext(adalConfig);

export const adalApiFetch = (fetch, url, options) =>
  adalFetch(authContext, adalConfig.endpoints.api, fetch, url, options);

export const withAdalLoginApi = withAdalLogin(authContext, adalConfig.endpoints.api);

function callBackFunction(errorDesc, token, error, tokenType)
{`enter code here`
  alert("Problem wit`enter code here`h the connection ! ");
}

export const getToken = () => {
  return authContext.getCachedToken(authContext.config.clientId);
};

这是我的adal.config文件（这不是真正的值）

有没有人有任何想法或曾经遇到过这个问题？

提前致谢 ：）

Answer 1

我建议在adalconfig文件上创建一个包装器类，它封装AuthenticationContext并提供一个接口（如AuthentciationContext的GetToken，Logout和getter等方法）。

下面是带有AdalContext包装类的adalconfig文件代码。

import { AdalConfig, adalGetToken, AuthenticationContext } from 'react-adal';

// Endpoint URL
export const endpoint = 'https://graph.microsoft.com/';
// App Registration ID
const appId = '<App Registration ID>';

export const adalConfig: AdalConfig = {
    cacheLocation: 'localStorage',
    clientId: appId,
    endpoints: {
        api:endpoint
    },
    postLogoutRedirectUri: window.location.origin,
    tenant: '<Tenant_Name>.onmicrosoft.com'
};

class AdalContext {
    private authContext: AuthenticationContext;
    
    constructor() {
        this.authContext = new AuthenticationContext(adalConfig);
    }

    get AuthContext() {
        return this.authContext;
    }

    public GetToken(): Promise<string | null> {
        return adalGetToken(this.authContext, endpoint);
    }

    public LogOut() {
        this.authContext.logOut();
    }
}

const adalContext: AdalContext = new AdalContext();
export default adalContext;

在App.tsx或App.js文件中，创建一个公共的onLogOut（）方法，它封装了adalContext.LogOut（），点击了注销按钮，调用public onLogOut（）方法，在注销用户之前，您可以记录详细信息。

以下是App.tsx文件代码：

import './App.css';

import * as React from 'react';

import logo from './logo.svg';

import { Web } from "@pnp/sp";
import adalContext, { endpoint } from './adalConfig';

interface IAppState {
  webTitle: string
}

class App extends React.Component<{}, IAppState> {
  constructor(props: any) {
    super(props);
    this.state = {webTitle: ''};
    this.onLogOut = this.onLogOut.bind(this);
  }

  public componentWillMount() {
    const web = new Web(endpoint);
    web.select("Title").get().then(w => {
      this.setState({
        webTitle : w.Title
      });
    });
  }

  public onLogOut() {
    // read details and log information before logging out
    adalContext.LogOut();
  }

  public render() {
    return (
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.tsx</code> and save to reload.
        </p>
        <h1>
          Title: {this.state.webTitle}
        </h1>
        <button onClick={this.onLogOut}>
          Log out
        </button>
      </div>
    );
  }
}

export default App;

有关更多信息，请查看以下github链接：

React-Adal

我希望它能解决你的问题。