Office関連

Microsoft Graph JavaScript SDKを使ってOffice 365 APIを簡単に呼び出す方法

Office 365 Advent Calendar 2016

今年もアドベントカレンダー(Advent calendar)の季節がやってまいりました。
Office Development MVPとして、今年は「Office 365 Advent Calendar 2016」に参加してみよう!・・・というわけで、今回はOffice 365絡みのネタを書いていきます。

Microsoft Graph JavaScript SDK

下記のように当ブログでもいくつか記事を書いていますが、Microsoft Graph(旧Office 365 unified API)を使うと、単一のエンドポイントを介してOneDriveやOutlook、Excel等、様々なMicrosoftクラウドサービスの機能を呼び出すことができます。

開発を楽にしてくれるSDKも公開されていて、もちろん、JavaScript用のSDKも用意されています。

今回はこのMicrosoft Graph JavaScript SDKを利用して、ブラウザーベースのWebアプリから、Office 365のAPIを呼び出してみたいと思います。

Azure ADへのアプリの登録

Office 365 APIを呼び出すに当たり、Office 365アカウントとAzure ADの紐付けや、Azure ADへのアプリの登録を行う必要がありますが、ここでは、Office 365アカウントとAzure ADの紐付けがすでに終わっていることを前提として話を進めていきます。

  1. Azure portalにサインインし、Azure Active Directory → アプリの登録を開きます。
  2. 追加」ボタンをクリックし、名前アプリケーションの種類:ネイティブリダイレクト URI(私はローカルサーバーのXAMPPを使用していますが、環境は何でも構いません)を入力後、「作成」ボタンをクリックします。
  3. microsoftgraphjavascriptsdk_sample_01

  4. アプリが無事に登録されたら、「アプリケーション ID」(クライアント ID)をコピーしておきます。
  5. microsoftgraphjavascriptsdk_sample_02

  6. 必要なアクセス許可」から「Microsoft Graph」を選択します。
  7. microsoftgraphjavascriptsdk_sample_03

    microsoftgraphjavascriptsdk_sample_04

  8. アクセス許可の選択画面で必要に応じてスコープ設定するのですが、今回は「Read all users’ full profiles」と「Send mail as a user」の2つを選択しておきます。
  9. microsoftgraphjavascriptsdk_sample_05

  10. マニフェストの編集画面で「oauth2AllowImplicitFlow」の値を「true」に設定後、「保存」ボタンをクリックしてマニフェストを保存します(暗黙的な付与フローを許可)。
  11. microsoftgraphjavascriptsdk_sample_06

以上で、Azure ADへのアプリの登録作業は終了です。

Office 365 APIを呼び出すアプリの作成と動作確認

下準備が終わったら、次はいよいよアプリを作っていきます。

  1. GitHubからMicrosoft Graph JavaScript SDK一式をダウンロードします。
  2. テキストエディタに下記コードを貼り付け、アプリケーション ID(上記「Azure ADへのアプリの登録」手順3.)やメール情報等、必要に応じて変更し、Webページとして保存します。
  3. <!DOCTYPE html>
    <html>
      <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=Edge">
        <title>Microsoft Graph JavaScript SDK Sample</title>
        <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.1.1.min.js"></script>
        <script src="./lib/graph-js-sdk-web.js"></script>
        <script>
          var access_token;
          var client;
          var client_id = '(app id)'; //クライアント ID(アプリケーション ID) ※要変更
          var resource_uri = 'https://graph.microsoft.com/';
          var url_auth = 'https://login.microsoftonline.com/common/oauth2/authorize' +
                         '?response_type=token' +
                         '&client_id=' + client_id +
                         '&resource=' + encodeURIComponent(resource_uri) +
                         '&redirect_uri=' + encodeURIComponent(location.protocol + "//" + location.host + location.pathname);
          
          //メール情報 ※要変更
          var mail_subject = 'テストメール'; //件名
          var mail_to_name = 'テスト花子様'; //宛先名
          var mail_to_address = '(mail address)'; //宛先アドレス
          var mail_body = "いつも大変お世話になっております。\nテストメールを送信します。"; //メール本文
          
          $(function(){
            //access_tokenの取得
            if(location.hash){
              var hashary = location.hash.substr(1).split('&');
              $.each(hashary,function(i, v){
                var ary = v.split('=');
                if(ary[0] == 'access_token'){
                  access_token = ary[1];
                  $('#exec, #mail').prop('disabled', false);
                  //SDK初期化
                  client = MicrosoftGraph.init({
                    authProvider: (done) => {
                      done(null, access_token);
                    }
                  });
                  return false;
                }
              });
            }
            
            $('#login').click(function(){
              location.href = url_auth;
            });
            
            //API呼び出し
            $('#exec').click(function(){
              client.api('/me').select('displayName').get((err, res) => {
                if(err){
                  console.log(err);
                  return;
                }
                //console.log(res); //確認用
                alert(res.displayName);
              });
            });
            
            //メール送信
            $('#mail').click(function(){
              //メッセージ作成
              const mail = {
                subject: mail_subject,
                toRecipients: [{
                  emailAddress: {
                    name: mail_to_name,
                    address: mail_to_address
                  }
                }],
                body: {
                  content: mail_body,
                  contentType: 'Text'
                }
              }
              
              //メール送信
              client.api('/me/sendMail').post({message: mail}, (err, res) => {
                if(err){
                  console.log(err);
                  return;
                }
                alert('メールを送信しました。');
              });
            });
            
          });
        </script>
      </head>
      <body>
        <div id="contents">
          <button id="login">Login</button>
          <button id="exec" disabled="disabled">Show DisplayName</button>
          <button id="mail" disabled="disabled">Send Mail</button>
        </div>
      </body>
    </html>
  4. コードを見れば分かる通り、手順1.でダウンロードしたSDKは、下記のような形で読み込んでいます。
  5. <script src="./lib/graph-js-sdk-web.js"></script>
  6. 手順2.で保存したWebページ(https://localhost/msgraph-sdk-js/index.html)をブラウザーで開き、「Login」ボタンをクリックします。
  7. microsoftgraphjavascriptsdk_sample_07

  8. コンセント画面が表示されるので、内容を確認後「承諾」ボタンをクリックします。
  9. microsoftgraphjavascriptsdk_sample_08

  10. 無事に認証できると、アクセストークンがハッシュ値として返ってくるので、ここでようやくSDKを初期化することができます。
  11. client = MicrosoftGraph.init({
      authProvider: (done) => {
        done(null, access_token);
      }
    });
  12. ここまで来たらあとは簡単、下記コードのようにAPIを呼び出すことができます。
  13. client.api('/me').select('displayName').get((err, res) => {
      if(err){
        console.log(err);
        return;
      }
      alert(res.displayName);
    });

    microsoftgraphjavascriptsdk_sample_09

  14. Outlook メール REST APIのSendMailメソッドを使って、メール送信することもできます。
  15. microsoftgraphjavascriptsdk_sample_10

    microsoftgraphjavascriptsdk_sample_11

    microsoftgraphjavascriptsdk_sample_12

以上のように、SDKを使うと短いコードで簡単にAPIを呼び出すことができるので、非常に便利です。
詳しい使い方や、その他サンプルコードはGitHubに載っているので、興味がある方はそちらをご参照ください。

これで「Office 365 Advent Calendar 2016」2日目の記事は終了です。
明日は1日目と同じく、@naoki0311氏によるOffice 365勉強会の記事となる予定です。

コメント

  • コメント (0)

  • トラックバックは利用できません。

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

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP