終於進入實作階段了！其實不是不想寫技術內容，而是軟體專案本身事無巨細、環環相扣，因此才能真正開始動工。好啦，再拖下去就得換主題了。我們來聊聊前端與後端的驗證與溝通。本案希望透過 Microsoft Entra ID，在前端完成身分驗證後取得 token，並在每次對後端發送 Request 時夾帶該 token，供後端驗證與身分識別。詳細作業流程圖如下：

圖9-1：展示前端與後端之間的身分識別機制。紅框標記的部分，是我們今天要抵達的目標。

捲起袖子，開始實作吧

實作使用 Azure Entra ID 進行登入，作為前後端與後端之間溝通的身分驗證方法，目標實現以下操作：

• 使用者點選登入後，透過 Microsoft Authentication 彈出 Azure AD 登入視窗，讓使用者進行登入
• 成功登入後，可以取得使用者帳號資訊與 access token，用於後續的 API 驗證。

1. 安裝套件 azure/msal-browser

npm install @azure/msal-browser

2. 至 Azure 入口網站註冊，申請 Microsoft Entra ID 應用程式註冊，取得 client ID

3. 修改 LoginPage.vue
   3.1 已經有登入的模板，可直接使用登入頁的按鈕進行實作。於登入按鈕的 click 事件中新增呼叫 msalInstance，並將 client ID 資訊填入 scopes 後方。
   3.2 授權成功後，可以透過 loginResponse 取得 token 與登入者相關資訊，將這些資訊儲存於前端 localStorage 中。
   3.3 後續會透過 localStorage 中 user 存放的資訊，與後端 API 溝通的驗證資訊。詳細存取的資料欄位，可參考 微軟 MSAL.js 單一登入說明

//LoginPage.vue
import msalInstance from '@/stores/msalConfig';
const loginResponse: AuthenticationResult = await msalInstance.loginPopup({
          scopes: ['api://xxxxxxxxxxxxxxxxxxxxxxxx/ReadProfile']
});
if ( loginResponse.account) {
     console.log('Login successful:', loginResponse);
       this.user.id = loginResponse.account.homeAccountId;
       this.user.username = loginResponse.account.username;
       this.user.firstName = loginResponse.account.name?.split(' ')[0] || '';
       this.user.lastName = loginResponse.account.name?.split(' ')[1] || '';
       this.user.token = loginResponse.accessToken;
       this.user.useraccess = null;
       localStorage.setItem('user', JSON.stringify(this.user));
}

4. 啟動 vue3 站台

npm run dev

圖9-2：啟動後，可跳轉至登入頁並點擊登入按鈕

圖9-3 : 點擊後會自動開啟跳窗，導向 微軟 Entra ID 驗證畫面

圖9-4 : 自動導向企業組織認證後，輸入帳號與密碼資訊

圖9-5 : 驗證完成後，查看前端 log，確認 loginResponse 資訊內容

圖9-6 : 確認 Store 中存放的資訊

Ending Remark

今日重點在於實現 前端與後端的身份驗證與溝通。流程採用 Microsoft Entra ID，前端完成登入後取得 access token，並在每次向後端發送 API 請求時夾帶 token，以便後端驗證使用者身份。

主要步驟包括：

1. 安裝 @azure/msal-browser 套件。

2. 在 Azure 入口網站註冊 Entra ID 應用程式，取得 client ID。

3. 修改 LoginPage.vue，實作登入按鈕事件呼叫 msalInstance，授權成功後將使用者資訊與 token 存入 localStorage。

4. 啟動 Vue3 前端站台，完成登入流程，確認前端 log 與 store 中的使用者資料。