問題描述
實作部署NodeJS Express應用在App Service Linux環境中,并且使用Microsoft Authentication Library(MSAL)來實作登入Azure AD使用者,擷取Token及使用者資訊的實作。
終極實作效果展示:

本實作中,最重要的兩個步驟為:
1)根據文檔“ Tutorial: Sign in users and acquire a token for Microsoft Graph in a Node.js & Express web app” 實作本地運作成功
2)根據文檔" 在 Azure 中建立 Node.js Web 應用 " 把應用部署在App Service Linux環境中,然後在Configuration中添加Application Setting(REDIRECT_URI 和 POST_LOGOUT_REDIRECT_URI)
實驗步驟
第一步:建立本地NodeJS Express + MSAL 項目
在第一個文檔中,主要的步驟有(文檔連結:https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-nodejs-webapp-msal)
如果想自己寫代碼,則必看。如果不用寫代碼,可以在文中下載下傳源代碼。但也必看1,4兩部分内容。
-
Register the application in the Azure portal
-
Create an Express web app project
-
Install the authentication library packages
-
Add app registration details
-
Add code for user login
-
Test the app
根據文檔,主要注意修改的地方有兩處:
一:.env環境變量檔案中的相應值需要根據在Azure AD中注冊的内容修改。可以參考以下内容(本文實作在中國區Azure,是以相關endpoint都為中國區Azure終結點)
CLOUD_INSTANCE=https://login.partner.microsoftonline.cn/ # cloud instance string should end with a trailing slash
TENANT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx #Enter_the_Tenant_Info_Here
CLIENT_ID=xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxxxx # Enter_the_Application_Id_Here
CLIENT_SECRET=x-x.xxxxxxxxxxxx # Enter_the_Client_Secret_Here
REDIRECT_URI=http://localhost:3000/auth/redirect
POST_LOGOUT_REDIRECT_URI=http://localhost:3000
GRAPH_API_ENDPOINT=https://microsoftgraph.chinacloudapi.cn/ # graph api endpoint string should end with a trailing slash
EXPRESS_SESSION_SECRET=Enter_the_Express_Session_Secret_Here
- CLOUD_INSTANCE:根據使用的Azure環境決定,如果是中國區Azure,則是https://login.partner.microsoftonline.cn/ ,如果是全球Azure,則是 https://login.microsoftonline.com/ ,更多請見:https://docs.microsoft.com/en-us/azure/active-directory/develop/authentication-national-cloud
- TENANT_ID:應為在Azure AD中所注冊應用的Tenant ID
- CLIENT_ID:應為在Azure AD中所注冊應用的Application ID
- CLIENT_SECRET:将此值替換為先前建立的用戶端機密。 若要生成新密鑰,請在 Azure 門戶的應用注冊設定中使用“證書和機密”
- REDIRECT_URI:通路應用時,指定回調頁面URL
- POST_LOGOUT_REDIRECT_URI:點選Logout後,回調到首頁的設定
- GRAPH_API_ENDPOINT: Microsoft Graph API 的終結點,中國區Azure為:https://microsoftgraph.chinacloudapi.cn/ ,全球Azure為:https://graph.microsoft.com/
- EXPRESS_SESSION_SECRET:這是用于登入Express Seesion 的機密,選擇一個随機的字元串就可以,本實驗中可以不用修改
(以上頁面由 https://portal.azure.cn/#blade/Microsoft_AAD_IAM/ActiveDirectoryMenuBlade/RegisteredApps 頁面中選擇進入)
二:文中在第5步中添加使用者登入和擷取Token的部分,需要自己在項目 routes檔案夾中添加 auth.js 檔案,并輸入這一部分中的代碼。原文中這一點寫的不明确,如果對NodeJS項目不夠了解情況下,會遇見 cannot find module './routes/auth'的異常。
完整的代碼可從此處下載下傳:https://files.cnblogs.com/files/lulight/ExpressWebApp.zip
第二步:部署到App Service For Linux環境并配置AAD參數
通過VS Code部署,包含通過Kudu管理平台檢視home/site/wwwroot下的目錄檔案
添加Application Setting REDIRECT_URI, POST_LOGOUT_REDIRECT_URI
修改Azure AD中注冊應用的Redirect URL : https://<your app service name>.chinacloudsites.cn/auth/redirect
示範動畫如下:
參考資料
Tutorial: Sign in users and acquire a token for Microsoft Graph in a Node.js & Express web app: https://docs.microsoft.com/en-us/azure/active-directory/develop/tutorial-v2-nodejs-webapp-msal
在 Azure 中建立 Node.js Web 應用:https://docs.azure.cn/zh-cn/app-service/quickstart-nodejs?tabs=linux&pivots=development-environment-vscode#deploy-to-azure
Quickstart: Register an application with the Microsoft identity platform:https://docs.microsoft.com/en-us/azure/active-directory/develop/quickstart-register-app
Azure China developer guide: https://docs.microsoft.com/en-us/azure/china/resources-developer-guide
當在複雜的環境中面臨問題,格物之道需:濁而靜之徐清,安以動之徐生。 雲中,恰是如此!