SharePointで作られた社内ポータルをAngular+GraphAPIでステキに閲覧する②
前回に続いてAngular+GraphAPIによる独自ポータルの構築を行っていきます。
前回は①、②について書きました。
今回は③~⑥まで一気に行きます。
Graph API
Office365の様々なコンテンツにアクセスするためのGraphAPIが用意されています。
その中から、必要なコンテンツに対するアクセス許可を設定する必要があります。
※SharePoint APIというREST APIも存在しますが、今回の手順で取得するアクセストークンでアクセスしてみたところ、Invalid issuer or signature.
となってしまったのでGraphAPIを使うことにします。
Azureでアクセス許可を追加
- 「委任されたアクセス許可」を選択
- Sitesで
Sites.ReadWrite.All
にチェックを入れて、「アクセス許可の追加」押下
APIコール
Angular側の組み込み方法を記載します。
アクセストークンの取得
acquireTokenSilent
で取得します。
※Silientを使用する場合、Azure側の認証で「暗黙の付与」でアクセストークンにチェックを入れておく必要があります。
・・・
/** アクセストークン */
token: string;
・・・
async aquireToken() {
this.token = await this.msalService.acquireTokenSilent(environment.msal.scope);
}
・・・
environments.tsにscopeを追加して、Sites.ReadWrite.All
を入れておきます。
export const environment = {
production: false,
msal: {
clientID: '{{your client ID}}',
authority: 'https://login.microsoftonline.com/{{your tenant ID}}',
redirectUrl: 'http://localhost:4200/',
scope: ['user.read', 'Sites.ReadWrite.All'],
}
};
app.component.tsでログイン後にアクセストークン取得処理を追加する。
・・・
async ngOnInit() {
// ユーザー取得
this.user = this.authService.getUser();
if (this.user) {
// ログイン済みの場合はアクセストークンを取得する
await this.authService.aquireToken();
}
}
・・・
/**
* ログイン押下
*/
async OnClickLogin() {
// ログインポップアップ表示
const token = await this.authService.showLoginPopup();
if (token) {
// アクセストークン取得
await this.authService.aquireToken();
// ユーザー情報を取得
this.user = this.authService.getUser();
// TOP画面に遷移
this.router.navigate(['/pages']);
} else {
this.user = null;
alert('ログイン失敗');
}
}
APIにアクセス
APIアクセス部分
httpリクエストのヘッダにAuthorization: Bearer {access token}
を指定するだけです
import { Injectable } from '@angular/core';
import { AuthService } from './auth.service';
import { HttpClient, HttpHeaders } from '@angular/common/http';
/**
* SharePointアクセス用API
*
* Microsoft GraphAPIのエンドポイントに関しては以下を参照
* https://docs.microsoft.com/ja-jp/graph/api/resources/sharepoint?view=graph-rest-1.0
*/
@Injectable({
providedIn: 'root',
})
export class SharePointApiService {
constructor(private http: HttpClient, private auth: AuthService) { }
/**
* SharePointのルートサイトを取得
*/
async getRootSite() {
const url = 'https://graph.microsoft.com/v1.0/sites/root';
try {
return await this.http.get(url, {
headers: new HttpHeaders({ 'Authorization': 'Bearer ' + this.auth.token, })
}).toPromise();
} catch (err) {
console.log(err);
return null;
}
}
}
※SharePointの各種エンドポイントについてはこちらを参照
コンポーネント側
TOPページ表示時にSharePointのルートサイトを取得します。
import { Component, OnInit } from '@angular/core';
import { SharePointApiService } from 'src/services/sharepoint-api.service';
@Component({
selector: 'app-pages-top',
template: `
<h2>{{data.displayName}}</h2>
<span>{{data.description}}</span>
`,
})
export class TopComponent implements OnInit {
/** SharePointサイト情報 */
data: any;
constructor(private spApi: SharePointApiService) {}
ngOnInit () {
this.getData();
}
/**
* データ取得
*/
async getData() {
this.data = await this.spApi.getRootSite();
}
}
アクセス
ログインしなおすと無事にルートサイトのタイトルと説明が表示されます!
ちなみに以下のようなデータが返ってきます。
最後に
これでSharePointに対してデータの読み書きをする準備ができました!!
あとは好きに画面を作って、データの読み書きをすれば完成です!
参考
Author And Source
この問題について(SharePointで作られた社内ポータルをAngular+GraphAPIでステキに閲覧する②), 我々は、より多くの情報をここで見つけました https://qiita.com/teracy164/items/8cd76a52c8adaaf4050a著者帰属:元の著者の情報は、元のURLに含まれています。著作権は原作者に属する。
Content is automatically searched and collected through network algorithms . If there is a violation . Please contact us . We will adjust (correct author information ,or delete content ) as soon as possible .