javascript - Azure 移动应用程序身份验证回调 403

Question

我正在使用当前的 Azure Mobile Apps SDK对于 JavaScript客户端并使用以下tutorial 。我已经在 Azure 中注册了所有主要提供商它们都包含正确配置的应用程序 ID 和 key 。我正在使用 SDK 中的样板代码来调用 Azure Mobile Apps提供商登录(Twitter、Google、MSFT、FB)将在我的网络应用程序中弹出一个窗口，并允许登录进行身份验证。身份验证有效。

问题是回调过程回到我的原始网络应用程序。我得到一个403 (Forbidden)错误并且浏览器窗口中显示以下内容:

You do not have permission to view this directory or page.

以下是一些示例回调 URL(为了简洁起见，对值进行了模糊处理)

https://myservice.azurewebsites.net/.auth/login/facebook/callback?code=AQB123&state=nonce%3D3
https://myservice.azurewebsites.net/.auth/login/twitter/callback?oauth_token=FhGv&oauth_verifier=abc123
https://myservice.azurewebsites.net/.auth/login/google/callback?state=nonce%3Dc&authuser=0&session_state=4cf501&prompt=none#

问题是，如果我将上面的任何完整 URL 粘贴到新的浏览器窗口中并进行调用，我会在浏览器中收到以下 Azure 消息:

You have successfully signed in

好的，登录和身份验证有效，但应用程序的回调似乎失败，403 forbidden 。以下是我尝试过的方法:

1. 允许 CORS 的“*”来源在我的服务器上的 Azure 配置中 Azure Mobile Apps实例
2. 允许 CORS 的“*”来源在我的ASP.NET Core网络应用程序
3. 设置 super 非限制性 Content-Security-Policy在index.html

<meta http-equiv ="Content-Security-Policy" content="default-src * 'unsafe-inline'; script-src * 'unsafe-inline'; connect-src *; img-src *; style-src * 'unsafe-inline'">

这个过程和代码对我来说并不新鲜。这一切都曾经在旧的Azure Mobile Services中起作用。实例现已退役，取而代之的是 Azure Mobile Apps (没有上面的content-security-policy；我以前从来不需要它)。我不认为这是JavaScript我这边的代码问题要么是因为当 WindowsAzure.MobileServiceClient 时， promise 甚至没有从这个过程中返回。被调用。

有谁知道是什么阻碍了整个过程的完成并导致了这个 403 forbidden身份验证成功后从提供商登录窗口？

更新:我就此创建了一篇博客文章以帮助其他人并提供全面的解释:Configure Azure Mobile App Authentication Server-Side for Use With JavaScript Clients

Answer 1

看起来这可能与您可以在门户中配置的重定向 URL 有关。看着documentation为了这。本地运行可能会导致问题，因为默认情况下，应用服务身份验证仅配置为允许从移动应用程序后端进行访问。使用以下步骤更改应用服务设置，以便在本地运行服务器时启用身份验证:

1. 登录 Azure 门户
2. 导航至您的移动应用后端。
3. 在“开发工具”菜单中选择“资源浏览器”。
4. 点击“前往”，在新选项卡或窗口中打开移动应用后端的资源浏览器。
5. 展开您的应用的 config > authsettings 节点。
6. 点击“编辑”按钮即可编辑资源。
7. 查找 allowedExternalRedirectUrls 元素，该元素应为 null。将您的 URL 添加到数组中:

“allowedExternalRedirectUrls”:[“http://localhost:3000”，“https://localhost:3000”]，

将数组中的 URL 替换为您的服务的 URL，在本例中为 http://localhost:3000用于本地服务。您还可以使用http://localhost:4400 ，具体取决于您的应用程序的配置方式。

在页面顶部，点击“读/写”，然后点击“放置”以保存更新。

您还需要将相同的环回 URL 添加到 CORS 白名单设置中:

1. 导航回 Azure 门户。
2. 导航至您的移动应用后端。
3. 点击 API 菜单中的 CORS。
4. 在空的允许来源文本框中输入每个 URL。将创建一个新文本框。
5. 点击“保存”

后端更新后，您将能够在应用中使用新的环回 URL。