REACT.JS - 如何使用 react-openidconnect 调用登录

Posted 2023-03-27

【中文标题】REACT.JS - 如何使用 react-openidconnect 调用登录

【英文标题】：REACT.JS - How to invoke login using react-openidconnect

【发布时间】：2020-09-13 01:16:59

【问题描述】：

我正在尝试使用 react-openidconnect。这是我第一次接触 OAuth 和 OpenIdConnect。我按照示例 (https://www.npmjs.com/package/react-openidconnect) 进行了所有操作，但我不知道如何重定向到 Auth Server 提供的登录页面。我试图用谷歌搜索，但没有找到任何东西。

【参考方案1】：

通常您会因以下操作之一而重定向：

点击登录按钮 由于没有有效的访问令牌并且无法调用 API

在这两种情况下，您都通过调用 userManager.signInRedirect 发出授权重定向。

有关示例，请参阅 this class。

出于兴趣，我的博客上有一些可视化教程来解释如何集成您的包装库使用的 oidc-client 库。

Initial SPA Code Sample Write Up

如果有帮助，我的博客还有一些更高级的帖子和示例，包括ReactJS 中的一篇。

【参考方案2】：

在renderNotAuthenticated 中设置的JSX（例如docs 中的<div>You are not authenticated, please click here to authenticate.</div>）在可点击的div 元素中呈现（有关详细信息，请参阅source），因此您应该被重定向点击一下。

如果您没有被重定向，您应该会在浏览器的控制台中看到一个错误。