マイクロソフトグラフとマイクロソフト認証ライブラリを使用してJavaScriptでSharePointにファイルをアップロードする

しかし、私はそれが本当にこのブログ記事が何であるかについて明確にしたかったです.あなたが推測したかもしれないように、私はこのブログ記事では、リクエストのためにマイクロソフトグラフを使用してJavaScriptを使用してSharePointにファイルをアップロードする方法、および認証のためのマイクロソフト認証ライブラリをカバーします.
私は最近クライアントのためにこれを解決しなければなりませんでした、そして、私は資源を探している壁に対して私の頭を叩いている多くの時間を使いました.それは本当に問題であったリゾートの不足でありませんでした、しかし、すべての例が大きいもののどちらかであったか、または、私が私が明らかに欠けていたという何らかの理解があったことを当然のことと思っていました.それで、私が最終的にそれをする方法を考え出したとき、そして、それが実際に必要とする小さいコード－私は、私がそれについてブログをする必要があると決めました.うまくいけば、このブログ記事は、いくつかの時間を節約する!
私もMaada小さなVuejsアプリので、取得することができますし、quicly実行します.私の目標は、あなたが必要とするコードの最低限の量を提示することでした.

Prerequesites: You should know basic programming, and have an understanding of working against an API - and different authentication flows.

Source code: You can find the full source code for this example on my github. Note, this is a stripped down example to show you the minimum of what you need to upload a file. Its a good baseline/starting point to build on.

目次:

Introduction

Creating an app registration for a single page application in Azure AD

Authenticating with MSAL

Handling the file using FileReader

Making request to graph

Resources

導入
グラフを使用してJavaScriptアプリケーションからファイルをアップロードするときに完了する必要がある4つの手順があります.我々は詳細に入る前にそれらのそれぞれを簡単に見てみましょう.

あなたはAzure Acive Directory(AAD)で単一のページ・アプリケーション(SPA)を登録する必要があります.

ユーザーを認証するためにこれを使用します.

あなたは最初のステップで作成したスパに対して認証するマイクロソフト認証ライブラリ(MSAL)を使用する必要があります.

それで、あなたは誰がファイルをアップロードしたいかについてわかっています-そして、彼らにそうする許可があります.

ユーザーが選択したファイルを処理する必要があります.

マイクロソフトグラフは、ArrayBuffer、バッファまたはBlobオブジェクトを受け入れます.

マイクロソフトのグラフにMSALから認証トークンを要求し、ユーザが選択したファイルを要求する必要があります.

たぶん、あなたはどのようにこれらのステップのいくつかを行う方法を知っているか、多分あなたはそれらのすべてに新しいです.このブログ記事の残りの部分で、私は詳細にあらゆるステップをカバーします.私もあなたのリストを提供するresources .
Azure広告における単一ページアプリケーションのためのアプリケーション登録の作成
あなたがこのブログ記事を読んでいるので、あなたはAllreadyにあなたが文書をアップロードしたいマイクロソフト365テナントを持つことができます.できないならregister for a free dev tenant her .
あなたがAzure広告を管理する必要がない場合は、あなたのためのアプリケーションを登録するために行うSomenoneを取得する必要があります.
へのログインAzure Active Directory .
左の選択アプリ登録の上のメニューで

3 .新規登録
4 .名前を入力し、サポートしたいアカウントタイプを選択します.リダイレクトURIタイプを「シングルページアプリケーション( SPA )」に設定します.
注は、あなたがアプリケーションを実行しているURLに一致する必要があります入力URI.私の例のコードではlocalhost : 3000です.コードが他のどこかから走っているとき、あなたは後でこのURIを変えることができます.

をクリックします.アプリの情報ページでアプリケーション(クライアント)のID、およびディレクトリ(テナント)IDをコピーします.

それはそれです.これで、単一のページのアプリを登録している.
マイクロソフト認証ライブラリによる認証

Example code

I have made a small vue app to give you an example that you can actually run right away. But all the logic is written in vanilla javascript so you don't need to know vuejs to use the example. You can find the source code here.

Information on how to get the example code up and running is documentet in the repos readme file so I will not cover that in this blogpost.

ドキュメントをアップロードするには、まずAzure ADで登録したSPAに対してユーザー認証を行う必要があります.
構成

const msalConfig = {
  auth: {
    clientId: "YOUR APP ID FROM AZURE REGISTRATION",
    authority:
      "https://login.microsoftonline.com/YOUR_TENANT_ID",
    //This URL must match the one set in azure app reg
    redirectUri: "http://localhost:3000/"
  },
};

const msalRequest = {
  scopes: ["User.Read", "Files.ReadWrite", "Files.ReadWrite.All"] 
};

コード
最初に、MSALクライアントを作成して初期化します.これは、我々がAzure Spaと通信して、ユーザーを認証するのに使用するものです.

const msalClient = new msal.PublicClientApplication(msalConfig);

ログインを処理する関数を書きます.これは、MSelクライアントを使用して、設定で作成したスコープを使用してLoginPopup関数を呼び出します.
また、ユーザーがallreadyにログインされている場合、最初にトークンを黙って取得するための機能性を追加することもできます.しかし、私はこのコードサンプルをできるだけ小さくしたかったので、ここでこれを残しましたが、次のコードスニペットの例を見ることができます.

export async function signInWithMsal() {
  const authResponse = await msalClient.loginPopup(msalRequest);
  sessionStorage.setItem("msalAuthName", authResponse.account.username);
}

また、MSALトークンを取得する機能もあります.この関数は、次のステップでグラフを呼び出します.ここでは、トークンを黙って扱う例もあります.

export async function getMsalToken() {
  let username = sessionStorage.getItem("msalAuthName");
  try {
    const silentRequest = {
      scopes: msalRequest.scopes,
      account: msalClient.getAccountByUsername(username),
    };
    const silentResult = await msalClient.acquireTokenSilent(silentRequest);
    return silentResult.accessToken;
  } catch (error) {
      //Add handling for new login promt here - if the silent request should fail
    console.error(error);
  }
}

選択したファイルの操作
グラフはファイルをarraybuffer、バッファまたはblobとしてaxceptするでしょう.私の例では、FileReaderオブジェクトを使用してファイルをArrayBufferとして読み取り、UploadDocument関数に送信します.
入力フィールドからファイル名とファイル自体を取得します.

const filename = 
          document.getElementById("selectedFile").files[0].name;
const fileToUplode = 
          document.getElementById("selectedFile").files[0];

FileReaderと、FileReaderが読み込まれたときに実行される関数を作成します.次に、readfileasrayBuffer関数をファイルに渡します.OnLoad関数はイベントパラメタ'イベントを持ちます.ターゲット.'結果'は選択されたファイルのarraybufferバージョンを含みます.

filereader.onload = async (event) => {
  await uploadDocument(filename, event.target.result);
};
//This will trigger the onload function above.
filereader.readAsArrayBuffer(fileToUplode);

ファイルを処理し、uploaddocument ()をコールするための完全なコードです.

const onSubmit = async (event) => {
      //prevents the site from reloading
      event.preventDefault();
      // sign the user in
      await signInWithMsal();
      //obtain the filename from the file
      const filename = document.getElementById("selectedFile").files[0].name;
      //obtain the file itself
      const fileToUplode = 
          document.getElementById("selectedFile").files[0];
      //create filereader
      const filereader = new FileReader();
      //create function that will run when filereader is loading
      filereader.onload = async (event) => {
        //call uploadDocument function and pass in filename and file as ArrayBuffer
        await uploadDocument(filename, event.target.result);
      };
      //call the readAsArrayBuffer on fileReader and pass inn file.
      //This will trigger the onload function above.
      filereader.readAsArrayBuffer(fileToUplode);
    };

グラフへのリクエスト
今、私たちは、マイクロソフトグラフへのリクエストを行うことができます処理されます.まず、リクエストで使用するURLをビルドする必要があります.そして、リクエストで送られるようにファイルを処理する必要があります.
使用するグラフURLの作成
私はそれがどのように含める必要があることを把握するのは難しいと思ったので、グラフのURLを構築する方法に関するセクションを書くことを決めた.
URLは以下のようになります.

  const uploadURL = "https://graph.microsoft.com/v1.0/sites/<YOUR DOMAIN, SOME_ID, SOME_OTHER_ID>/drive/root:/"
 + filename + ":/content";

しかし、私は、Domianを含む完全なIDを返すグラフ要求を見つけました.
それを達成するには、以下のリクエストを実行しますGraph Explorer (または郵便配達人).
注意この要求を実行するには、ベアラートークンを含める必要があります.あなたがグラフエクスプローラからそれをするならば、あなたがログインするとき、それはあなたのためにこれをします.あなたがPostmanからそれをするならば、あなたは最初にアクセストークンを得る必要があります.

https://graph.microsoft.com/v1.0/sites/YOUR_DOMAIN.sharepoint.com:/sites/NAME_OF_SITE_YOU_WANT_TO_UPLOAD_TO/

これにより、以下のようなIDが含まれます.

全体の"id "をコピーして、それをアップロードします

https://graph.microsoft.com/v1.0/sites/PUT_THE_ID_FROM_PREVIOUS_STEP_HERE/drive/root:/"
 + filename + ":/content"

リクエスト作成
JavaScript用のマイクロソフトGraph SDKがありますが、この例では通常のウィンドウを使用しています.GraphClientを作成する代わりにリクエストを取得します.グラフSDKの詳細については、Resources .
取得する最初のパラメータとして、アップロードURLを渡します.Secodパラメーターは、承認ベアトルトークンを持つヘッダーと、ファイルを含む本体を含むオブジェクトです.

export async function uploadDocument(filename, fileToUpload){
  const uploadURL = "https://graph.microsoft.com/v1.0/sites/<YOUR DOMAIN, SITE, AND WEB ID HERE >/drive/root:/" + filename + ":/content";
    await window
    .fetch(uploadURL, {
      method: "PUT",
      headers: {
        Authorization: `Bearer ${await getMsalToken()}`,
      },
      body: fileToUpload,
    })
    .then((response) => {
        // Here you can implement some user feedback. "File uploaded" etc.. 
    })
    .catch((error) => {
      console.error("ERROR UPLOADING");
      console.error(error);
    });
}

そして、それ.あなたは今SharePointにファイルをアップロードしました!
大きなファイルの操作
あなたが大きなファイル(4 MB +)で働くならば、あなたはリクエストを扱うためにアップロードセッションを使用することができました.詳細については、以下のリソースのリンクを参照ください.
資源

Microsoft Graph JavaScript Client Library - NPMサイト.

Make API calls using the Microsoft Graph SDK - マイクロソフトドキュメント

Upload a large file with a upload session - マイクロソフトドキュメント

YouTube -マイクロソフト365開発者チャンネル

Microsoft Graph JavaScript Client Library - マイクロソフトグラフ

Build JavaScript single page apps with Graph - チュートリアル-マイクロソフトドキュメント

この記事は役に立ちましたか.何か新しいものを公開するときに通知する!
また、何かフィードバックや質問がある場合は、下記のコメントでお知らせください.🙂
読んでくれてありがとう、ハッピーコーディング!
//