reactjs - 根据组成员身份显示内容 - OKTA + ReactJS

Question

我正在使用 Okta 进行 SPA(+ Express 后端)的用户身份验证。 如何使用 Okta API 根据群组成员身份显示/隐藏内容？

例如如果事件用户是特定组的成员，我想显示一些菜单项。

Okta React SDK 有什么东西吗？ 我的想法很短，产品看起来很棒，但文档似乎不太好。

我找到了这个API https://developer.okta.com/docs/api/resources/users.html#get-member-groups

但是，我不确定如何从我的应用程序中最好地使用它。我应该何时何地调用它，是否应该将组成员身份存储在某个对象中，然后将其传递给我的所有子组件？

欢迎任何想法和方向

Answer 1

通过指定组范围，您可以返回用户分配到的事件组列表。在您的 React 应用程序中，使用 @okta/okta-react通过将以下内容传递到 Security 中来重载默认参数:

<Security issuer={config.issuer}
          client_id={config.client_id}
          redirect_uri={window.location.origin + '/implicit/callback'}
          scope={['openid', 'email', 'profile', 'groups']}
          onAuthRequired={({history}) => history.push('/login')} >

示例代码取自 React Quickstart .

接下来，使用 getUser() 方法从 userInfo API 返回完整的用户对象。

this.props.auth.getUser().then(profile => {
  const groups = profile.groups;
  // Do your show/hide logic here
});

This requires extra configuration in your Okta OpenID Connect app to accept groups as a scope. More info on that here (Creating Token with Groups) and here (Okta Answers).