2017-01-23

Azure Active Directory - Part 12 ( 使用 Javascript - adal.js 取得使用者資料)

前面文章 Azure Active Directory - Part 11 ( Azure AD 與 ASP.NET MVC 整合),介紹 ASP.NET MVC 與 Azure AD 的整合,節省了驗證相關功能開發的時間以及精力, 當然這樣的功能也不限只使用在 ASP.NET MVC 上,接著就來看看該如何使用 Javascript(adal.js) 登入 Azure AD 後再透過 Graph API 取得使用者資料.


adal.js(Active Directory Authentication Library for JavaScript) 是微軟 Azure AD 團隊開發來幫助開發人員來處理驗證的 Javascript library.

文章大綱

  1. 前置作業
  2. 設定驗證所需資訊
  3. 準備登入及登出動作
  4. 實際登入及取得 token
  5. 使用 token 取得使用者資料
  6. 實際效果

1. 前置作業

  1. 引用 adal.js

    <script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.11/js/adal.min.js"></script
  2. 準備 html 元件

    <div>
        <a id="login" class="btn btn-primary">Log in</a> |
        <a id="logout" class="btn btn-warning">Log out</a>
    </div>
    <p id="username"></p>
    <pre id="result"></pre>
    
    • id="login",id="logout", 是登入及登出觸發用
    • id="username" 是顯示使用者識別資訊顯示用
    • id="result" 是取得使用者資訊後顯示用

2. 設定驗證所需資訊

// 設定 adal 所需資訊
var authContext = new AuthenticationContext({
    clientId: '{clientId}',
    postLogoutRedirectUri: window.location
});
  • clientId
    • 應用程式識別碼

      1clientid

  • postLogoutRedirectUri
    • 登出後的導向 url

3. 準備登入及登出動作

$('#login').click(function() {
    authContext.login();
});
$('#logout').click(function () {
    authContext.logOut();
});

4. 實際登入及取得 token

if (authContext.isCallback(window.location.hash)) {
    // 處理要求 token 後的回應
    authContext.handleWindowCallback();
    var err = authContext.getLoginError();
    if (err) {
        $('#result').html('ERROR:\n\n' + err);
    }
} else {
    // 檢查是否登入
    var user = authContext.getCachedUser();
    if (user) {
        $('#username').html('Signed in as: ' + user.userName);
        $('#result').html('Getting access token...');

        // 取得可以用來存取 Microsoft Graph API 的 token
        authContext.acquireToken(
            'https://graph.microsoft.com',
            function (error, token) {
                if (error || !token) {
                    // TODO: Handle error obtaining access token
                    $('#result').html('ERROR:\n\n' + error);
                    return;
                }
                // 使用 token 去拿使用者資料
                getCurrentUser(token);
            }
        );
    } else {
        $('#username').html('Not signed in.');
    }
}

5. 使用 token 取得使用者資料

var getCurrentUser = function (access_token) {
    $('#result').html('Calling API...');
    $.ajax({
                url: 'https://graph.microsoft.com/v1.0/me',
                method: 'GET',
                headers: {
                    'Authorization': 'Bearer ' + access_token
                }
            })
            .success(function (data) {
                $('#result')
                    .html(
                        //JSON.stringify(JSON.parse(jqXHR.responseText), null, '  '));
                        JSON.stringify(data, null, '  '));
            })
            .error(function(data) {
                console.log(data);
                $('#result').html('ERROR:\n\n' + JSON.stringify(data, null, '  '));
            })
        ;
}

6. 實際效果

  1. 未登入

    2notlogin

  2. 登入並嘗試取得個人資訊

    3singin

  3. 取得個人資訊

    4personalinfo

7. 完整程式碼

請參考 adal.js-sample

參考資料

  1. Add authentication token to AJAX call for a Web API secured using Azure Active Directory authentication
  2. Active Directory Authentication Library (ADAL) for JavaScript
  3. adal.js-sample

沒有留言:

張貼留言