-2

バニラJavaScriptベースのWebページがあります。 Azure Active Directory認証を使用して保護されているhttps://XYZ.azurewebsites.netというWeb APIを呼び出す必要があります。Azure Active Directory認証を使用してセキュリティ保護されたWeb APIのAJAX呼び出しに認証トークンを追加します。

これを行うために、ADAL.jsを自分のウェブサイトに追加しました。自分のウェブサイト/ webappをAADのNative Clientとして登録しました。私は静かに認証トークンを取得するコードの最小量についてはわかりません。

バニラJavaScriptで認証トークンを取得するために必要な最小限の手順は何ですか?

注:GitHubのAzure AD authで数多くのサンプルを見てきました。しかし、彼らはすべてレポを複製し、オーディエンス、テナントなどの価値を置き換えることを提案しています。私が必要とするのは、これらのサンプルのすべての膨らみのないコードを使わずに同じことをする単純なバニラJS関数です。 ADAL.JSを使用する

+0

をあなたは「黙って認証トークンを取得」とはどういう意味ですか。ユーザーにログインを促さずにトークンを取得しようとしているということですか? –

+0

使用しようとしたサンプルも指定できますか? –

+0

こんにちは、ユーザーにログインを促さずにトークンを取得できないのですか? – NatarajC

答えて

5

つ直接的なアプローチ(およびバニラのJavaScript):

  1. 構成AuthenticationContextのインスタンス。
  2. AuthenticationContext.login()を使用してログインしてください。
  3. トークン要求応答を処理するには、AuthenticationContext.handleWindowCallback()を使用してください。
  4. AuthenticationContext.acquireToken()を使用してアクセストークンを取得します。
  5. 受信したアクセストークンを使用してAPIリクエストを行います。ここで

Microsoft Graph APIへのアクセストークン(アズールADで保護APIの一例)を取得し、ログインしているユーザーのプロファイルを取得するために、AJAX呼び出しを行うためにそれを使用して、完全な最小限の例です。コメントの数字は上記の手順に対応しています。

(Iはまた、あなたがtry out liveをすることができ、わずかにより完全なバージョンでa Gistを掲載しました。)

<html> 
    <head> 
     <title>Minimal sample using ADAL.JS</title> 
     <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.11/js/adal.min.js"></script> 
    </head> 
    <body> 
     <p> 
      <!-- #2: Use ADAL's login() to sign in --> 
      <a href="#" onclick="authContext.login(); return false;">Log in</a> | 
      <a href="#" onclick="authContext.logOut(); return false;">Log out</a> 
     </p> 

     <script type="text/javascript"> 

      // #1: Set up ADAL 
      var authContext = new AuthenticationContext({ 
       clientId: 'c24f035c-1ff6-4dfa-b76d-c75a29ad2c3c', 
       postLogoutRedirectUri: window.location 
      }); 

      // #3: Handle redirect after token requests 
      if (authContext.isCallback(window.location.hash)) { 

       authContext.handleWindowCallback(); 
       var err = authContext.getLoginError(); 
       if (err) { 
        // TODO: Handle errors signing in and getting tokens 
       } 

      } else { 

       // If logged in, get access token and make an API request 
       var user = authContext.getCachedUser(); 
       if (user) { 

        console.log('Signed in as: ' + user.userName); 

        // #4: Get an access token to the Microsoft Graph API 
        authContext.acquireToken(
         'https://graph.microsoft.com', 
         function (error, token) { 

          // TODO: Handle error obtaining access token 
          if (error || !token) { return; } 

          // #5: Use the access token to make an AJAX call 
          var xhr = new XMLHttpRequest(); 
          xhr.open('GET', 'https://graph.microsoft.com/v1.0/me', true); 
          xhr.setRequestHeader('Authorization', 'Bearer ' + token); 
          xhr.onreadystatechange = function() { 
           if (xhr.readyState === 4 && xhr.status === 200) { 
            // TODO: Do something with the response 
            console.log(xhr.responseText); 
           } else { 
            // TODO: Do something with the error 
            // (or other non-200 responses) 
           } 
          }; 
          xhr.send(); 
         } 
        ); 
       } else { 

        console.log('Not signed in.') 
       } 
      } 
     </script> 
    </body> 
</html> 
+0

こんにちは、ユーザーにログインを促さずにトークンを取得することはできませんか? – NatarajC

+0

ユーザーがすでにサインインしていて、セッションをリフレッシュして新しいトークンを取得したいだけの場合は、 –

+0

こんにちは、遅く返事を申し訳ありません、私はリフレッシュトークンを意味しない、私はリフレッシュが静かであることを知っている。私が意図したことは、UserPasswordCredential(ユーザー、パスワード)を使用してhttps://azure.microsoft.com/en-us/resources/samples/active-directory-dotnet-native-headless/に似ていますが、これをJavascriptで特に達成する方法、私はADAL.jsでそのようなAPIを参照しないでください 答えを見てくださいhttps://stackoverflow.com/questions/43607308/how-to-silently-get-access-token-to-user-subscription-azure-認証の可能なタイプのバッチ、私が達成したいのは、2番目のオプションとJavascriptです。 – NatarajC

関連する問題