我有一個使用 azure ad 和 msal 進行身份驗證的 React 應用程式。
在生產環境中面臨 2 個問題： 1- 當我訪問本地主機上的站點時，它會按原樣顯示未經身份驗證的視圖，然后我可以登錄以訪問我的受保護路由，但是當我對托管的應用程式執行相同操作時在 azure 上，我被要求立即登錄，登錄后顯示未經身份驗證的視圖，需要再次登錄才能看到經過身份驗證的模板。2- 當我嘗試登錄時，我隨機被重定向到顯示未經身份驗證的視圖并丟失 URL 引數的主頁，因此我需要再次按登錄按鈕再次登錄，然后我看到主頁經過身份驗證的模板，但 url 引數不見了。
這是我的 authConfig.js 檔案：
import { LogLevel } from '@azure/msal-browser'
export const msalConfig = {
auth: {
authority:
'https://login.microsoftonline.com/xxxxxxxxxxxxxxxxxxx',
clientId: 'xxxxxxxxxxxxxxxxxxxxxx',
redirectUri: '/',
},
cache: {
cacheLocation: 'localStorage',
storeAuthStateInCookie: false,
},
}
export const logInRequest = {
scopes: ['api://xxxxxxxxx/access_as_user'],
}
這是我的登錄功能：
const handleLogin = (instance) => {
instance.loginPopup(logInRequest).catch((e) => {
console.log(e)
})
}
注銷功能：
const handleLogout = (instance) => {
instance.logoutRedirect({
postLogoutRedirectUri: '/',
})
}
這就是我在 app.js 中實作庫的方式：
const isAuthenticated = useIsAuthenticated()
isAuthenticated && requestAccessToken(instance, accounts)
return (
<>
<AuthenticatedTemplate>
<Routes>
<Route path="/" element={<zzzz/>} />
<Route
path="/xx"
element={<xxxx/>}
/>
otherRoutes.....
</Routes>
</AuthenticatedTemplate>
<UnauthenticatedTemplate>
<NotAuthenticatedView />
</UnauthenticatedTemplate>
</>
最后這是我的 index.js，我用提供程式包裝應用程式：
import { msalConfig } from './authConfig'
const msalInstance = new PublicClientApplication(msalConfig)
ReactDOM.render(
<React.StrictMode>
<MsalProvider instance={msalInstance}>
<BrowserRouter>
<App />
</BrowserRouter>
</MsalProvider>
</React.StrictMode>,
document.getElementById('root')
)
感謝任何幫助
我嘗試彈出和重定向登錄和退出，期望生產中的應用程式與開發中的行為相同，但是在我看到未經身份驗證的視圖之前訪問網站 aven 時，我被要求直接登錄，然后看到它雖然我已經登錄了，有時登錄彈出視窗會出現庫存，我在彈出視窗中看到相同的頁面并且無法按登錄，我應該關閉彈出視窗并多次嘗試登錄按鈕，有時我登錄然后它顯示未經身份驗證的視圖并且 url 中的引數丟失。
uj5u.com熱心網友回復：
既然你提到托管在 Azure 中，我相信你是在 Azure 應用服務中托管它，對吧？
如果是這種情況，請確保您沒有在應用服務的“身份驗證”選項卡上進行任何配置。
身份驗證選項卡用作應用程式服務的開箱即用身份驗證解決方案。由于您已經在處理代碼的身份驗證，因此可以禁用它。
參考：https ://learn.microsoft.com/en-us/azure/app-service/configure-authentication-provider-aad
uj5u.com熱心網友回復：
經過多天的除錯，它表明我需要從 webappconfig.json 中洗掉路由“*/”的角色并添加 serve index.html。
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/535541.html