Блог

Главная - Вопросы по программированию - Как загрузить adal.js в веб-пакете внутри Angular 2 (Azure-AD)

Как загрузить adal.js в веб-пакете внутри Angular 2 (Azure-AD)

#angular #webpack #azure-active-directory #adal #adal.js

#angular #webpack #azure-active-directory #adal #adal.js

Вопрос:

Внутри моего проекта NG2, если я напишу:

 import adal from 'adal-angular';

это дает мне ‘adal не определен’. Почему это так?

Я хочу использовать adal.js внутри моего проекта angular 2.
Я уже запустил

 npm install adal-angular --save
npm install @types/adal --save

Затем, внутри моего файла component.ts, если я сделаю:

импортируйте adal из ‘adal-angular’;

adal не определен.

Как я могу правильно импортировать его в свой файл component.ts, а также использовать типизацию?

Ответ №1:

Чтобы исправить это, вам нужно будет сделать ряд вещей:

 npm install adal-angular --save        (=>"@types/adal": "^1.0.22")
npm install @types/adal --save-dev     (=>"adal-angular": "^1.0.12")
npm install expose-loader

После установки этих пакетов вам необходимо выполнить следующие действия:
внутри вашего component.ts:

  1. напишите тройную косую черту для импорта типов
    /// <reference path="../../../node_modules/@types/adal/index.d.ts" />
  2. импорт adal.js и выставьте его как AuthenticationContext с помощью загрузчика expose
    import 'expose?AuthenticationContext!../../../node_modules/adal-angular/lib/adal.js';
  3. объявите переменную типа AuthenticationContextStatic и присвоите ей значение AuthenticationContext
    let createAuthContextFn: adal.AuthenticationContextStatic = AuthenticationContext;
  4. Теперь вы можете инициализировать контекст аутентификации с помощью createAuthContextFn
    let config: adal.Config = { clientId : 'test' };
    let context = new createAuthContextFn(config);
  5. (Необязательно) Чтобы обработать обратный вызов из AD, напишите этот фрагмент кода внутри вашего загрузочного компонента, известного как AppComponent:
    if (context.isCallback(location.hash)) {
    var requestInfo = context.getRequestInfo(location.hash);
    context.saveTokenFromHash(requestInfo);
    }

Комментарии:

1. Можете ли вы предоставить полную версию этого? Я не могу пройти мимо разрешенной части, так как получаю ошибки на шаге 5

2. Вот суть auth.provider.ts

3. вы можете клонировать Ng2a.Интерфейс . Чтобы получить рабочий пример

4. Я только что взглянул на это репозиторий. Я получаю сообщение об ошибке при попытке запустить сервер с помощью quickstart :/

5. кроме того, в этом auth.provider.ts что такое AuthContext?

Ответ №2:

вы также можете использовать adal-ts

npm устанавливает adal-ts —сохранить

Метки: