Ручка соединения Azure AD с ADAL в реакции - PullRequest
Новая
       17

Ручка соединения Azure AD с ADAL в реакции

0 голосов
/ 22 марта 2019

Я подал заявку в ответ и использую 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 (это не истинные значения)

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

Заранее спасибо :)

1 Ответ

0 голосов
/ 02 апреля 2019

Я бы предложил создать класс-оболочку для файла 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.LogOut (), и при нажатии кнопки выхода из системы вызовите этот общедоступный метод 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;

Для получения дополнительной информации вы можете проверить ссылку ниже:

Реагировать-Adal

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

...