[英]Azure AD authentication login redirect not working on react app hosted on S3
I am trying to authenticate a webapp using Azure AD with the MSAL react and browser libraries.我正在尝试使用带有 MSAL 反应和浏览器库的 Azure AD 对 Web 应用程序进行身份验证。 This code works fine on localhost:3000 dev server but when I deploy it to the web the redirect never happens and only the UnAuthenticatedTemplate html is visible.
此代码在 localhost:3000 开发服务器上运行良好,但当我将其部署到 web 时,重定向从未发生,只有 UnAuthenticatedTemplate html 可见。 How do I fix this?
我该如何解决? It seems like I have tried everything.
好像我什么都试过了。 My first thought would be the specified redirect URI in the azure AD app registration but im not so sure this will work.
我的第一个想法是在 azure AD 应用程序注册中指定的重定向 URI,但我不太确定这是否有效。
I am using the msal react 'useMsalAuthentication' hook to initiate login and token aquisition.我正在使用 msal react 'useMsalAuthentication' 挂钩来启动登录和令牌获取。 Note when I change the interaction type to popup the interaction window opens for a slit second then closes.
请注意,当我将交互类型更改为弹出时,交互 window 打开一秒钟然后关闭。 app.js
应用程序.js
export function App() {
// //auth login hook
const {login, result,error} =useMsalAuthentication(InteractionType.Redirect,loginRequest);
console.log("login Initiated")
useEffect(() => {
if (error instanceof InteractionRequiredAuthError) {
login(InteractionType.Redirect, loginRequest);
}
console.log("hello from useEffect hook - retry login if failure")
}, [error]);
console.log(result)
return (
<React.Fragment>
<UnauthenticatedTemplate>
<h1>you are unauthenticated!</h1>
</UnauthenticatedTemplate>
<AuthenticatedTemplate>
<div className="App">
<div id="container">
<div id="content-center px-96">
<img id='logo' alt="logo" src={logo}></img>
</div>
</div>
<Dropdown/>
</div>
</AuthenticatedTemplate>
</React.Fragment>
);
index.js索引.js
const msalInstance = new PublicClientApplication(msalConfig);
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<MsalProvider instance={msalInstance}>
<App />
</MsalProvider>
</React.StrictMode>
);
authConfig.js authConfig.js
export const msalConfig = {
auth: {
clientId: "<client_id>",
authority: "https://login.microsoftonline.com/<tenant>",
redirectUri: "http://localhost:3000/",
},
cache: {
cacheLocation: "localStorage", // 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"]
};
// Add the endpoints here for Microsoft Graph API services you'd like to use.
export const graphConfig = {
graphMeEndpoint: "Enter_the_Graph_Endpoint_Here/v1.0/me"
};
Azure AD authorization redirects or popups only work when HTTPS is enabled for an S3 bucket. Azure AD 授权重定向或弹出窗口仅在为 S3 存储桶启用 HTTPS 时才有效。 Azure AD makes an exception for local host for development purposes.
Azure AD 为开发目的对本地主机进行例外处理。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.