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

问题描述

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

I'm using Okta for user authentication of my SPA (+ Express backend).How can I use the Okta API to show/hide content based on group membership?

例如如果我想显示一些菜单项(如果活动用户是特定组的成员).

e.g. if I want to show some menu items if the active user is a member of a specific group.

Okta React SDK中有什么吗?我要说的很简短，产品似乎很棒，文档似乎没那么好.

Is there anything in the Okta React SDK?I'm coming up short, product seems great, docs seems less so.

我已经找到此API https://developer.okta.com/docs/api/resources/users.html#get-member-groups

I've found this API https://developer.okta.com/docs/api/resources/users.html#get-member-groups

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

I'm however unsure of how to best use this from my app. when and where should I call it, should I store group membership in some object and then pass that to all my sub components?

欢迎任何想法和方向

推荐答案

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

By specifying the groups scope, you can return a list of active groups the user is assigned to. In your React app, use @okta/okta-react to overload the default params by passing the following into 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 的示例代码.

Sample code taken from the React Quickstart.

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

Next, use the getUser() method to return the full user object from the userInfo API.

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

这篇关于根据组成员身份显示内容-OKTA + ReactJS的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！