Веб-интерфейс Sharepoint Online возвращает 401 после входа в систему с помощью angular - PullRequest
Новая
       31

Веб-интерфейс Sharepoint Online возвращает 401 после входа в систему с помощью angular

0 голосов
/ 26 ноября 2018

Я использую приложение Angular 4 с Adal angular4 для подключения онлайн-интерфейса sharepoint.Я могу просматривать информацию о пользователе, что означает, что я могу войти в онлайн-приложение sharepoint.Но после того, как я не смог получить список с помощью API. 

const url = 'https://sitename/sites/applicationName/_api/lists/getbytitle(\'tenets\')/items';
const myHeaders = new HttpHeaders({
  'Authorization': 'Bearer ' + this.adalService.getCachedToken(environment.config.clientId),
  'content-type': 'application/json;odata=verbose'
});
return this.http.get(url, { headers: myHeaders }).subscribe(
  data => console.log(data),
  err => console.log(err),
  () => console.log('in complete')
);

1 Ответ

0 голосов
/ 17 декабря 2018

SharePoint Online используется для хранения данных и может использоваться в качестве веб-API.Мы интегрируем этот веб-API в приложение Angular.Ниже приведены инструкции по интеграции adal-angular4 с Angular7

. Установите последнюю версию Adal-angular, используя следующую команду: 

npm install adal-angular4 –save

Добавьте AdalService и AdalGurad в provider @ app.module.ts

providers: [ AdalService, AdalGuard],

Настройка конфигурации SharePoint в файле src / environment / environment.ts

Пример: 

export const environment = {
  production: false,
  config: {
    tenant: 'tenant-id,
    clientId: 'client-id',
    redirectUri: 'http://localhost:4200/'
  }
};

Создать службу, импортировать AdalService и создатьзакрытая переменная для AdalService внутри конструктора.Инициализируйте свою конфигурацию SharePoint Online в constructor () Например: Web.service.ts 

import { AdalService } from 'adal-angular4';
constructor(private adalService: AdalService) {
    this.adalService.init(environment.config);
  }

Напишите ниже упомянутый метод внутри службы Пример: 

 handleWindowCallback() {
    this.adalService.handleWindowCallback();
  }
  login() {
    this.adalService.login();
  }
  logout() {
    this.adalService.logOut();
  }
  get authenticate() {
    return this.adalService.userInfo.authenticated;
  }

После определения вышеуказанного метода настройтеВаш процесс входа в ваш компонент входа.Как правило, после успешного входа в систему SharePoint будет перенаправлять только на компонент входа в систему, поэтому мы проверяем имя входа и перенаправляем на определенную страницу.Пример: 

import { WebService } from '../web.service';
constructor(private webService: WebService) { }
ngOnInit() {
    this.webService.handleWindowCallback(); // this is to store the token to adal storage
    if (this.webService.authenticate) {
      this.router.navigate(['/', 'dashboard']);
    }
  }
login() {
    this.webService.login();
}

Добавьте приведенный ниже код в auth.guard.ts, чтобы проверить, проходит ли проверка подлинности пользователя перед каждой маршрутизацией с помощью метода authenticate (), который присутствует внутри службы, 

constructor(private webService: WebService) { }
canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean> | Promise<boolean> |boolean{ 
      if (this.webService.authenticate) {
        return true;
      } else {
        this.router.navigate(['/']);
        return false;
      }
    }
  }

Добавьте указанные ниже коды внутри компонента входа в систему, чтобы вызывать службу при каждом запросе входа в систему и выхода из системы, 

login() {
     this.webService.login();
}
logout() {
     this.webService.logout();
}

Напишите приведенный ниже метод внутри службы, чтобы отправить запрос в SharePoint с использованием URL-адреса.и получить соответствующий ответ, передав заголовок, 

import 'rxjs/add/operator/mergeMap';

getdata(listname): Observable<any> {
    const url = 'https://sitename.sharepoint.com/sites/application_name/_api/web/lists/
                 getByTitle(\'' + listname + '\')/items';
    return this.adalService.acquireToken('tenantid/tenant name')
           .flatMap(token => {
                    const headersParam = new HttpHeaders({
                        'Content-Type': 'application/json;odata=verbose',
                        'Authorization': 'Bearer ' + token.toString()
                    });
                return this.http.get(url, { headers: headersParam });
            });
  }

Добавьте указанный ниже метод внутри компонента, в который вы хотите получить и обработать данные. 

getdata() {
    const listname = 'tenets';
    this.webService.getdata(listname).subscribe(data => {
      console.log(data);
    });
}

Этот метод печатаетзначение и название списка принципов,

...