adal angular 应用重新加载 - 设计使然?
adal angular app reloading - by design?
我构建了一个简单的 angular 应用程序,为了进行身份验证,我使用 npm 包 adal-angular4
针对 AzureAD 进行身份验证
当身份验证发生时,用户被发送到 https://login.microsoftonline.com
他们登录并被发送回 agulare 应用程序,这会导致 reload/recompile 这将导致加载时间延迟,虽然很短但总体上加载时间经验加倍。
如你所见:
- 登录已加载(本地主机)
- 应用已编译
- 用户被带到登录屏幕 (azuread)
- 用户登录,用户被带回登录(本地主机)
- 应用已合规
main.bundle.js
和 background'
之间的负载差距是显示编译时间的一种简单方式,它只是非常时间,但我有一台非常快的 PC。
如何避免重新编译?我的想法是
- 在 index.html 中完成所有身份验证(例如,首次加载 APP 之前)并将 JWT 令牌保存到会话存储
- 找到一个 angular 包通过 IFRAME 执行此操作
有人对此有任何想法吗?也许 adal-angular4
应该使用 IFRAME?
更多细节
Example 个 adal-angular4
Microsofts anglurejs example which uses this javascrit 也许这是从 index.html.
执行的纯 JavaScript 解决方案的良好起点
据我了解,这是无法避免的。当应用程序通过 Oauth 协议与 Azure AD 交互时,流程如下所示:
- 用户点击从应用开始登录进程
- 应用程序已重定向到身份数据提供程序 (Azure AD)
- 用户输入 username/password
- 身份数据提供者响应 302 重定向到应用程序
Do all the auth in the index.html (eg, pre first load of APP) and just save the JWT token to the session storage
不,如上步骤中的进度所示,身份验证有两个步骤。首先是使用 Azure AD 进行身份验证,然后 Web 应用程序使用 Azure AD 发布的 id_token 对用户进行身份验证。
更多关于Oauth 2.0的细节,可以参考下面的link:
您需要直接使用 adal.js,而不是通过 angular 应用程序。
在主体index.html中添加如下代码
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/adal.min.js"></script>
<script>
window.config = {
instance: 'https://login.microsoftonline.com/',
tenant: 'yourtenant.co.uk',
clientId: '11111111-1111-1111-1111-1111111111',
postLogoutRedirectUri: window.location.origin,
cacheLocation: 'localStorage',
};
// Check For & Handle Redirect From AAD After Login
var authContext = new AuthenticationContext(config);
var isCallback = authContext.isCallback(window.location.hash);
authContext.handleWindowCallback();
if (isCallback && !authContext.getLoginError()) {
window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
}
var user = authContext.getCachedUser();
if (!user) {
authContext.login();
}
</script>
index.html仍然可以为angular应用程序加载所有javascript,上面的代码将执行。
在我的 angular 应用程序中,我使用 angular2-jwt
,它希望令牌位于 token
中,因此我需要使用以下代码移动令牌:
localStorage.setItem('token', localStorage.getItem( 'adal.access.token.key' + config.clientId));
我在应用程序中添加了一条消息AppComponent
您可以在调试控制台中看到它。
老办法,重新载入即可看到..
纯 JavaScript 方式,如您所见,只需加载一个应用程序。
我构建了一个简单的 angular 应用程序,为了进行身份验证,我使用 npm 包 adal-angular4
当身份验证发生时,用户被发送到 https://login.microsoftonline.com
他们登录并被发送回 agulare 应用程序,这会导致 reload/recompile 这将导致加载时间延迟,虽然很短但总体上加载时间经验加倍。
如你所见:
- 登录已加载(本地主机)
- 应用已编译
- 用户被带到登录屏幕 (azuread)
- 用户登录,用户被带回登录(本地主机)
- 应用已合规
main.bundle.js
和 background'
之间的负载差距是显示编译时间的一种简单方式,它只是非常时间,但我有一台非常快的 PC。
如何避免重新编译?我的想法是
- 在 index.html 中完成所有身份验证(例如,首次加载 APP 之前)并将 JWT 令牌保存到会话存储
- 找到一个 angular 包通过 IFRAME 执行此操作
有人对此有任何想法吗?也许 adal-angular4
应该使用 IFRAME?
更多细节
Example 个 adal-angular4
Microsofts anglurejs example which uses this javascrit 也许这是从 index.html.
执行的纯 JavaScript 解决方案的良好起点据我了解,这是无法避免的。当应用程序通过 Oauth 协议与 Azure AD 交互时,流程如下所示:
- 用户点击从应用开始登录进程
- 应用程序已重定向到身份数据提供程序 (Azure AD)
- 用户输入 username/password
- 身份数据提供者响应 302 重定向到应用程序
Do all the auth in the index.html (eg, pre first load of APP) and just save the JWT token to the session storage
不,如上步骤中的进度所示,身份验证有两个步骤。首先是使用 Azure AD 进行身份验证,然后 Web 应用程序使用 Azure AD 发布的 id_token 对用户进行身份验证。
更多关于Oauth 2.0的细节,可以参考下面的link:
您需要直接使用 adal.js,而不是通过 angular 应用程序。
在主体index.html中添加如下代码
<script src="https://secure.aadcdn.microsoftonline-p.com/lib/1.0.0/js/adal.min.js"></script>
<script>
window.config = {
instance: 'https://login.microsoftonline.com/',
tenant: 'yourtenant.co.uk',
clientId: '11111111-1111-1111-1111-1111111111',
postLogoutRedirectUri: window.location.origin,
cacheLocation: 'localStorage',
};
// Check For & Handle Redirect From AAD After Login
var authContext = new AuthenticationContext(config);
var isCallback = authContext.isCallback(window.location.hash);
authContext.handleWindowCallback();
if (isCallback && !authContext.getLoginError()) {
window.location = authContext._getItem(authContext.CONSTANTS.STORAGE.LOGIN_REQUEST);
}
var user = authContext.getCachedUser();
if (!user) {
authContext.login();
}
</script>
index.html仍然可以为angular应用程序加载所有javascript,上面的代码将执行。
在我的 angular 应用程序中,我使用 angular2-jwt
,它希望令牌位于 token
中,因此我需要使用以下代码移动令牌:
localStorage.setItem('token', localStorage.getItem( 'adal.access.token.key' + config.clientId));
我在应用程序中添加了一条消息AppComponent
您可以在调试控制台中看到它。
老办法,重新载入即可看到..