如何用 MSAL 在 Refine 中接入 Azure AD B2C 登錄【免費下載鏈接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.項目地址: https://gitcode.com/GitHub_Trending/re/refine假設(shè)你已經(jīng)在用 Refine 做了一個內(nèi)部管理應(yīng)用現(xiàn)在不想再維護自己的賬號密碼而是讓企業(yè)用戶直接用 Azure AD B2C 的社交賬號、企業(yè)賬號或本地賬號登錄。目標(biāo)結(jié)果是應(yīng)用打開時先經(jīng)過一個登錄頁點擊按鈕跳轉(zhuǎn)到 Azure B2C 登錄頁登錄成功后應(yīng)用保存訪問令牌并自動把它附加到后續(xù)的數(shù)據(jù)請求上。Refine 官方的 Azure AD 文檔 走的就是這條路用 Microsoft Authentication LibraryMSAL的 JavaScript 版本azure/msal-browser加 React 輔助包azure/msal-react完成認(rèn)證再由 Refine 的authProvider接管登錄態(tài)判斷。文檔以 Azure AD B2C 為例并說明用普通 Azure AD 做認(rèn)證的步驟與之非常相似。下面按文檔給出的順序逐步接入。代碼示例基于 antd UI 集成refinedev/antd和refinedev/react-router路由。安裝 MSAL 依賴在 Refine 項目根目錄安裝兩個包三個包管理器任選其一# npm npm i azure/msal-browser azure/msal-react # pnpm pnpm add azure/msal-browser azure/msal-react # yarn yarn add azure/msal-browser azure/msal-react這兩個包分別提供 MSAL 的瀏覽器端實現(xiàn)PublicClientApplication、事件回調(diào)等和 React 集成MsalProvider、useMsal、useIsAuthenticated等 hook。創(chuàng)建 MSAL 配置文件在src/config.ts中創(chuàng)建 MSAL 配置。文檔給出的完整內(nèi)容如下其中帶YOUR_前綴的字符串是占位符需要替換為你自己在 Azure 租戶中申請到的值每個占位符對應(yīng)的環(huán)境變量寫法文檔已用注釋保留在代碼里按注釋中的寫法接入自己的環(huán)境變量即可import { Configuration, LogLevel } from azure/msal-browser; export const msalConfig: Configuration { auth: { clientId: YOUR_CLIENT_ID, //${process.env.REACT_APP_AZURE_AAD_CLIENT_ID}, authority: YOUR_AUTHORITY, //https://${process.env.REACT_APP_AZURE_AAD_TENANT_NAME}.b2clogin.com/${process.env.REACT_APP_AZURE_AAD_TENANT_NAME}.onmicrosoft.com/${process.env.REACT_APP_AZURE_AAD_POLICY_NAME}, knownAuthorities: [YOUR_KNOWN_AUTHORITIES], //[${process.env.REACT_APP_AZURE_AAD_TENANT_NAME}.b2clogin.com], redirectUri: http://localhost:3000/, // Replace appropriately postLogoutRedirectUri: window.location.origin, }, cache: { cacheLocation: sessionStorage, // This configures where your cache will be stored storeAuthStateInCookie: false, // Set this to true if you are having issues on IE11 or Edge }, }; // Add scopes here for ID token to be used at Microsoft identity platform endpoints. export const loginRequest { scopes: [User.Read] }; export const tokenRequest { scopes: [...] // Replace ... with your custom scopes }; // Add the endpoints here for Microsoft Graph API services youd like to use. export const graphConfig { graphMeEndpoint: ENTER_THE_GRAPH_ENDPOINT_HERE/v1.0/me };幾個需要替換或確認(rèn)的位置clientId、authority、knownAuthorities來自你的 Azure B2C 租戶與客戶端應(yīng)用注冊。按代碼注釋中的環(huán)境變量形式拼接后authority形如https://tenant.b2clogin.com/tenant.onmicrosoft.com/policyknownAuthorities為tenant.b2clogin.com。redirectUri登錄完成后跳回的地址文檔示例為http://localhost:3000/注釋要求按你的實際部署地址替換Replace appropriately。tokenRequest.scopes代碼里的...是占位文檔注釋明確要求替換成你需要的自定義 scopes。graphConfig只有你要調(diào)用 Microsoft Graph API 時才需要按注釋填入實際的 Graph 端點即可不需要 Graph 可以忽略這一節(jié)。文檔建議用環(huán)境變量管理這些配置參數(shù)而不是把值直接寫死在代碼里。用 MsalProvider 包裹根組件修改src/index.tsx創(chuàng)建PublicClientApplication實例監(jiān)聽LOGIN_SUCCESS事件——登錄成功后先靜默獲取訪問令牌成功后寫入localStorage靜默獲取失敗時回退到彈窗方式獲取。同時用MsalProvider包裹整個應(yīng)用import React from react; import ReactDOM from react-dom/client; import { EventType, PublicClientApplication, AccountInfo, EventPayload, SilentRequest, } from azure/msal-browser; import { MsalProvider } from azure/msal-react; import App, { TOKEN_KEY } from ./App; import { msalConfig, tokenRequest } from ./config; const msalInstance new PublicClientApplication(msalConfig); msalInstance.addEventCallback(async (event) { if (event.eventType EventType.LOGIN_SUCCESS) { const payload: EventPayload event.payload; msalInstance.setActiveAccount(payload as AccountInfo); let account msalInstance.getActiveAccount(); const request: SilentRequest { ...tokenRequest, account: account!, }; try { // Silently acquires an access token which is then attached to a request for API access const response await msalInstance.acquireTokenSilent(request); console.log(Fetching access token: success); console.log(Scopes, response.scopes); console.log(Token Type, response.tokenType); localStorage.setItem(TOKEN_KEY, response.accessToken); } catch (e) { msalInstance.acquireTokenPopup(request).then((response) { localStorage.setItem(TOKEN_KEY, response.accessToken); }); } } }); const root ReactDOM.createRoot( document.getElementById(root) as HTMLElement, ); root.render( React.StrictMode MsalProvider instance{msalInstance} App / /MsalProvider /React.StrictMode, );這里TOKEN_KEY是從App.tsx導(dǎo)入的常量取值refine-auth后面保存令牌、讀取令牌都通過它進行。覆蓋 Refine 的登錄頁Refine 允許覆蓋默認(rèn)登錄頁。在src/下創(chuàng)建login.tsx用一個按鈕觸發(fā)useLogin()實際跳轉(zhuǎn)由authProvider.login里的loginRedirect()完成import React from react; import { useLogin } from refinedev/core; import { Layout, Button } from antd; const LoginPage () { const SignInButton () { const { mutate: login } useLogin(); return ( Button typeprimary sizelarge block onClick{() login()} Sign in /Button ); }; return ( Layout style{{ background: radial-gradient(50% 50% at 50% 50%, #63386A 0%, #310438 100%), backgroundSize: cover, }} div style{{ height: 100vh, display: flex }} div style{{ maxWidth: 200px, margin: auto }} div style{{ marginBottom: 28px }} img src./refine.svg altRefine / /div SignInButton / /div /div /Layout ); }; export default LoginPage;編寫 authProvider 與請求令牌注入核心在src/App.tsx定義AuthProvider讓 Refine 的登錄態(tài)完全由 MSAL 的賬號和令牌驅(qū)動同時給 axios 實例加請求攔截器把localStorage中的令牌寫進Authorization請求頭import { Refine, AuthProvider, Authenticated } from refinedev/core; import { Layout, ErrorComponent } from refinedev/antd; import routerProvider, { NavigateToResource, CatchAllNavigate, } from refinedev/react-router; import dataProvider from refinedev/simple-rest; import { useIsAuthenticated, useMsal } from azure/msal-react; import { AccountInfo, SilentRequest } from azure/msal-browser; import axios from axios; import { BrowserRouter, Routes, Route, Outlet } from react-router; import LoginPage from ./login; import { tokenRequest } from ./config; export const TOKEN_KEY refine-auth; export const axiosInstance axios.create(); axiosInstance.interceptors.request.use( // Here we can perform any function wed like on the request (config) { // Retrieve the token from local storage const token localStorage.getItem(TOKEN_KEY); // Check if the header property exists if (config.headers) { // Set the Authorization header if it exists config.headers[Authorization] Bearer ${token}; } return config; }, ); const App: React.FC () { const API_URL https://api.fake-rest.refine.dev; const isAuthenticated useIsAuthenticated(); const { instance, inProgress, accounts } useMsal(); if (inProgress login || inProgress handleRedirect) { return divLoading.../div; } const account: AccountInfo accounts[0]; const request: SilentRequest { ...tokenRequest, account, }; const authProvider: AuthProvider { login: async () { instance.loginRedirect(); // Pick the strategy you prefer i.e. redirect or popup return { success: true, }; }, register: async () ({ success: true, }), resetPassword: async () ({ success: true, }), updatePassword: async () ({ success: true, }), logout: async () ({ success: true, }), check: async () { try { if (account) { const token await instance.acquireTokenSilent(request); localStorage.setItem(TOKEN_KEY, token.accessToken); return { authenticated: true, }; } else { return { authenticated: false, redirectTo: /login, }; } } catch (e) { return { authenticated: false, redirectTo: /login, }; } }, onError: async (error) { console.error(error); return { error }; }, getPermissions: async () null, getIdentity: async (): PromiseAccountInfo { if (account null || account undefined) { return null; } return account; }, }; return ( BrowserRouter Refine routerProvider{routerProvider} dataProvider{dataProvider(API_URL, axiosInstance)} authProvider{authProvider} resources{[ { name: posts, list: /posts, }, ]} Routes Route element{ Authenticated fallback{CatchAllNavigate to/login /} Layout Outlet / /Layout /Authenticated } Route path/posts element{divdummy list page/div} / /Route Route element{ Authenticated fallback{Outlet /} NavigateToResource / /Authenticated } Route path/login element{LoginPage /} / /Route Route path* element{ErrorComponent /} / /Routes /Refine /BrowserRouter ); }; export default App;各部分的作用login調(diào)用instance.loginRedirect()把瀏覽器跳轉(zhuǎn)到 Azure B2C 登錄頁。注釋說明也可以換成你偏好的策略redirect 或 popup。check這是登錄態(tài)判斷的核心。存在賬號時靜默獲取令牌并寫入localStorage返回authenticated: true沒有賬號或獲取失敗時返回authenticated: false并攜帶redirectTo: /login由Authenticated組件負(fù)責(zé)跳轉(zhuǎn)。getIdentity直接返回當(dāng)前AccountInfo供 UI 展示當(dāng)前用戶。路由結(jié)構(gòu)受保護頁面套在Authenticated里未登錄時回退到/login/login頁本身又包了一層Authenticated已登錄用戶訪問它時會被NavigateToResource帶回業(yè)務(wù)頁。數(shù)據(jù)請求走dataProvider(API_URL, axiosInstance)文檔示例中API_URL是https://api.fake-rest.refine.dev接入自己的后端時替換為你的 API 地址即可axiosInstance的攔截器保證每個請求自動帶上Bearer令牌。register、resetPassword、updatePassword、logout在示例中統(tǒng)一返回success: true因為賬號生命周期由 Azure B2C 側(cè)管理應(yīng)用內(nèi)不做這些操作。驗證接入是否生效文檔代碼中體現(xiàn)的驗證點如下按流程核對應(yīng)用啟動時若 MSAL 正在執(zhí)行l(wèi)ogin或handleRedirect頁面顯示Loading...說明重定向流程在走。未登錄狀態(tài)訪問業(yè)務(wù)頁面check返回未認(rèn)證頁面落到/login并出現(xiàn) Sign in 按鈕。點擊 Sign in 后被重定向到 Azure B2C 登錄頁登錄成功后LOGIN_SUCCESS回調(diào)觸發(fā)靜默獲取令牌。文檔示例在成功后打印的日志文檔示例輸出Fetching access token: success Scopes ... Token Type ...令牌以refine-auth為鍵存入localStorage后續(xù)經(jīng)axiosInstance發(fā)出的請求Authorization頭為Bearer token。已登錄狀態(tài)刷新頁面check能靜默拿到令牌并返回authenticated: true應(yīng)用直接進入業(yè)務(wù)頁而不是/login。限制與注意點示例的登錄頁和 App 基于 antdrefinedev/antd的Layout、ErrorComponent與refinedev/react-router使用其他 UI 包或路由集成時對應(yīng)導(dǎo)入需要按各自的包調(diào)整MSAL 相關(guān)邏輯不變。文檔以 Azure AD B2C 為例并說明認(rèn)證普通 Azure AD 的步驟與之非常相似。redirectUri必須與瀏覽器中實際運行地址一致示例為本地開發(fā)地址http://localhost:3000/部署到別的環(huán)境時按代碼注釋替換。完整可核對的原始步驟見 documentation/docs/advanced-tutorials/auth/azure-ad.mdMSAL 各配置項的更多說明見 MSAL 官方文檔。【免費下載鏈接】refineA React Framework for building internal tools, admin panels, dashboards B2B apps with unmatched flexibility.項目地址: https://gitcode.com/GitHub_Trending/re/refine創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考