@aaronpowell/react-static-web-apps-auth 中文文档教程
Static Web App Auth tools for React
|
这个包是一系列用于 Azure 静态 Web 应用 来自 React 的身份验证和授权。
Installation
您可以从 npm 安装稳定版本：
npm install @aaronpowell/react-static-web-apps-auth
或者您可以从 GitHub 包安装最新版本。
Usage
该包包含一些为您包装功能的组件。
<StaticWebAppsAuthLogins />
const Login = () => {
return (
<div>
<h2>Login to our site</h2>
<StaticWebAppsAuthLogins aad={true} twitter={false} customProviders={[ id: "okta", name: "Okta" ]} />
</div>
);
};
该组件将显示您要在您的应用程序和用户链接上使用的所有身份验证提供程序。 可以使用 customProviders 属性注册自定义 OIDC 提供程序，并提供提供程序的 id 和要向用户显示的 name。
默认情况下，只有托管身份验证提供商会显示，但可以通过将相应的属性设置为 false 来关闭它们。 所有提供程序都可用作为可配置选项 可以使用道具启用。
要在登录后重定向到特定 URL，请在 postLoginRedirect 属性中提供该路径。
默认标签是 Sign in using ${name}，但可以使用 label 属性覆盖，该属性采用接收 name 的函数提供者并返回标签字符串。
<ClientPrincipalContextProvider>
const App = () => {
return (
<ClientPrincipalContextProvider>
<MySite />
</ClientPrincipalContextProvider>
);
};
该组件为当前用户提供 React 上下文（或在您未登录时提供一系列 undefined 值），与可用信息 在客户端主体中。
此外，useContext React Hook 可用，useClientPrincipal，可在应用程序中使用。
<Logout />
该组件通过 Static Web Apps 提供注销功能。
要重定向到注销后的特定 URL，请在 postLogoutRedirect 属性中提供路径。
<UserPurge />
该组件为用户提供从静态 Web 应用程序中删除他们的身份信息。 默认情况下，它只会将它们从当前域中清除，但如果您要让它们能够将自己从静态 Web 应用程序中完全移除，请将 globally 属性设置为 true .
Styling
每个组件都会生成最小的 HTML（单个 标记），以便更轻松地在应用程序中设置样式。 DOM 元素具有类 azure-swa-auth，在 ./constants 中定义为 StaticWebAppsClassName，在它们上面，以及组件类型， login、logout 或 purge。
此外，登录组件将提供程序作为一个类，因此可以单独设置提供程序的样式。
License
麻省理工学院
Static Web App Auth tools for React
|
This package is a series of helper tools for working with Azure Static Web Apps Authentication and Authorization from React.
Installation
You can install a stable release from npm:
npm install @aaronpowell/react-static-web-apps-auth
Or you can install the latest build from GitHub packages.
Usage
The package contains some components that wrap the functionality for you.
<StaticWebAppsAuthLogins />
const Login = () => {
return (
<div>
<h2>Login to our site</h2>
<StaticWebAppsAuthLogins aad={true} twitter={false} customProviders={[ id: "okta", name: "Okta" ]} />
</div>
);
};
This component will display all the auth providers you want to use on your application and links for the user. Custom OIDC providers can be registered using the customProviders prop and provide the id of the provider and the name you want displayed to the user.
By default, only managed auth providers will display, but they can be turned off by setting their corresponding prop to false. All providers available as configurable options can be enabled using props.
To redirect to a specific URL post-login, provide that path in the postLoginRedirect prop.
The default label is Sign in using ${name}, but can be overridden with the label prop, which takes a function that receives the name of the provider and returns the label string.
<ClientPrincipalContextProvider>
const App = () => {
return (
<ClientPrincipalContextProvider>
<MySite />
</ClientPrincipalContextProvider>
);
};
This component provides React Context for the current user (or a series of undefined values when you're not logged in), aligning with the information available in the Client Principal.
Additionally, a useContext React Hook is available, useClientPrincipal, for use within the application.
<Logout />
This component provides the logout function through Static Web Apps.
To redirect to a specific URL post-logout, provide the path in the postLogoutRedirect prop.
<UserPurge />
This component provides the user with the ability to remove their identifying information from Static Web Apps. By default it'll only purge them from the current domain, but set the globally prop to true if you with to give them the ability to completely remove themselves from Static Web Apps.
Styling
Each of the components generates minimal HTML (a single <a> tag) to make it easier to style within an application. The DOM elements have the class azure-swa-auth, defined in ./constants as StaticWebAppsClassName, on them, along with the component type, login, logout or purge.
Additionally, the login components have the provider as a class, so providers can be styled individually.
License
MIT
