如何从密钥库访问机密？

IT技术 reactjs azure-active-directory azure-keyvault
2021-04-16 15:28:18

我创建了示例 react 登录应用程序，其中用户可以通过参考本文档通过 azure 广告通过隐式 oauth2 登录来登录。

成功登录后，我无法在访问令牌的帮助下使用 microsoft graph api 访问密钥库机密。

这是我尝试从密钥库访问机密时遇到的错误 在此处输入图片说明

我还通过在 config.js 文件中添加额外的 keyvault 范围来更新我的代码中的范围。

module.exports ={
  appId: "6c90510c-82fd-4113-8aa5-6abdac107839",
  scopes: [
    "user.read",
    "https://vault.azure.net/user_impersonation"
  ]
};

我还在 azure 门户的应用程序注册中添加了 Keyvault Api 权限。 在此处输入图片说明.

这是我的登录代码

import { UserAgentApplication } from 'msal'
class Login extends React.Component {

  constructor(props) {
    super(props);
    this.submitHandler = this.submitHandler.bind(this);
    this.email = React.createRef();
    this.password = React.createRef();
    this.token = "";
    this.expiresOn = 0;
    this.userAgentApplication = new UserAgentApplication({
      auth: {
        clientId: config.appId,
        clientSecret: "W~~4iZ.uKv~eoAd-hKKU35WJVv.---83Gm",
        redirectUri: "http://localhost:3000/events"
      },
      cache: {
        cacheLocation: "localStorage", // This configures where your cache will be stored
        storeAuthStateInCookie: true, // Set this to "true" if you are having issues on IE11 or Edge
      }
    });

    this.state = {
      error: null,
      isAuthenticated: false,
      user: {}
    };
  }

  login = async () => {
    try {
      // Login via popup
      await this.userAgentApplication.loginPopup(
        {
          scopes: config.scopes,
          prompt: "select_account"
        });

      // After login, get the user's profile
      await this.getUserProfile();
      var user = this.userAgentApplication.getAccount();
    }
    catch (err) {
      console.log("errror", err.message)
      this.setState({
        isAuthenticated: false,
        user: {},
        error: err.message
      });
    }
  }

  logout = () => {
    this.userAgentApplication.logout();
  }

  getUserProfile = async () => {
    try {
      const data = await this.userAgentApplication.acquireTokenSilent({
        scopes: config.scopes
      });

      if (data.accessToken) {
        console.log("Token", data.accessToken);
        this.token = data.accessToken;
        this.expiresOn = data.expiresOn;
      }
    }
    catch (err) {
      console.log("err", err.message);
    }
  }

  render() {
    const { isLogin } = this.props;
    const buttonTitle = isLogin ? "Sign Up" : "Login";
    return (
      <form className="login-form">
        { !isLogin && <IconButton backgroundColor="#0A66C2" font="14px" width='35%' padding='8px' microsoftLoginHandler={this.login} />}
      </form>
    );
  }
}

当我从邮递员那里尝试命中 api 时获得访问令牌后。它显示一些错误。任何人都可以指导我解决此错误，因为我是 Azure Ad 和 Keyvault 的新手

提前致谢

1个回答

考虑到我的代码，它提供了获取访问令牌的功能，该令牌可用于调用 api 以访问密钥库：

请注意，起初我在 ["openid", "profile", "User.Read", "https://vault.azure.net/user_impersonation" 中使用访问令牌调用 api 时收到与您相同的错误消息]，然后我解码令牌并发现它在声明“sub”中不包含“user_impersonation”，因此我更改了代码中的范围，然后它起作用了。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script src="js/jquery-1.10.2.min.js"></script>
        <script type="text/javascript" src="https://alcdn.msftauth.net/lib/1.2.1/js/msal.js" integrity="sha384-9TV1245fz+BaI+VvCjMYL0YDMElLBwNS84v3mY57pXNOt6xcUYch2QLImaTahcOP" crossorigin="anonymous"></script>
    </head>
    <body>
        <button id="btn">click</button>
        <div>
            userName:<input type="text" id="userName" />
        </div>
        <div id="accessToken"></div>
        
        <script type="text/javascript">
            $("#btn").click(function(){
                showWelcome();
            })
            
            const msalConfig = {
                auth: {
                  clientId: "<your azure ad app id>", // pls add api permission with azure key vault
                  authority: "https://login.microsoftonline.com/<your-tenant>",
                  redirectUri: "http://localhost:8848/msalTest/index.html",
                },
                cache: {
                  cacheLocation: "sessionStorage", // This configures where your cache will be stored
                  storeAuthStateInCookie: false, // Set this to "true" if you are having issues on IE11 or Edge
                }
              };
            
            const myMSALObj = new Msal.UserAgentApplication(msalConfig);
            
            //at first, I used scope like ["openid", "profile", "User.Read", "https://vault.azure.net/user_impersonation"]
            //but with this accesstoken, I got the same error as yours
            //and I try to use the scope below, and it worked 
            //I decode the token with jwt, when I get error, the token didn't contains correct scope
            const loginRequest = {
                scopes: ["openid", "profile", "https://vault.azure.net/user_impersonation"],
            };
            
            function showWelcome(){
                myMSALObj.loginPopup(loginRequest)
                    .then((loginResponse) => {
                        console.info(loginResponse);
                        console.log("========= myMSALObj.getAccount() =======");
                        console.log(myMSALObj.getAccount());
                        $("#userName").val(myMSALObj.getAccount().name);
                        getAccessToken();
                    //Login Success callback code here
                }).catch(function (error) {
                    console.log(error);
                });
            }
            
            function getAccessToken(){
                getTokenPopup(loginRequest)
                      .then(response => {
                        $("#accessToken").text(response.accessToken);
                      }).catch(error => {
                        console.log(error);
                      });
            }
            
            function getTokenPopup(request) {
              return myMSALObj.acquireTokenSilent(request)
                .catch(error => {
                  console.log(error);
                  console.log("silent token acquisition fails. acquiring token using popup");
            
                  // fallback to interaction when silent call fails
                    return myMSALObj.acquireTokenPopup(request)
                      .then(tokenResponse => {
                        return tokenResponse;
                      }).catch(error => {
                        console.log(error);
                      });
                });
            }
            
        </script>
    </body>
</html>

在此处输入图片说明

@akhil 我最近也遇到和你一样的问题，我发现我们不能在一个访问令牌中设置不同的api权限组，这意味着如果我们在同一范围内添加graph api和key Vault api，那么我们可以成功获取令牌但它只有第一个 api 权限。就像这
2021-05-22 15:28:18
我还有一个疑问，是否存在范围层次结构？当我在此顺序范围内放置相同的范围时：["openid", "profile", "User.Read", " vault.azure.net/user_impersonation"]它不起作用，当我调试令牌时，它显示为这个“scp”：“openid profile User.Read email”但是当我改变范围的顺序时，这个范围：[“openid”，“profile”，“ vault.azure.net/user_impersonation”，“User.Read” ]在 jwt.io 调试器中它只显示“scp”：“user_impersonation”，其他范围呢？
2021-05-31 15:28:18
如果您提供上述评论的答案，将会非常有帮助
2021-06-11 15:28:18
非常感谢@Tiny-wa，我可以使用访问令牌访问密钥保管库中的机密。
2021-06-15 15:28:18
非常感谢您的回复，我会尝试更新范围
2021-06-16 15:28:18
其它你可能感兴趣的问题
上一篇使用与 mapStateToProps 连接时，“无法读取未定义的属性‘地图’” 下一篇React js 中的条件渲染