自定义用于oidc-client-js的GUI

Question

有什么方法可以用oidc-客户端js来使用您的自定义用户界面呢？我知道，如果您使用以下方法触发身份验证端点：

            // PopUps might be blocked by the user, fallback to redirect
            try {
                await this.userManager.signinRedirect(this.createArguments(state)); //Shows midleware login form
                return this.redirect();
            } catch (redirectError) {
                console.log("Redirect authentication error: ", redirectError);
                return this.error(redirectError);
            }

中间件将尝试呈现其预定义的登录表单：

​

​

不过，我有自己的响应表单，只需传递给OICDClient params (电子邮件、密码)，并返回用户实例以显示UserName等。

var loggedUser = await this.userManager.signinCustom(state.loginEmail, state.LoginPassword); //Login using credentials

我不想自己编写所有的逻辑--我真的想使用OIDCClient的所有功能--只使用我的GUI (loginForm、registerForm、updateUserForm等)。

我使用MSDN的支架库命令：

dotnet new react -o <output_directory_name> -au Individual

是否有任何方法/实现来初始化来自反应性组件的oidc-client-js而不是用户默认的GUI表单？

非常感谢!

Answer 1

我可能遗漏了一些东西，但是使用第三个部分联合的auth提供者的整个想法，无论是您自己/您的公司的SSO (比如使用Identity Server 4开发的)还是google登录(比如使用他们的Firebase JS工具包)或微软的登录、Facebook登录等等，都是因为您将被重定向到他们的身份验证端点，然后使用您的Google凭据(例如，使用google签名)登录到google auth服务器。一旦您这样做，一个有效负载(由标识令牌和访问令牌组成)将返回到您的重定向URL，您必须为您的特定应用程序配置该URL。

通过说你想提供你自己的登录表单，你就错过了使用第三方认证提供者的全部意义。此外，你/你的应用程序不应该知道用户名和密码，你也不想访问所有这些信息。您应该知道的所有您应该感兴趣的用户，谁正在使用一个联邦身份验证提供者，您将为您的应用程序配置，他们声称是谁，然后你把所有的负担委托给你的第三方认证提供者。

此外，假设您的公司有自己的SSO系统，那么您公司的所有应用程序都将使用该SSO系统，从UI的角度来看，您希望显示相同的登录屏幕，以便提供一致的用户体验。

此外，如果你给我看一个谷歌认证按钮，然后点击那个按钮，你会给我看一些奇怪的表单，它看起来不像典型的谷歌选择列表登录表单，那么我会在你打个招呼之前关闭你的应用程序，我想大多数用户也会(而且应该)也会这么做。原因是，当你向我展示谷歌登录页面时，我知道你/你的应用程序只会得到你需要的东西，我永远不会把我的谷歌用户名和密码委托给任何其他应用程序。

如果您真的想拥有自己的身份验证表单，那么您必须自己管理用户名和密码，这可能是我们在10+几年前所做的事情。

如果您决定设置自己的身份验证系统，然后说“使用身份服务器4”，那么当然可以更改UI并根据您的实际内容定制它，但这将发生在服务器级，而不是在您的反应性应用程序级别上。要点是，在任何SSO系统中，用户将被重定向到该提供者的端点，然后在该端点上进行身份验证(并且，您的应用程序可以选择使用某些声明的提供者权限)，并且一旦它们这样做了，它们将被重定向回带有有效负载的重定向端点(JWT令牌)。

最后，即使您可以用表单连接客户端签名，我也不确定您是否愿意使用它。通过网络传递密码和用户名不是个好主意。您将始终希望使用表单中呈现的服务器签名。