Identityserver4 使用SPA识别服务器4，无需重定向到登录页面

如何将SPA（在我的示例中是vuejs）与identityserver一起使用。在javascript客户端的演示应用程序中，他们使用重定向来登录页面以获取身份。但是我想从我自己的页面登录。如何实现这一点？

您是否正在使用npm软件包

它支持使用高级UserManager类以多种方式登录。这些是：

• 重定向（在演示中可以找到）
• 使用弹出窗口
• 使用iframe

编辑：iframe选项只能用于静默非交互式重新身份验证。典型的情况是，如果您访问的令牌已过期（例如，一小时后），并且您的身份提供程序上仍有有效会话，则oidc客户端可以在后台执行静默登录

---

如果您想要更嵌入式的体验，并且客户和身份提供者由同一个组织控制，您可以求助于使用资源所有者密码流（

password

），并直接从您的spa ui发送用户名和密码。但是请记住，访问令牌不应该在纯SPA中长期存在（我相信我有一个不同的解决方案来解决这个问题，这可能更正确，但我一点也不确定

首先，我发现授权端点有一个名为

acr_values

的参数，当该参数的值为例如

idp:Microsoft

时，它会指示授权服务器自动重定向到外部提供者（这正是我们想要的！）-但显然，将此参数发送到IdentityServer4并没有什么特别的作用，它大部分被忽略。发生的情况是，它被存储并可由您的代码检索

接下来，我修改

/Identity/Account/Login

并通过首先注入

IIdentityServerInteractionService

然后调用

GetAuthorizationContextAsync

来检索此参数，因此：

var authReq=wait _identityServerInteractionService.GetAuthorizationContextAsync（返回URL）；

返回的对象有一个名为

IdP

的属性，该属性从上述

acr\u values

参数的

IdP:…

值中获取其值。然后我测试该值是否是受支持的外部登录，以避免出错，因此：

if（！string.IsNullOrEmpty（authReq？.IdP））{
if（ExternalLogins.All（x=>x.Name！=authReq.IdP））{
AddModelError（string.Empty，$“未知登录提供程序{authReq.IdP}”）；
}
否则{
//…有关此部分，请参见下文
}
}

然后，我返回一个质询响应，该响应将用户重定向到某个外部提供者。此部分是从

/Identity/Account/ExternalLogin

复制的，并稍作修改，因此：

var provider=authReq.IdP；
var redirectUrl=Url.Page（“./ExternalLogin”，pageHandler:“回调”，值：new{returnUrl}）；
var properties=\u signInManager.ConfigureExternalAuthenticationProperties（提供程序，重定向URL）；
返回新的ChallengeResult（提供程序、属性）；

最后，我更改SPA代码以发送此

acr\u值

参数，它基于dotnet

angular

模板，该模板使用

oidc客户端

。该代码位于

src\api authorization\authorize.service.ts

函数中的

ensureUserManager初始化

，dotnet模板这是：

const-settings:any=wait-response.json（）；
settings.automaticSilentRenew=true；
settings.includeidtokensilentrenew=true；

我把它改成这样：

const设置：UserManagerSettings={
…等待响应。json（），
自动Lentrenew：是的，
includedTokenInsilentrenew:true，
acr_值：“idp:Microsoft”，
};

您给了我答案。但如果在实施过程中出现任何问题，我会与您联系。请理解，这将使您的SPA变为外部登录页面？@MB在我的本地服务器上尝试了此操作。添加此属性将跳过IdentityServer登录页面（登录表单+外部登录按钮）然后直接进入外部登录页面