这是Jerry2021年的第51篇文章，也是王子熙的第328篇原创文章公众号。如无特殊说明，本文公众号介绍的SAPCommerceCloudUI是指基于Spartacus开源项目开发的新一代UI，而非传统的基于JSP的AcceleratorUI与Commerce平台耦合。上一篇来自淘宝首页的登录中提到，淘宝的用户session管理是通过浏览器的cookie和服务器端的用户session对象来实现的。SAPCommerceCloudUI基于100%API驱动的无头电商架构，Commerce后台通过OCC（OmniCommerceConnect）API暴露Commerce的核心业务。借助这些API和开源SAPSpartacus库，客户可以开发具有个性化用户体验的电子商务网站。关于SAPCommerceCloudHeadless架构的更多介绍可以参考我之前的文章：Jerry在2020SAP全球技术大会上的分享：SAPSpartacus技术介绍文字版。SAPCommerceCloud有一个名为Oauth2的扩展，它基于OAuth2.0协议实现用户身份验证和令牌颁发/功能，并支持OAuth2.0协议定义的所有四种身份验证流程，包括ResourceOwnerPasswordFlow。SAPCommerceCloudUI在OAuth2.0认证框架中扮演客户端角色，通过消费SAPCommerceOauth2扩展提供的OAuth系列API实现用户会话管理。让我们从初始用户登录场景开始。输入用户名和密码：SAPCommerceCloudUI调用CommerceOAuth2API，端点为/authorizationserver/oauth/token，将用户名、密码、client_id和client_secret交换为AccessToken和RefreshToken。这里的SAPCommerceCloudUI作为OAuth认证系统中的客户端，其client_id和client_secret在CommerceBackoffice中配置：服务器端验证通过后，会下发accesstoken和refreshtoken，如图下图中的access_token和refresh_token字段：SAPCommerceCloudUI在OAuth系统中的角色是客户端，通过accesstoken获取访问Commerce后台服务器上业务数据的权限。当访问令牌过期时，客户端使用刷新令牌来交换新的访问令牌。refreshtoken本身就是一个凭证，表明持有它的客户端已经通过了OAuth认证，获得了访问受保护资源的权限。当通过刷新令牌再次请求新的访问令牌时，客户端不必从头开始。完成OAuth身份验证的完整过程。SAPCommerceCloud的accesstoken和refreshtoken都有过期时间，有时也叫TTL（Time-to-Live，生存时间），默认值分别是12小时和30天。我们团队的开发人员，在开发SAPCommerceCloudUI用户会话管理功能和测试各种边界条件时，为了方便，通常会在他们本地搭建的Commerce服务器上调整token的过期时间。例如下图的例子，两者分别调整为30秒和60秒后过期：获取到accesstoken后，在CommerceCloudUI消费时附加到HTTP请求的header字段后台OCCAPI：如果此时accesstoken已经过期，请求会收到服务器的401错误响应：以及错误详情InvalidTokenError:Accesstokenexpired:IqQ-8cYzHV1gjQOpnYytHTFPt30显然这种技术错误信息不应该显示给用户，幸好我们还有刷新令牌。此时SAPCommerceCloudUI会将过期的accesstoken连同refreshtoken一起发送到Commerce后台申请新的accesstoken：当SAPCommerceCloudUI首次登录申请token时，grant_type的值为password；当accesstoken过期，使用refreshtoken重新申请时，grant_type的值要填refresh_token。refreshtoken的过期时间也到了怎么办？没有刷新令牌，就无法获得新的访问令牌。因此，我们会将用户重定向到登录页面，显示“Sessionexpired”的提示信息，要求用户重新登录，获取accesstoken和refreshtoken。上一篇文章我们从淘宝首页登录说起，我们在淘宝购物，如果不小心刷新了浏览器，只要客户端保存的cookie没有过期，我们仍然可以保持登录状态。这样，客户刷新的前一个会话，例如将商品添加到购物车，或进行到结帐的某个步骤，仍然有效。SAPCommerceCloudUI通过将访问令牌保存在浏览器的本地存储中来实现上述场景。每当用户成功登录时，我们将Commerce后台服务器颁发的访问令牌持久化并保存在浏览器的LocalStorage中。SAPCommerceCloudUI每次初始化时，通过AngularAPP_INITIALIZER的注入token，我们开发了AuthStatePersistenceService服务，将浏览器本地存储中的token同步到内存中。采用这种设计后，即使用户在购物过程中刷新了浏览器，在SAPCommerceCloudUI重新加载后，accesstoken从LocalStorage中取出并同步到内存中，下次用户操作继续使用用于调用CommerceOCCAPI的令牌，不会被浏览器刷新中断。综上所述，SAPCommerceCloudUI对accesstokens和refreshtokens的使用场景如下：(1)用户登录后，SAPCommerceCloudUI将服务器下发的accesstoken存储在内存中，并持久化到浏览器本地存储。为了安全起见，我们团队在实现refreshtoken时，只维护在应用内存中，不进行持久化操作。(2)当用户操作UI，触发API调用，收到服务器返回的accesstoken过期错误时，SAPCommerceCloudUI自动使用refreshtoken申请新的accesstoken；获取新的访问令牌后，使用该令牌重新调用因旧访问令牌过期而失败的API；这一系列机制对用户是完全透明的，用户在界面上的操作不会受到任何影响。(3)如果用户操作触发的API调用返回的服务器提示refreshtoken已经过期，SAPCommerceCloudUI会暂存当前用户浏览页面的URL，并将用户重定向到登录页面;用户再次登录后，访问新的访问令牌和刷新令牌，然后由SAPCommerceCloud重定向到刷新令牌过期时它正在操作的页面。本文简要介绍SAPCommerceCloudUI用户会话管理的基本实现原理和支持场景。对其技术实现感兴趣的朋友可以参考我们团队发布在Github上的文档，感谢阅读。https://sap.github.io/spartac...从产品展示页阅读更多关于Hybris独特的概念和设计结构从产品展示页谈论HybrisSeries2：DTO,ConverterandPopulatorLayerdesignandimplementationStarting从一个实际例子谈SAPCommerceCloud（电商云）的UI自定义开发SAPCommerceCloud（电商云）UISAPCRMFiori应用和SAPCommerceCloud（电商云）的延迟加载功能UI如何通过调整CSS来改变UI显示风格SAPCommerceCloud（电商云）UI增强的实现体现了与SAP产品一致的UI增强思路。2020SAP全球技术大会Jerry分享：SAPSpartacus技术介绍文本一小时本地搭建SAPCommerceCloud（电商云）前后端运行环境SAPCommerceCloud的自定义配置和开发（电商云）路由路径Jerry更多原创文章在这里：《王子熙》：
