关于自定义的登录机制在SAP Spartacus服务器端渲染(SSR)实施过程中遇到的问题
问题背景
某客户使用了第三方的Authentication service来实现Spartacus用户的登录机制:
In our project we have integration with MDCIM team who handles login and authorization.
This part of code redirects the User to MDCIM URL and once authorization is completed by the User in MDCIM, the user will be landed back to our home page completing the login scenario.
Here our API redirect to MDCIM and waits for a token. Once response received we use the token to get the user information with another API call.
使用token,调用另一个API,获取user信息。
We found out that the problem was caused by using this.windowAdapter.getWindow().sessionStorage.*
without previously checking if the sessionStorage
is actually available. In SSR it was undefined.
If you wrap all the calls in an if (this.windowAdapter.getWindow().sessionStorage) {...}
the PLP pages are being SSRed correctly.
As an additional, browser’s storage (sessionStorage, localStorage) API is not available in SSR, therefore code defensively.
自开发的用户认证:
customizeAuthentication(): void {
this.customLoginAdapter
.getMDCIMToken(this.authCode)
.subscribe((data: AuthTokenDetails) => {
console.log('Output from MDCIM: ', data);
console.log(
'Session Storage present: ',
this.windowAdapter.getWindow().sessionStorage
);
if (data && data.token) {
const userId = data?.userDetails?.email;
const password = '';
this.authService.authorize(userId, password);
if (this.windowAdapter.getWindow().sessionStorage) {
this.windowAdapter
.getWindow()
.sessionStorage.setItem('MDCIM-Token', JSON.stringify(data));
}
this.getOuthToken();
}
});
}
sessionStorage和localStorage都无法在SSR模式下工作。
While using SSR the page html is generated at html. However the window, sessionStorage and localStorage objects are of the browser contextual objects. SSR at server side cannot have access to these objects.
This is the reason of SSR not working on the pages where these objects are being used.
If window or localStorage objects are required to be used with SSR then include the library @ng-toolkit/universal .
An example of using window and localStorage objects with SSR can be referred at this article
最佳实践
最好不要在SSR模式下进行用户认证(user Authentication)相关的逻辑:
In general we don’t recommend running any authentication / authorization related code in the SSR mode, unless you are aware of all the security issues and pitfall that with it. It might be a good idea to skip the whole auth logic in the SSR mode.
解决方案
I can suggest you to try to inject the @Inject(PLATFORM_ID) protected platform: any
(from @angular/core
) to your custom-login.component.ts
, and then check if the platform is a browser or a server with isPlatformBrowser()
or isPlatformServer()
( both coming from @angular/common
).
if (isPlatformServer(this.platform)) {
return;
}
相关文章
- 关于 SAP UI5 Web Components
- SAP UI5 里的 Busy Dialog 控件使用概述
- 关于 SAP ABAP CL_HTTP_CLIENT API 中的 SSL_ID 参数
- 关于 SAP Spartacus SSR 请求 OCC API 遇到 403 错误的解决办法
- 关于 SAP UI5 ODataModel.createEntry 返回的 context 对象
- 关于 SAP Spartacus Angular HTTP Interceptor 的拦截顺序
- 什么是 SAP ABAP 的 include structure
- SAP QM不常用功能之Automatic Usage Decision
- 关于微软 Edge 浏览器无法访问笔者 SAP UI5 教程示例代码的问题
- SAP MM 公司间退货STO,item里是可以勾选GR-bsd IV的
- SAP UI5 用来解析三个版本号的正则表达式
- 关于 SAP Commerce Cloud 构建的 Node.js 版本号问题
- 安装SAP,Linux获台前瞻未来(linux安装sap)
- 深入比较:SAP vs Oracle(sap和oracle)
- SAP中关于用户IP信息的获取(转载)详解编程语言
- SAP 中的用户类型详解编程语言
- SAP STRANS 导出EXCEL详解编程语言
- SAP中委外采购订单发料详解编程语言
- Calling browser from SAP ABAP详解编程语言
- 配置SAP服务器外网登陆以及网络故障解决示例详解编程语言
- 调用SAP接口:MSSQL实现自动化(mssql调用sap接口)
- Oracle从SAP抽取数据的简单方法(oracle从sap抽数)
- 比拼Oracle与SAP的优劣对比(oracle与sap优劣)
- 聘请高级Oracle与SAP顾问,拓展业务潜力(oracle sap顾问)