Office関連

Office 365 unified APIをJavaScriptだけで呼び出す

Microsoftの松崎さんのブログに下記の記事がありました。

・Office 365 API : CORS の使用 – 松崎 剛 Blog
http://blogs.msdn.com/b/tsmatsuz/archive/2015/05/13/office-365-api-cors.aspx

最近、Office 365 API の MyFiles (OneDrive for Business) と Site (SharePoint) で CORS 対応していましたが、BUILD のタイミングにあわせて Exchange (Mail / Calendar / Contact), Office 365 Unified API など、他の API でも対応しました。

Office 365 unified APIもクロスドメイン制約を超えて呼び出せるようになったわけですね!

Ajax通信を行っているとブチ当たるのが、このクロスドメイン制約の壁。
通常はPHP Proxyを立てたりして回避するわけですが、今回のアップデートによってそんな手間は不要となり、JavaScriptだけでAPIを呼び出すことができるわけです。

ならばやるしかない!!
・・・というわけで、早速試してみました。

下準備

・アプリケーションの設定

  • アプリケーションの種類:ネイティブ クライアント アプリケーション
  • 他のアプリケーションに対するアクセス許可:Office 365 unified API (preview)
  • デリゲートされたアクセス許可:Read and write access to user mail

※ 設定方法は「Office 365 unified APIをVBAから呼び出す」とほぼ同じになりますので、細かい点は左記記事をご参照ください。ただし、Azure ADは既定でImplicit Grant Flowが無効になっているので、下記手順で有効にする必要があります。

・Azure ADでImplicit Grant Flowを有効にする手順

  1. Azure ポータルにサインインし、「Active Directory」からアプリケーションを追加します。
  2. 1.で追加したアプリケーションのダッシュボード画面下部にある「マニフェストの管理」から「マニフェストのダウンロード」をクリックします。
  3. Office_365_unified_API_JS_01_01

  4. マニフェストのダウンロード画面が表示されたら「マニフェストのダウンロード」をクリックし、マニフェスト(json)ファイルをダウンロードします。
  5. Office_365_unified_API_JS_01_02

  6. 3.でダウンロードしたマニフェストファイルをテキストエディタで開き、oauth2AllowImplicitFlowプロパティを「true」に変更後、ファイルを上書き保存します。
  7. Office_365_unified_API_JS_01_03

  8. 再びAzure ポータルからアプリケーションのダッシュボード画面を開き、「マニフェストのアップロード」をクリックします。
  9. Office_365_unified_API_JS_01_04

  10. マニフェストのアップロード画面が表示されたら「ファイルの参照」から、4.で編集したマニフェストファイルをアップロードします。
  11. Office_365_unified_API_JS_01_05

以上で準備作業は終了です。
次はいよいよコードを動かしてみます。

JavaScriptコード

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-2.1.4.min.js"></script>
    <script>
      var access_token = "";
      var client_id = "(取得したクライアント ID)";
      var redirect_uri = "(設定したリダイレクト URI)";
      var resource_uri = "https://graph.microsoft.com/";
      var rest_uri = "https://graph.microsoft.com/beta/me/messages";
      
      $(function(){
        var q = location.href.split("#");
        if(q.length > 1){
          var prms = q[1].split("&");
          for(var i = 0;i < prms.length;i++){
            prm = prms[i].split("=");
            if(prm[0].toLowerCase() == "access_token"){
              access_token = prm[1]; //access token取得
              break;
            }
          }
          $("#btnSignin").attr("disabled", true);
          $("#btnCallApi").attr("disabled", false);
          $("#btnCallApi").removeAttr("disabled");
        }else{
          $("#btnSignin").attr("disabled", false);
          $("#btnSignin").removeAttr("disabled");
          $("#btnCallApi").attr("disabled", true);
        }
        
        $("#btnSignin").click(function(){
          var auth_uri = "https://login.windows.net/common/oauth2/authorize?response_type=token&redirect_uri=" + encodeURIComponent(redirect_uri) + "&client_id=" + client_id + "&resource=" + encodeURIComponent(resource_uri);
          window.location.href = auth_uri;
        });
        
        $("#btnCallApi").click(function(){
          $.ajax({
            url      : rest_uri, 
            type     : "GET", 
            async    : false, 
            dataType : "json", 
            headers  : {
              "Authorization" : "Bearer " + access_token
            }, 
            success  : function(data){
              var ret = "";
              var v = data.value;
              for(var j = 0;j < v.length;j++){
                ret += "Subject:" + v[j].Subject + " , BodyPreview:" + v[j].BodyPreview + "\n";
              }
              $("#txtResult").val(ret);
            }, 
            error: function(){
              alert("エラーが発生しました。");
            }
          });
        });
      });
    </script>
  </head>
  <body>
    <table>
      <tr>
        <td><button id="btnSignin">Sign In</button></td>
        <td><button id="btnCallApi">Call API</button></td>
      </tr>
      <tr>
        <td colspan="2"><textarea id="txtResult" cols="60" rows="5"></textarea></td>
      </tr>
    </table>
  </body>
</html>

Office_365_unified_API_JS_01_06

Office_365_unified_API_JS_01_07

Office_365_unified_API_JS_01_08

Office_365_unified_API_JS_01_09

やっていることは「Office 365 unified APIをVBAから呼び出す」のコードをJavaScriptに置き換えただけですが、とりあえず無事に動作確認できました。

参考Webページ

関連記事

関連記事

  1. Office関連

    UIAutomationClient参照時にDLL読み込みエラーが発生した時の対処法

    マクロでダイアログやボタンの操作を行う時に便利なUI Automati…

  2. Office関連

    PDFファイルにヘッダーとフッターを追加するVBAマクロ

    mougに“マクロで既存のPDFファイルのフッターを操作(追加)したい…

  3. Office関連

    Officeアプリケーションの「最近使用したファイル」を削除するVBScript

    WordやExcel等のOfficeアプリケーションでは、下記サイトに…

  4. Office アドイン

    Office 365でVisio JavaScript APIsを試してみました。

    昨年末にVisio Onlineの機能をJavaScriptで拡張する…

コメント

  1. この記事へのコメントはありません。

  1. この記事へのトラックバックはありません。

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP