Question

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

e.g。如果我想显示一些菜单项，如果活跃用户是特定组的成员。

Okta React SDK中有什么内容吗？我做得很短，产品看起来很棒，文档看起来不那么好。

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

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

欢迎任何想法和指示

Answer 1

通过指定groups范围，您可以返回分配给用户的活动groups列表。在您的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
});

这需要在Okta OpenID Connect应用程序中进行额外配置，以接受groups作为范围。关于here (Creating Token with Groups)和here (Okta Answers)的更多信息。

显示基于组成员身份的内容 - OKTA + ReactJS

1 个答案: