在反应中处理 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 文件上创建一个包装器 class，它封装 AuthenticationContext 并提供一个接口（方法如 GetToken、Logout 和 getter对于 AuthentciationContext）。

下面是 adalconfig 文件 代码和 AdalContext 包装器 class。

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 文件中，创建一个封装 adalContext.LogOut() 的 public onLogOut() 方法，并在单击注销按钮时调用 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 link:

React-Adal

希望能解决您的问题。

在反应中处理 Azure AD 与 ADAL 的连接

Handle connection Azure AD with ADAL in react

reactjs

authentication

adal