import { InteractionType } from "@azure/msal-browser";
import { MsalAuthenticationTemplate, useMsal } from "@azure/msal-react";
function WelcomeUser() {
const { accounts } = useMsal();
const username = accounts[0].username;
return <p>Welcome, {username}</p>;
}
// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
return (
<MsalAuthenticationTemplate interactionType={InteractionType.Popup}>
<p>This will only render if a user is signed-in.</p>
<WelcomeUser />
</MsalAuthenticationTemplate>
);
}
还可以直接使用 @azure/msal-browser API 来调用与 AuthenticatedTemplate 和/或 UnauthenticatedTemplate 组件配对的登录名,以分别向登录或注销的用户呈现特定的内容。 如果由于用户交互(例如单击按钮)而需要调用登录名,则建议使用此方法。
import {
useMsal,
AuthenticatedTemplate,
UnauthenticatedTemplate,
} from "@azure/msal-react";
function signInClickHandler(instance) {
instance.loginPopup();
}
// SignInButton Component returns a button that invokes a popup login when clicked
function SignInButton() {
// useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
const { instance } = useMsal();
return <button onClick={() => signInClickHandler(instance)}>Sign In</button>;
}
function WelcomeUser() {
const { accounts } = useMsal();
const username = accounts[0].username;
return <p>Welcome, {username}</p>;
}
// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
return (
<>
<AuthenticatedTemplate>
<p>This will only render if a user is signed-in.</p>
<WelcomeUser />
</AuthenticatedTemplate>
<UnauthenticatedTemplate>
<p>This will only render if a user is not signed-in.</p>
<SignInButton />
</UnauthenticatedTemplate>
</>
);
}
import { InteractionType } from "@azure/msal-browser";
import { MsalAuthenticationTemplate, useMsal } from "@azure/msal-react";
function WelcomeUser() {
const { accounts } = useMsal();
const username = accounts[0].username;
return <p>Welcome, {username}</p>;
}
// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
return (
<MsalAuthenticationTemplate interactionType={InteractionType.Redirect}>
<p>This will only render if a user is signed-in.</p>
<WelcomeUser />
</MsalAuthenticationTemplate>
);
}
还可以直接使用 @azure/msal-browser API 来调用与 AuthenticatedTemplate 和/或 UnauthenticatedTemplate 组件配对的登录名,以分别向登录或注销的用户呈现特定的内容。 如果由于用户交互(例如单击按钮)而需要调用登录名,则建议使用此方法。
import {
useMsal,
AuthenticatedTemplate,
UnauthenticatedTemplate,
} from "@azure/msal-react";
function signInClickHandler(instance) {
instance.loginRedirect();
}
// SignInButton Component returns a button that invokes a popup login when clicked
function SignInButton() {
// useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
const { instance } = useMsal();
return <button onClick={() => signInClickHandler(instance)}>Sign In</button>;
}
function WelcomeUser() {
const { accounts } = useMsal();
const username = accounts[0].username;
return <p>Welcome, {username}</p>;
}
// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
return (
<>
<AuthenticatedTemplate>
<p>This will only render if a user is signed-in.</p>
<WelcomeUser />
</AuthenticatedTemplate>
<UnauthenticatedTemplate>
<p>This will only render if a user is not signed-in.</p>
<SignInButton />
</UnauthenticatedTemplate>
</>
);
}
浏览器上的注销行为
用户登录并想要注销的应用越多,鉴于在浏览器中实现此类功能的方式有限,出现问题的可能性就越大。 Microsoft 的 Internet 隐私最佳做法建议,在用户可能想要注销应用的共享设备上,用户应使用浏览器的隐私/incognito 模式,并在离开设备之前关闭所有浏览器窗口。
在未共享的设备上,用户应利用操作系统锁屏,以便他们可以在设备上锁定或注销其整个操作系统会话。 Microsoft 使用其注销页面提醒用户这些最佳做法,以帮助提高用户隐私和安全性。
对于不选择采用安全方法的用户,应用可尝试为以下两种情况做好准备:
用户已直接从应用启动注销。
从与新应用共享登录状态但只管理自己的会话令牌/Cookie 的另一个应用启动注销。
对于第一种情况,以下部分介绍了多个选项,说明如何使用弹出窗口或重定向从本地应用注销用户。
对于从另一个应用启动注销的第二种情况,Microsoft 使用 OpenID Connect 的 Front Channel 注销进行联合注销。此实现存在一些限制,即第三方内容将被阻止,例如浏览器默认阻止第三方 Cookie 的情况。
import {
useMsal,
AuthenticatedTemplate,
UnauthenticatedTemplate,
} from "@azure/msal-react";
function signOutClickHandler(instance) {
const logoutRequest = {
account: instance.getAccountByHomeId(homeAccountId),
mainWindowRedirectUri: "your_app_main_window_redirect_uri",
postLogoutRedirectUri: "your_app_logout_redirect_uri",
};
instance.logoutPopup(logoutRequest);
}
// SignOutButton Component returns a button that invokes a popup logout when clicked
function SignOutButton() {
// useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
const { instance } = useMsal();
return (
<button onClick={() => signOutClickHandler(instance)}>Sign Out</button>
);
}
// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
return (
<>
<AuthenticatedTemplate>
<p>This will only render if a user is signed-in.</p>
<SignOutButton />
</AuthenticatedTemplate>
<UnauthenticatedTemplate>
<p>This will only render if a user is not signed-in.</p>
</UnauthenticatedTemplate>
</>
);
}
使用重定向进行注销
MSAL.js 在 v1 中提供了 logout 方法,在 v2 中引入了 logoutRedirect 方法,该方法可清除浏览器存储中的缓存,并将窗口重定向到 Microsoft Entra 注销页面。 注销后,Microsoft Entra ID 会重定向回默认情况下调用注销的页面。
由于用户不会看到 Microsoft 关于使用隐私浏览器和锁屏的 Internet 隐私最佳做法的提醒,SPA 应用可能还需要描述最佳做法并提醒用户关闭所有浏览器窗口。
可以通过设置 postLogoutRedirectUri 来配置此 URI(在注销后应该重定向到此 URI)。 此 URI 应在应用程序注册中注册为重定向 URI。
import {
useMsal,
AuthenticatedTemplate,
UnauthenticatedTemplate,
} from "@azure/msal-react";
function signOutClickHandler(instance) {
const logoutRequest = {
account: instance.getAccountByHomeId(homeAccountId),
postLogoutRedirectUri: "your_app_logout_redirect_uri",
};
instance.logoutRedirect(logoutRequest);
}
// SignOutButton Component returns a button that invokes a redirect logout when clicked
function SignOutButton() {
// useMsal hook will return the PublicClientApplication instance you provided to MsalProvider
const { instance } = useMsal();
return (
<button onClick={() => signOutClickHandler(instance)}>Sign Out</button>
);
}
// Remember that MsalProvider must be rendered somewhere higher up in the component tree
function App() {
return (
<>
<AuthenticatedTemplate>
<p>This will only render if a user is signed-in.</p>
<SignOutButton />
</AuthenticatedTemplate>
<UnauthenticatedTemplate>
<p>This will only render if a user is not signed-in.</p>
</UnauthenticatedTemplate>
</>
);
}