我正在使用当前的 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
。以下是我尝试过的方法:
- 允许
CORS
的“*”来源在我的服务器上的 Azure 配置中Azure Mobile Apps
实例 - 允许
CORS
的“*”来源在我的ASP.NET Core
网络应用程序 - 设置 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
最佳答案
看起来这可能与您可以在门户中配置的重定向 URL 有关。看着documentation为了这。本地运行可能会导致问题,因为默认情况下,应用服务身份验证仅配置为允许从移动应用程序后端进行访问。使用以下步骤更改应用服务设置,以便在本地运行服务器时启用身份验证:
- 登录 Azure 门户
- 导航至您的移动应用后端。
- 在“开发工具”菜单中选择“资源浏览器”。
- 点击“前往”,在新选项卡或窗口中打开移动应用后端的资源浏览器。
- 展开您的应用的 config > authsettings 节点。
- 点击“编辑”按钮即可编辑资源。
- 查找 allowedExternalRedirectUrls 元素,该元素应为 null。将您的 URL 添加到数组中:
“allowedExternalRedirectUrls”:[“http://localhost:3000”,“https://localhost:3000”],
将数组中的 URL 替换为您的服务的 URL,在本例中为 http://localhost:3000用于本地服务。您还可以使用http://localhost:4400 ,具体取决于您的应用程序的配置方式。
- 在页面顶部,点击“读/写”,然后点击“放置”以保存更新。
您还需要将相同的环回 URL 添加到 CORS 白名单设置中:
- 导航回 Azure 门户。
- 导航至您的移动应用后端。
- 点击 API 菜单中的 CORS。
- 在空的允许来源文本框中输入每个 URL。将创建一个新文本框。
- 点击“保存”
后端更新后,您将能够在应用中使用新的环回 URL。
关于javascript - Azure 移动应用程序身份验证回调 403,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40434208/