4

我使用當前Azure Mobile Apps SDKJavaScript客戶端和使用以下tutorial。我已經在Azure中註冊了所有主要提供商,他們都包含正確配置的應用ID和密碼。我使用SDK中的樣板代碼調用Azure Mobile Apps,提供者登錄(Twitter,Google,MSFT,FB)會在我的Web應用程序中彈出一個窗口並允許登錄進行身份驗證。認證工程Azure移動應用身份驗證403在回調

問題是回到我的原始web應用程序的回調過程。我收到一個403 (Forbidden)錯誤,並且以下內容顯示在瀏覽器窗口中:

您沒有權限查看此目錄或頁面。

下面是一些示例回調網址(爲簡便起見混淆值)

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#

的事情是,如果我採取任何完整的網址,上面並粘貼到一個新的瀏覽器窗口並撥打電話我在瀏覽器中收到以下Azure消息:

您已經

OK成功簽約所以工作,但它似乎回調到應用程序的登錄和認證與403 forbidden失敗。下面是我試過的東西:

  1. 允許在服務器上的「*」的起源爲CORS在Azure中配置我的Azure Mobile Apps例如
  2. 允許「*」爲CORS起源於我ASP.NET Core Web應用程序
  3. 設置一個超級非限制性Content-Security-Policyindex.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時,甚至不會從此進程返回承諾。

有沒有人知道什麼阻止了完整的進程,並在驗證成功後從提供程序登錄窗口中導致此403 forbidden

更新:我創建了這個博客中,幫助他人,並提供詳盡的解釋:Configure Azure Mobile App Authentication Server-Side for Use With JavaScript Clients

+1

我能找到的唯一的東西(你可能已經看到了)在官方文檔中是這樣的:https://azure.microsoft.com/en-gb/documentation/articles/app-service-mobile-html-如何使用客戶端庫/#認證 –

+0

@MartynC - 你知道我一直在使用那個確切的鏈接,但有一個部分在Azure門戶中沒有工作。有指示可以進入**資源管理器**並修改配置以允許重定向URL。我有一天嘗試去那裏,Azure永遠不會打開頁面;它只是空着。 ......我從未回去再試。猜猜看,這是行得通的!因此,如果您提供的答案詳細介紹了該鏈接中名爲「如何爲您的移動應用服務配置外部重定向網址」的部分中的要求,我會給您獎勵 – atconway

+0

當然,感謝您讓我發佈 –

回答

4

看起來這可能重定向,您可以在門戶網站的URL配置有關。看看這個documentation。本地運行可能會導致問題,因爲默認情況下,應用程序服務身份驗證僅配置爲允許您的移動應用程序後端進行訪問。使用以下步驟來更改應用程序服務設置運行服務器時本地啓用身份驗證:

  1. 登錄到Azure的門戶
  2. 導航到移動應用的後端。
  3. 在開發工具菜單中選擇資源管理器。
  4. 點擊開始在新選項卡或窗口中打開移動應用程序後端的資源管理器。
  5. 爲您的應用展開config> authsettings節點。
  6. 單擊編輯按鈕以啓用對資源的編輯。
  7. 找到allowedExternalRedirectUrls元素,該元素應該爲null。添加您的網址,在一個陣列:

"allowedExternalRedirectUrls": [ "http://localhost:3000","https://localhost:3000"],

與您的服務,在本例中是http://localhost:3000本地服務的網址陣列中更換網址。您也可以使用http://localhost:4400,具體取決於您的應用程序的配置。

  1. 點擊頁面頂部的Read/Write,然後點擊PUT保存更新。

您還需要在同一環回的網址添加到白名單CORS設置:

  1. 導航回到Azure的門戶。
  2. 導航到您的移動應用程序後端。
  3. 單擊API菜單中的CORS。
  4. 在空的Allowed Origins文本框中輸入每個URL。一個新的文本框被創建。
  5. 單擊保存

後臺更新後,您將能夠使用新的環中網址的應用程序。

+0

您在這裏救了我的培根。非常感謝您分享您的知識! –

相關問題