#4 服務串接AAD OAuth — 簡單入門Azure AD

本文將說明如何幫自己的網站介接Azure AD的SSO登入功能，並取得使用者資料。另外也可以參考官方文件。

SSO原理#

網站使用Azure AD登入有兩個方式為OAuth與SAML，本篇教學將說明使用OAuth方式，更多資料可以閱讀微軟文件。

當我們使用OAuth驗證時，邏輯是這樣：

到網站點選Azure AD登入
跳轉到微軟登入畫面，使用者登入帳號密碼
驗證成功後，跳轉回原網站的callback網址，並帶一組token
網站後端用token取得使用者資料

我們這次範例，後端使用Cloudflare Worker，展示如何登入並取得使用者資料，範例的網址為https://aadsso.hchou.workers.dev，callback網址為https://aadsso.hchou.workers.dev/callback

申請AAD Secret#

我們需要申請AAD的Secret才能介接SSO，首先到Azure後台>Azure Active Directory>應用程式註冊>新增註冊，我們範例僅限組織成員登入就勾第一個，下面重新導向URI選擇Web，填入規劃的callback路徑。

建立好後，會到這個畫面，這裡要記一下應用程式識別碼、目錄識別碼之後會用到。

接下來點選”憑證及秘密”，新增用戶端密碼，產生一組Secret，把產生的值記下來。

再來到API權限，點選代表授予管理員同意

撰寫後端#

以Cloudflare Worker為例，這裡有兩頁網站，首頁有個AAD登入按鈕，另外有一個callback網址。

首頁長這樣

登入會，會顯示取得使用者的資訊的JSON

範例程式碼如下

1
const tenant_id = '<目錄識別碼>';
2
const client_id = '<應用程式識別碼>';
3
const client_secret = '<用戶端密碼>';
4
const callback_url = '<callback完整網址>';
5

6
export default {
7
  async fetch(request, env) {
8
    const url = new URL(request.url);
9
    const { pathname, search } = url;
10
    if (pathname == "/") {
11
      return await home(request);
12
    } else if (pathname == "/callback") {
13
      return await callback(request);
14
    }
15
  }
16
}
17

18
async function home(request) {
19
  const login = `https://login.microsoftonline.com/${tenant_id}/oauth2/v2.0/authorize?response_type=code&client_id=${client_id}&redirect_uri=${callback_url}&scope=user.read`;
20
  const html = `<!DOCTYPE html>
21
    <body>
22
      <h1>Test SSO</h1>
23
      <a href="${login}">Azure AD Login</a>
24
    </body>`;
25
  return new Response(html, {
26
    headers: {
27
      'content-type': 'text/html;charset=UTF-8',
28
    }
29
  });
30
}
31

32
async function callback(request) {
33
  var url = `https://login.microsoftonline.com/${tenant_id}/oauth2/v2.0/token`;
34
  const { searchParams } = new URL(request.url);
35
  let code = searchParams.get('code');
36
  var options = {
37
    method: 'POST',
38
    headers: {
39
      'content-type': 'application/x-www-form-urlencoded',
40
    },
41
    body: new URLSearchParams({
42
      client_id: client_id,
43
      client_secret: client_secret,
44
      code: code,
45
      redirect_uri: callback_url,
46
      grant_type: 'authorization_code'
47
    }).toString()
48
  };
49
  var response =  await fetch(url, options);
50
  var results = await response.json();
51

52
  var token = results["access_token"];
53
  url = `https://graph.microsoft.com/v1.0/me`;
54
  options = {
55
    method: 'GET',
56
    headers: {
57
      'Authorization': 'Bearer ' + token,
58
      'content-type': 'application/json'
59
    },
60
  };
61
  response =  await fetch(url, options);
62
  results = await response.text();
63

64
  return new Response(results);
65
}

接著講解一下各頁面，首頁比較簡單，只需要一個靜態的HTML，並超連結到微軟登入畫面。

Callback則比較複雜，微軟會回傳一個較Code的參數，需要以該參數取得Access Token，用token可以取得使用者資料，使用者資料欄位請參考微軟文件。

結語#

串接Azure AD SSO其實滿容易的，只需要開好應用程式與Secret，設好callback，就可以取得登入資訊。