如果你在 Azure Artifacts 建立一個 npm Registry 讓前端團隊存取私有的 npm 套件,最先需要克服的問題就是要如何通過身分認證,但這部分的設定在 Windows 與在 Linux/macOS 設定步驟是不一樣的,這篇文章將說明如何正確的在 Windows 與 Linux/macOS 進行設定。
Windows
在 Windows 設定相對簡單很多,只要安裝一個 vsts-npm-auth 工具,然後執行驗證程序即可,以下是需要設定的 3 個步驟。
-
在專案根目錄加入一個 .npmrc
檔案
如果所有套件都要透過 Azure Artifacts 下載,直接拿 Azure Artifacts 的 Feed 當作 Proxy 來用,那麼你可以這樣設定:
registry=https://ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/registry/
always-auth=true
注意: ORGNAME
與 FEEDNAME
是變數,請依照你的設定來修改!
如果你的 npm 套件被定義在 scoped package 之下的話,假設你的 scoped package 是 @miniasp
,那麼你可以這樣設定:
registry=https://registry.npmjs.org/
@miniasp:registry=https://ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/registry/
always-auth=true
這樣的設定可以讓大部分 npm 套件都從 registry.npmjs.org
取得,只有公司內部的 npm 套件從 Azure Artifacts 取得。
-
安裝一個 vsts-npm-auth 認證工具 (Windows only)
這套 vsts-npm-auth
工具是專門設計給 Windows 使用的,雖然這是一個 npm 套件,但只有 Windows 可以正常執行喔!
我們先安裝這套工具起來:
npm install -g vsts-npm-auth
-
執行驗證程序
這套 vsts-npm-auth
工具會自動引導你到 Azure AD (Entra ID) 進行登入,而且也支援 MFA 多因素驗證,使用上還算簡單。
使用方式如下,這裡的 -config
可以指定你的 .npmrc
檔案:
vsts-npm-auth -config .npmrc
執行時產生的訊息如下:
vsts-npm-auth v0.42.1.0
-----------------------
Getting new credentials for source:https://ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/registry/, scope:vso.packaging_write vso.drop_write
這個執行過程並不會修改專案下的 .npmrc
檔案的內容,而是將認證資訊儲存在你的 $HOME
目錄下的 ~/.npmrc
檔案中。
注意:執行認證的過程會自動幫你在 Azure DevOps Service 建立一個 90 天效期的 PAT 權杖(Personal Access Token),這個 PAT 的名稱是 Packaging clients: https://ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/registry/ on XXXXXXXX
,如果你跑很多次的話,就會建立很多份 PAT 權杖。
這份 PAT 擁有的權限包含了 vso.packaging_write
與 vso.drop_write
這兩個權限,但我從官方的 scopes.md 文件中查不到 vso.drop_write
的說明,不過我很確定 vso.packaging_write
就是可以針對 Artifacts 套件庫進行讀取與寫入的權限。
Linux / macOS / Container
在 non-Windows 平台設定也不是多麻煩,就是 PAT 要自己建立而已,以下是需要設定的 4 個步驟。
-
在專案加入一個 .npmrc
檔案
如果所有套件都要透過 Azure Artifacts 下載,直接拿 Azure Artifacts 的 Feed 當作 Proxy 來用,那麼你可以這樣設定:
registry=https://ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/registry/
always-auth=true
注意: ORGNAME
與 FEEDNAME
是變數,請依照你的設定來修改!
如果你的 npm 套件被定義在 scoped package 之下的話,假設你的 scoped package 是 @miniasp
,那麼你可以這樣設定:
registry=https://registry.npmjs.org/
@miniasp:registry=https://ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/registry/
always-auth=true
這樣的設定可以讓大部分 npm 套件都從 registry.npmjs.org
取得,只有公司內部的 npm 套件從 Azure Artifacts 取得。
-
人工建立一個 PAT 權杖(Personal Access Token)
建立 PAT 的時候,除了設定 Name
, Organization
跟 Expiration
欄位外,最重要的就是選擇 Scopes
欄位,記得套用最小權限原則下去設定,並且選擇 Packaging
這個分類下的 Scope,其權限有 Read
, Read & write
與 Read, write, & manage
。
建立完 PAT 權杖之後,要記得先把 PAT 權杖的內容複製起來,因為這個 PAT 權杖只會顯示一次,之後就無法再看到了!
-
將以下內容加入 ~/.npmrc
檔案中
; begin auth token
//ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/registry/:username=miniasp
//ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/registry/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/registry/:email=npm requires email to be set but doesn't use the value
//ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/:username=miniasp
//ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/:_password=[BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
//ORGNAME.pkgs.visualstudio.com/_packaging/FEEDNAME/npm/:email=npm requires email to be set but doesn't use the value
; end auth token
上述的 [BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
是我們在下個步驟要替換掉的變數。
-
將 PAT 先轉換成 Base64 編碼字串
你可以使用 Linux 內建的 base64
命令列工具:
echo 'ljb5cl745ljblllxa4gloj2qkzm44sie7naz7w46funigr6wb5lq' | base64
也可以透過 Node.js 來幫我們轉成 Base64 編碼字串:
node -e "require('readline') .createInterface({input:process.stdin,output:process.stdout,historySize:0}) .question('PAT> ',p => { b64=Buffer.from(p.trim()).toString('base64');console.log(b64);process.exit(); })"
執行上述命令後會看到 PAT>
提示字元,貼上 PAT
並按下 Enter 鍵,就會看到 PAT 的 Base64 編碼結果,請將這個結果取代掉 ~/.npmrc
檔案中的 [BASE64_ENCODED_PERSONAL_ACCESS_TOKEN]
變數。
我不建議你將這些密碼寫在專案的 .npmrc
檔案中,因為你很有可能會意外的將這些憑證資訊加入到 Git 版控裡,那就不是很理想了。
相關連結