您如何组织 Angular 应用程序与 Xero OAuth2.0 之间的交互？
How you organize the interaction between Angular app and Xero OAuth2.0?
我正在构建 Angular 应与 Xero API 交互的应用程序。 Xero 不为 Typescript (https://developer.xero.com/documentation/libraries/overview), but Node JS SDK seems to be the most useful lib for my task. But I am in stuck in how to organize the workflow between my app and their https://github.com/XeroAPI/xero-node-oauth2-app 提供任何 SDK。我的意思是 - 我想从已经制作过类似应用程序 (Angular + Xero) 的人那里得到一些关于以下问题的建议：
1) 在本指南中 https://developer.xero.com/documentation/oauth2/auth-flow 他们说用户应该使用 URL 打开页面，例如 https://login.xero.com/identity/connect/authorize?... - 但是有什么方法可以让用户在没有 UI 的情况下登录？如果不是-
2）在我的案例中如何进行这个过程？在我的 Angular 应用程序中，我可以制作一个按钮 'Log in to Xero'，它将打开新的 window:
window.open(xeroUrl, 'xeroAuth', 'location=yes,height=770,width=620,scrollbars=yes,status=yes');
在用户登录的地方，提供对其组织的访问权限。会话令牌是在后端创建的。但接下来呢？我如何将这些令牌从那个新 window 传递到我的 Angular 应用程序，然后使用它们调用 Xero API?
3) 打开新 window 登录 Xero 的方式是否适合这种情况，或者也许有更好的方式登录 Xero 并获取会话令牌？
在此先感谢您的帮助。
遗憾的是，SPA 与 Xero 不兼容 API。
您需要一个网络服务器来管理您的本地会话（OAuth 流程、Xero API 令牌的存储）以及与 Xero API 的交互。
虽然 SPA 是一个诱人的选择（从部署的角度来看它们很方便），但浏览器处理跨站点 cookie 的方式正在发生变化，这打破了 SPA 执行会话管理的方式。
我建议阅读 https://leastprivilege.com/2020/03/31/spas-are-dead/ for more information and a discussion of the implications. The authors of the article created OIDC Client JS，这是一个很棒的库，可以在浏览器中执行基于 PKCE 的 SPA 身份验证，但由于即将发生的浏览器 cookie 更改，它现在仅对同域应用程序有用。
除此之外，Xero API 不支持 CORS，因此即使您完成了 OAuth 流程，浏览器也将无法执行来自您的 Angular 的 API 请求温泉。
回答具体问题：
1) 用户在首次使用您的应用程序时需要登录 Xero 并同意使用您的应用程序。如果您在初始同意后存储服务器端刷新令牌，则您的用户只需通过 Xero SSO 或其他机制 (user/password) 登录到您的本地会话。
2) 要创建初始授权请求，最好使用 node.js 入门应用。它将为您管理 OAuth 重定向流程（它为此使用了优秀的 openid-client 开源包）。
我正在构建 Angular 应与 Xero API 交互的应用程序。 Xero 不为 Typescript (https://developer.xero.com/documentation/libraries/overview), but Node JS SDK seems to be the most useful lib for my task. But I am in stuck in how to organize the workflow between my app and their https://github.com/XeroAPI/xero-node-oauth2-app 提供任何 SDK。我的意思是 - 我想从已经制作过类似应用程序 (Angular + Xero) 的人那里得到一些关于以下问题的建议：
1) 在本指南中 https://developer.xero.com/documentation/oauth2/auth-flow 他们说用户应该使用 URL 打开页面，例如 https://login.xero.com/identity/connect/authorize?... - 但是有什么方法可以让用户在没有 UI 的情况下登录？如果不是-
2）在我的案例中如何进行这个过程？在我的 Angular 应用程序中，我可以制作一个按钮 'Log in to Xero'，它将打开新的 window:
window.open(xeroUrl, 'xeroAuth', 'location=yes,height=770,width=620,scrollbars=yes,status=yes');
在用户登录的地方，提供对其组织的访问权限。会话令牌是在后端创建的。但接下来呢？我如何将这些令牌从那个新 window 传递到我的 Angular 应用程序，然后使用它们调用 Xero API?
3) 打开新 window 登录 Xero 的方式是否适合这种情况，或者也许有更好的方式登录 Xero 并获取会话令牌？
在此先感谢您的帮助。
遗憾的是，SPA 与 Xero 不兼容 API。
您需要一个网络服务器来管理您的本地会话（OAuth 流程、Xero API 令牌的存储）以及与 Xero API 的交互。
虽然 SPA 是一个诱人的选择（从部署的角度来看它们很方便），但浏览器处理跨站点 cookie 的方式正在发生变化，这打破了 SPA 执行会话管理的方式。
我建议阅读 https://leastprivilege.com/2020/03/31/spas-are-dead/ for more information and a discussion of the implications. The authors of the article created OIDC Client JS，这是一个很棒的库，可以在浏览器中执行基于 PKCE 的 SPA 身份验证，但由于即将发生的浏览器 cookie 更改，它现在仅对同域应用程序有用。
除此之外，Xero API 不支持 CORS，因此即使您完成了 OAuth 流程，浏览器也将无法执行来自您的 Angular 的 API 请求温泉。
回答具体问题：
1) 用户在首次使用您的应用程序时需要登录 Xero 并同意使用您的应用程序。如果您在初始同意后存储服务器端刷新令牌，则您的用户只需通过 Xero SSO 或其他机制 (user/password) 登录到您的本地会话。
2) 要创建初始授权请求，最好使用 node.js 入门应用。它将为您管理 OAuth 重定向流程（它为此使用了优秀的 openid-client 开源包）。