如何从ReactJS应用程序调用受Azure AD保护的Azure函数

时间:2020-08-18 23:14:26

标签: reactjs azure-active-directory azure-functions

本文紧随https://cuteprogramming.wordpress.com/2019/01/02/authenticate-an-azure-function-with-azure-active-directory/。我已经使用Azure AD应用程序(由客户端ID,颁发者url,客户端密钥等定义的)创建了Azure AD安全的Azure函数。

但是我不知道如何从我的reactjs代码中调用它

我是否必须执行两次连续的http调用:一次获得访问令牌,然后第二次达到邮递员示例(在上一篇文章中所述)的我的azure函数?

在这种情况下,可以使用浏览器开发人员工具从js代码中检索Azure AD应用程序的详细信息(客户端ID,秘密ID等),然后任何人都可以使用它来访问我的Azure函数。真的安全吗?还是我想念什么?

我如何以安全的方式从我的react应用程序中调用我的azure函数(我希望我的React应用程序只能访问我的azure函数)?

谢谢

1 个答案:

答案 0 :(得分:1)

如果要访问React AD中由Azure AD投影的Azure函数应用,请参考以下步骤

  1. 将您的React应用程序中的Azure AD身份验证与Implicit grant flow集成。之后,用户访问您的应用程序时,需要输入其AD帐户以获取访问令牌

  2. 客户端将此accessToken交换为“ App Service令牌”。它通过对内容为https://{app}.azurewebsites.net/.auth/login/aad的{​​{1}}进行POST。这将返回一个{ "access_token" : "{token from Facebook}" }

  3. 在名为authenticationToken的标头中使用authenticationToken。使用该标头向您的函数应用发出所有请求。

有关更多详细信息,请参阅here。此外,关于如何集成Azure AD,请参考samplehere