J2L3x 是一款流行的團(tuán)隊(duì)協(xié)作工具,而 Verdaccio 是一個(gè)管理和分享前端軟件開發(fā)包。將 J2L3x 與 Verdaccio 集成可以幫助團(tuán)隊(duì)更好地管理和分享代碼。
以下是將 J2L3x 與 Verdaccio 集成的步驟:
開發(fā)者使用 NPM、PNPM 等包管理員工具訪問 Verdaccio 倉(cāng)庫(kù)時(shí)(下載依賴包或發(fā)布包),可以使用 J2L3x 提供的 OpenID Connect(OIDC) 服務(wù)進(jìn)行用戶認(rèn)證,這樣團(tuán)隊(duì)成員可以直接使用自己的 J2L3x 賬戶,不需要在 Verdaccio 中單獨(dú)創(chuàng)建賬戶;如果有團(tuán)隊(duì)成員離職,只需要關(guān)閉他的 J2L3x 賬戶,同時(shí)也就關(guān)了對(duì) Verdaccio 倉(cāng)庫(kù)的訪問權(quán)限,非常便捷。
1、停止之前啟動(dòng)的 Verdaccio 服務(wù),在命令行中執(zhí)行以下命令:
docker-compose -p verdaccio down
|
2、J2L3x 管理員在 J2L3x 中為 Verdaccio 創(chuàng)建應(yīng)用
a. 在 J2L3x 中導(dǎo)航到 “集成 → OAuth 2.0 應(yīng)用 → 添加 OAuth 2.0 應(yīng)用”
b. 在表單中填入以下內(nèi)容:
注:
· “首頁(yè)” 填寫為團(tuán)隊(duì)成員訪問 Verdaccio 倉(cāng)庫(kù)網(wǎng)站的首頁(yè)地址
· “回調(diào)地址” 填寫為 首頁(yè)地址/oidc/callback
保存后會(huì)得到 Verdaccio 應(yīng)用的 “客戶端 ID” 和 “客戶端密鑰”,注意保密。
3、編輯 conf 文件夾中的配置文件 config.yaml ,修改 auth 部分為以下內(nèi)容:
# https://verdaccio.org/docs/configuration#authentication auth: openid-connect: # Verdaccio public URL. If served on a subpath, make sure to include a # trailing slash. publicUrl: http://localhost:4873/ # OpenID Connect Issuer URL issuer: https://xxxx/oidc # OpenID Connect Client ID clientId: 'xxxxxxxx' # OpenID Connect Client Secret clientSecret: 'xxxxxxxx' # OpenID Connect Scopes scope: openid profile email offline_access # Optional id_token claim that will be used for username usernameClaim: preferred_username # Optional switch to alternative login method, using access token as password. # The username must be the same as the one used to acquire the access token, # the password must be an OIDC access token. The e-mail address will be ignored. # If not set, the regular authentication flow will be used. accessTokenAuth: false # Session files (persistent) storage path and token files (temporary for short-lived files) storage path: will be used if redisUri not set fsSessionStorePath: /tmp fsTokenStorePath: /tmp htpasswd: file: /verdaccio/conf/htpasswd # Maximum amount of users allowed to register, defaults to "+inf". # You can set this to -1 to disable registration. max_users: -1 # Hash algorithm, possible options are: "bcrypt", "md5", "sha1", "crypt". algorithm: bcrypt # by default is crypt, but is recommended use bcrypt for new installations # Rounds number for "bcrypt", will be ignored for other algorithms. rounds: 10 |
· publicUrl 填寫為團(tuán)隊(duì)成員訪問 Verdaccio 倉(cāng)庫(kù)的地址,需要包含尾部斜杠 /
· issuer 填寫為 J2L3x 服務(wù)器地址/oidc
· clientId 和 clientSecret 填寫創(chuàng)建 Verdaccio 應(yīng)用時(shí)得到的 “客戶端 ID” 和 “客戶端密鑰”
4、啟動(dòng) verdaccio 服務(wù)
a. 如果是在桌面操作系統(tǒng)中操作,需要打開命令行終端
b. 在命令行中定位到 verdaccio 文件夾位置
c. 在命令行中執(zhí)行以下命令
docker-compose -p verdaccio up -d
|
5、登錄 Verdaccio 倉(cāng)庫(kù)
a. 如果是在桌面操作系統(tǒng)中操作,需要打開命令行終端
b. 在命令行中執(zhí)行以下命令
# 修改 “http://localhost:4873/” 為團(tuán)隊(duì)成員訪問 Verdaccio 倉(cāng)庫(kù)的地址 npm login --registry http://localhost:4873/ |
c. 執(zhí)行以上命令后,會(huì)自動(dòng)或提示打開瀏覽器訪問 J2L3x 的用戶認(rèn)證頁(yè)面,認(rèn)證成功后頁(yè)面會(huì)提示 “You may close this page now.”,表示已成功登錄 Verdaccio 倉(cāng)庫(kù);如果 J2L3x 在瀏覽器中已處于登錄狀態(tài),則打開的瀏覽器窗口會(huì)自動(dòng)關(guān)閉,無需再次認(rèn)證
注:每次重啟 verdaccio 服務(wù)后,需要重新登錄 Verdaccio 倉(cāng)庫(kù)才能正常訪問。
使用 J2L3x 的 “傳入 Webhook”,可以實(shí)現(xiàn)當(dāng)有團(tuán)隊(duì)成員發(fā)布包到 Verdaccio 倉(cāng)庫(kù)后,會(huì)自動(dòng)發(fā)消息通知到 J2L3x 的頻道成員,不需要人工通知,提高協(xié)作效率。
1、停止之前啟動(dòng)的 服務(wù),在命令行中執(zhí)行以下命令:
docker-compose -p verdaccio down
|
2、J2L3x 管理員在 J2L3x 中為 Verdaccio 創(chuàng)建 “傳入 Webhook****”****
a. 在 J2L3x 中導(dǎo)航到 “集成 → 傳入 Webhooks → 添加傳入 Webhook”
b. 在表單中填入以下內(nèi)容:
3、編輯 conf 文件夾中的配置文件 config.yaml,在文件末尾輸入以下內(nèi)容:
# https://verdaccio.org/docs/notifications notify: method: POST headers: [{ 'Content-Type': 'application/json' }] endpoint: https://xxxx content: '{"text":"@{{ publisher.name }} 發(fā)布了 **{{ publishedPackage }}** 到 Verdaccio 倉(cāng)庫(kù)"}' |
endpoint 填寫為先前得到的 “Webhook 網(wǎng)址”
content 是通知到 J2L3x 頻道的消息格式,詳細(xì)信息請(qǐng)參考 Verdaccio 官方文檔 Notifications
4、啟動(dòng) verdaccio 服務(wù)
a. 如果是在桌面操作系統(tǒng)中操作,需要打開命令行終端
b. 在命令行中定位到 verdaccio 文件夾位置
c. 在命令行中執(zhí)行以下命令
docker-compose -p verdaccio up -d
|
5、登錄 Verdaccio 倉(cāng)庫(kù),在命令行中執(zhí)行以下命令:
# 修改 “http://localhost:4873/” 為團(tuán)隊(duì)成員訪問 Verdaccio 倉(cāng)庫(kù)的地址 npm login --registry http://localhost:4873/ |
6、發(fā)布一個(gè)包到 Verdaccio 倉(cāng)庫(kù),在命令行中定位到需要發(fā)布的項(xiàng)目位置,然后執(zhí)行以下命令:
# 修改 “http://localhost:4873/” 為團(tuán)隊(duì)成員訪問 Verdaccio 倉(cāng)庫(kù)的地址 npm login --registry http://localhost:4873/ |
命令執(zhí)行成功后,查看接收通知的 J2L3x 頻道,如果收到了消息,則表示操作成功。
將 J2L3x 與 Verdaccio 集成的好處如下:
1、即時(shí)通知:J2L3x 與 Verdaccio 集成可以通過 J2L3x 中的機(jī)器人自動(dòng)向您的團(tuán)隊(duì)成員發(fā)布 Verdaccio 事件 和通知。這使得團(tuán)隊(duì)成員可以更快地做出反應(yīng),并更快地解決任何問題。
2、更好的協(xié)作:通過 J2L3x 和 Verdaccio 集成,團(tuán)隊(duì)成員可以更好地討論和共享關(guān)于 NPM 包的問題,更好的了解 NPM 包的變化和更新,共同解決問題。例如:其中一個(gè)成員發(fā)布包到 Verdaccio 倉(cāng)庫(kù),會(huì)自動(dòng)發(fā)消息通知到 J2L3x 的頻道成員。其他成員可以直接在 J2L3x 里了解到包名稱和版本號(hào)等。
有關(guān)更多的信息,請(qǐng)參見 J2L3x 官方文檔。