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ページ

関連記事

2015年5月の人気記事前のページ

Visual Studio CodeでOffice アドイン(旧Office 用アプリ)のコードを書いてみる。次のページ

関連記事

  1. アイコン一覧

    Office 2013 アイコン一覧(N)

    ・Office 2013 アイコン一覧 NUM…

  2. Office関連

    Google翻訳の言語自動検出機能を追う

    「Google TTSで文字列を読み上げるマクロ」でGoogle翻訳の…

  3. Office関連

    オフィス祭り 2018 in 東京が9月15日(土)に開催されます。

    突然ですが、私はMicrosoft Officeが大好きです。20…

  4. Office関連

    Office365APIEditorでMicrosoft Graph APIを手軽に呼び出し!

    下記Tech Communityの記事で、Microsoftのエンジニ…

コメント

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

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

Time limit is exhausted. Please reload CAPTCHA.

Translate

Chinese (Simplified)Chinese (Traditional)EnglishFrenchGermanJapaneseKoreanRussianSpanish

最近の記事

アーカイブ

PAGE TOP