8

我一直在尋找到建立一個登錄的web應用程序,讓客戶查看S3託管的數據後發現,AWS Cognito有處理大部分的認證流程的對我來說是託管的Web UI [link],發行我面臨的是我無法找到如何將Web UI的輸出集成到我的應用程序中。 Cognito中的大多數現有文檔都只是引用瞭如何使用各種AP​​I創建自己的UI,這讓我對我的問題感到困惑。Cognito託管UI

在Cognito託管的用戶界面中是否創建了任何信息?

亞馬遜說,你可以整合分鐘Cognito驗證的登錄,但我一直在尋找這幾個星期,並不能弄明白。

+0

您是否有指向託管用戶界面的任何詳細信息的鏈接? – BryceH

+0

@BryceH我一直在嘗試修改amazon-cognito-auth-js [link](https://github.com/aws/amazon-cognito-auth-js)以允許託管UI與我的應用進行通信。不幸的是,我唯一的其他信息是促銷'我們有一個新的東西,檢查出'關於用戶界面的亞馬遜帖子 – Fyreye

回答

20

我也掙扎與此;我同意這個文件有點輕。

您所提供的鏈接顯示您的Cognito UI URL可能看起來像:

https://<your_domain>/login?response_type=code&client_id=<your_app_client_id>&redirect_uri=<your_callback_url> 

的想法是,你的用戶發送到此URI,他們做他們的生意,然後他們重定向回你帶有某種令牌或代碼。您可以點擊左側導航欄中的「域名」來查看您的域名。

應用客戶端設置和OAuth格蘭特類型

首先,檢查你的App客戶端的設置。您需要將您的回叫網址列入白名單(Cognito將重新導向回到),並確保至少允許一個OAuth流量。

Cognito App client settings

「授權碼金」將返回一個授權碼,然後您可以發送到oauth2/token端點得到的access_token,id_token和refresh_token。如果您有後端應用程序並希望刷新令牌,這是一個不錯的選擇。

「隱性補助」是我用我的前端應用程序的內容。它將直接向我的前端應用程序返回訪問令牌和ID令牌。

要使用隱式授予,請在Cognito UI URL中將response_type=code更改爲response_type=token

隱格蘭特例

所以,如果認證成功後,您的重定向是這樣的:

https://localhost:3000/#access_token=eyJraWQiOiJG...&id_token=eyJraWQZNg....&token_type=Bearer&expires_in=3600 

你只需要剝離id_token關閉URL並將其發送給Cognito,與您的用戶池作爲登錄地圖中的關鍵字。在Javascript:

AWS.config.credentials = new AWS.CognitoIdentityCredentials({ 
    IdentityPoolId: 'us-east-1:bxxxxxx6-cxxx-4xxx-8xxx-xxxxxxxxxx3c', 
    Logins: { 
     'cognito-idp.us-east-1.amazonaws.com/us-east-1_ixxxxxxx': idToken 
    } 
}); 

哪裏idToken是回來給你重定向ID令牌。

授權碼交付式

如果使用授權碼交付式代替(RESPONSE_TYPE =代碼),您的後端將需要調用/oauth2/token端點的令牌交換代碼。這個電話看起來是這樣的:

curl -X POST \ 
    https://<my-cognito-domain>.auth.us-east-1.amazoncognito.com/oauth2/token \ 
    -H 'content-type: application/x-www-form-urlencoded' \ 
    -d 'grant_type=authorization_code&scope=email%20openid%20profile&redirect_uri=https%3A%2F%2Flocalhost%3A3000%2F&client_id=15xxxxxxxxxxxxxx810&code=54826355-b36e-4c8e-897c-d53d37869ee2' 

然後,你可以給這個身份證代幣Cognito如上。

UI注意

我的應用程序是在一個新的標籤,當用戶點擊一個鏈接彈出的Cognito UI。當重定向回到我的應用程序時,我使用postMessage()將令牌發送到父窗口,然後關閉新的選項卡。我認爲這是一種比較常見的模式。

我還沒有嘗試過,但我猜想將UI渲染爲iframe是不允許的,因爲這是針對點擊頂起的緩解。 Source


我希望這至少在一定程度很有幫助。祝你好運!

+0

我無法讓您的授權代碼授權示例在python Chalice lambda中工作,使用python「Requests」庫而不是curl來創建POST。我敢肯定,用戶池設置好等等等作爲一個請求在另一個方向使用權證庫(需要應用程序ID)工程不幸的是,你在這裏提供的信息似乎是目前最好的資源在任何地方:)這是我第一次發現AWS功能上的文檔是如此瘋狂追逐 – Vorsprung

+0

@Vorsprung如果你想發佈一個包含你的Python代碼和任何錯誤的問題,我會高興地看一看。 –

+0

非常感謝,非常好的文檔。但是,您是如何將postMessage()集成到Cognito UI中的? –

0
+3

這裏的主要問題是所有這些文章涵蓋的是UI的設置,而不是需要結合用戶界面和(比如說)從EC2的後端託管的網站(使用JS或PHP),他們有一些示例應用程序(然後你可以主持和運行自己),但他們不解釋自己,也不是功能齊全[case1](https://github.com/aws/amazon-cognito-auth-js/issues/25)[case2](https://forums.aws.amazon.com/thread.jspa?threadID= 259132&tstart = 25) – Fyreye