Microsoft Graph

Microsoft アカウント + v2.0 エンドポイント + JavaScriptでMicrosoft Graphを呼び出す方法

JavaScriptだけでMicrosoft Graphを呼び出す場合、これまでは下記記事のように面倒な手順を踏む必要がありました。

ところが、v2.0 エンドポイントの登場により、簡単に、しかもMicrosoft アカウントからでもGraph APIを呼び出せるようになりました。

はじめに

コードを書く前に、まずはクライアントIDの取得やアクセス許可の設定を行う必要があります。

  1. Application Registration Portal」にアクセスし、Microsoft アカウントでサインインします。
  2. マイ アプリケーション画面が表示されたら「アプリの追加」ボタンをクリックします。
  3. microsoftgraph_v2endpoint_01_01

  4. 新しいアプリケーションの登録画面が表示されたらアプリケーション名を入力し、「アプリケーションの作成」ボタンをクリックします。
  5. microsoftgraph_v2endpoint_01_02

  6. アプリケーションの登録画面が表示されたら「アプリケーション ID」(クライアントID)をメモ帳等にコピーします。
  7. microsoftgraph_v2endpoint_01_03

  8. プラットフォームの追加」ボタンをクリックし、「Web」を選択します。
  9. microsoftgraph_v2endpoint_01_04

  10. 暗黙的フローを許可する」にチェックを入れ、リダイレクト URI(作成するWebページのURL)を入力します。
  11. microsoftgraph_v2endpoint_01_05

  12. 処理内容に応じて「アクセス許可」を設定する必要がありますが、今回は「User.Read」だけにしておきます。
  13. microsoftgraph_v2endpoint_01_06

  14. プロファイルやサービス利用規約のURLは特に設定せず、そのまま「保存」ボタンをクリックして、アプリケーションの設定を保存します。
  15. microsoftgraph_v2endpoint_01_07

以上で準備は完了です。
次はいよいよコードを書いていきます。

Microsoft アカウント + v2.0 エンドポイント + JavaScriptでMicrosoft Graphを呼び出すコード

下記コードは、暗黙的フロー(Implicit Flow)でアクセス トークンを取得し、Microsoft Graphを呼び出して自分のプロファイルを取得します。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge">
    <title>v2.0 endpoint Sample</title>
    <script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.1.1.min.js"></script>
    <script>
      var access_token;
      var client_id = '(クライアントID)';
      var scope = 'https://graph.microsoft.com/user.read';
      var url_auth = 'https://login.microsoftonline.com/common/oauth2/v2.0/authorize' +
                     '?response_type=token' +
                     '&client_id=' + client_id +
                     '&redirect_uri=' + encodeURIComponent(location.protocol + "//" + location.host + location.pathname) +
                     '&scope=' + encodeURIComponent(scope);
      
      $(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').prop('disabled', false);
              return false;
            }
          });
        }
        
        $('#login').click(function(){
          location.href = url_auth;
        });
        
        //API呼び出し
        $('#exec').click(function(){
          //alert(access_token); //確認用
          $.ajax({
            url: 'https://graph.microsoft.com/v1.0/me',
            type: 'GET',
            beforeSend: function(xhr){
              xhr.setRequestHeader('Authorization', 'Bearer ' + access_token);
            },
            success: function(data){
              //console.log(data); //確認用
              alert(data.displayName);
            },
            error: function(data){
              console.log(data);
            }
          });
        });
      });
    </script>
  </head>
  <body>
    <div id="contents">
      <button id="login">Login</button>
      <button id="exec" disabled="disabled">Execute</button>
    </div>
  </body>
</html>

microsoftgraph_v2endpoint_01_08

microsoftgraph_v2endpoint_01_09

microsoftgraph_v2endpoint_01_10

microsoftgraph_v2endpoint_01_11

通常の承認コードフローでJavaScriptからアクセス トークンを取得しようとすると、クロスドメイン問題にぶつかるため、JavaScriptだけで処理を行う場合は、上記のように暗黙的フローでトークンを取得する必要があります。

処理内容の詳しい説明は松崎さんのブログにすべて載っているので、そちらをご参照ください(丸投げ)。

参考Webページ

関連記事

  1. Microsoft Graph

    [Google Apps Script]Office 365 unified APIを使ってメールを…

    久しぶりのGoogle Apps Scriptネタです。今回はGo…

  2. Office関連

    Microsoft Graph ExplorerがMicrosoft アカウント(MSA)に対応しま…

    Azure AD v2.0 エンドポイントによって、個人用Micros…

  3. Microsoft Graph

    [Google Apps Script]Microsoft Graph APIを使ってMicroso…

    Microsoft Graph APIを使って、OneDriveにある…

  4. Office関連

    Office 365 unified APIをVBAから呼び出す

    前回の記事で、VBAからOffice 365 APIを呼び出す手順につ…

  5. Office関連

    Microsoft Graph SDK for PHPを使ったAPIの呼び出しサンプル

    知らない間に(恐らくBuild 2017のタイミングに合わせて)Mic…

  6. Microsoft Graph

    Microsoft Graph .NET Client Libraryを使ったAPIの呼び出しサンプ…

    下記記事でMicrosoft GraphのPHP用SDKを紹介しました…

コメント

  • コメント (0)

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

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

Time limit is exhausted. Please reload CAPTCHA.

最近の記事

アーカイブ

RapidSSL_SEAL-90x50
PAGE TOP