Блог

Я создал приложение в react и использую ADAL для аутентификации в Azure Active Directory, поэтому каждый раз, когда кто-то заходит на мой сайт, он должен входить в систему.

Я должен регистрировать (отправлять POST-запрос в мой API) все соединения и отключения (когда пользователь нажимает на кнопку выхода из системы).

Аутентификацией управляет 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 (это неверные значения)

У кого-нибудь есть какие-либо идеи или когда-либо сталкивался с этой проблемой?

Заранее спасибо 🙂

Я бы предложил создать класс-оболочку в файле adalconfig, который инкапсулирует AuthenticationContext и предоставляет интерфейс (такие методы, как getToken, Logout и getter для AuthentciationContext).

Ниже приведен код файла adalconfig с классом-оболочкой AdalContext.

 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.Выход из системы () и при нажатии кнопки выхода из системы вызовите этот общедоступный метод 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

Я надеюсь, что это решит вашу проблему.