使用Amazon Cognito 託管UI 進行註冊及登入
文章推薦指數: 80 %
您可以顯示預先建置的託管UI,或者透過OAuth 2.0 端點聯合使用者,並由其重新導向至社交登入供應商,例如Facebook、Google、Amazon 或Apple。
使用AmazonCognito託管UI進行註冊及登入-AmazonCognitoAWS文件AmazonCognito開發人員指南使用AWSAmplify設定託管UI使用AmazonCognito主控台設定託管UI使用AmazonCognito託管UI進行註冊及登入AmazonCognito託管UI提供您符合OAuth2.0的授權伺服器。
其中包含預設實作最終使用者流程,如註冊和身分驗證。
您也可以自訂使用者流程,例如新增多重要素驗證(MFA),方法是變更使用者集區組態。
您的應用程式會重新導向至託管UI,它會處理使用者流程。
使用者體驗可以透過提供品牌特定的標誌,以及自訂託管UI元素的設計來進行自訂。
AmazonCognito託管UI也允許您新增功能,讓最終使用者能透過社交供應商(Facebook、Amazon、Google和Apple)、任何符合OpenIDConnect(OIDC)和SAML供應商登入。
主題使用AWSAmplify設定託管UI使用AmazonCognito主控台設定託管UI配置使用者集區應用程式用戶端。
設定使用者集區網域自訂內建的註冊與登入網頁為您的使用者集區定義資源伺服器
使用AWSAmplify設定託管UI
如果您使用AWSAmplify將身分驗證加入Web或行動應用程式,則您可以在AWSAmplifyFramework中,使用此命令列界面(CLI)和程式庫來設定託管的UI。
若要在您的應用程式中新增身分驗證,您可以使用AWSAmplifyCLI,將Auth類別新增至您的專案。
然後,您可以在用戶端程式碼中,使用這些AWSAmplify程式庫來驗證使用者與您的AmazonCognito使用者集區。
您可以顯示預先建置的託管UI,或者透過OAuth2.0端點聯合使用者,並由其重新導向至社交登入供應商,例如Facebook、Google、Amazon或Apple。
當使用者成功與社交供應商進行身分驗證後,AWSAmplify會視需要在使用者集區中建立新使用者,並為您的應用程式提供使用者的OIDC權杖。
如需詳細資訊,請參閱您的應用程式平台適用的AWSAmplifyFramework文件:
JavaScript的AWSAmplify身分驗證
iOS的AWSAmplify身分驗證
Android的AWSAmplify身分驗證
使用AmazonCognito主控台設定託管UI
Originalconsole
建立應用程式用戶端
前往AmazonCognito主控台。
若出現提示,請輸入AWS憑證。
選擇ManageUserPools(管理使用者集區)。
從清單中選擇現有的使用者集區,或建立使用者集區。
在頁面左側的導覽列,在Generalsettings(一般設定)下,選擇Appclients(應用程式用戶端)。
選擇Addanappclient(新增應用程式用戶端)。
為應用程式輸入名稱。
除非您的授權流程需要,否則請清除Generateclientsecret(產生用戶端密碼)選項。
用戶端密碼由具有可保護客戶秘密之伺服器端元件的應用程式使用。
(選用)變更權杖過期設定。
選取AuthFlowsConfiguration(身分驗證流程組態)選項。
如需詳細資訊,請參閱使用者集區身分驗證流程。
選擇Securityconfiguration(安全組態)。
建議您選取Enabled(已啟用)。
(選用)選擇Setattributereadandwritepermissions(設定屬性讀取和寫入許可)。
如需詳細資訊,請參閱屬性許可和範圍。
選擇Createappclient(建立應用程式用戶端)。
請記下Appclientid(應用程式用戶端ID)。
選擇Returntopooldetails(回到集區的詳細資訊)。
設定應用程式。
從主控台頁面左側的導覽列選擇Appclientsettings(應用程式用戶端設定)。
選取CognitoUserPool(Cognito使用者集區)做為EnabledIdentityProviders(啟用的身分供應商)。
注意若要使用諸如Facebook、Amazon、Google或Apple等外部身分供應商(IdP)或者透過OpenIDConnect(OIDC)或SAML等IdP進行登入,請先依照以下步驟所述進行設定,再返回Appclientsettings(應用程式用戶端設定)頁面,並啟用這些項目。
輸入CallbackURL(s)(回呼URL)。
回呼URL表示使用者登入成功後,將重新導向至哪個位置。
輸入SignoutURL(s)(登出URL)。
登出URL表示您的使用者在登出之後,將重新引導至哪個位置。
選取Authorizationcodegrant(授權程式碼授予),傳回使用者集區權杖交換的授權程式碼。
由於權杖不會直接向最終使用者公開,因此他們不太可能遭到入侵。
但自訂應用程式需由後端交換使用者集區權杖所需的授權程式碼。
基於安全考量,強烈建議您的行動應用程式使用授權碼授予流程,搭配代碼交換證明金鑰(PKCE)。
選取Implicitgrant(隱含授予),讓使用者集區JSONWeb權杖(JWT)從AmazonCognito傳回給您。
您可以使用此流程,但不提供後端為權杖交換授權程式碼。
還可以協助您除錯權杖。
您可以啟用Authorizationcodegrant(授權碼授予)以及Implicitcodegrant(隱含程式碼授予),並視需要使用授予。
除非您特別想要排除某個選項,否則請選取AllowedOAuthscopes(允許的OAuth範圍)的所有核取方塊。
唯有當您的應用程式需要代表自己,而不是代表使用者請求存取權杖,才選取Clientcredentials(用戶端憑證)。
選擇Savechanges(儲存變更)。
設定網域
選取Choosedomainname(選擇網域名稱)。
在Domainname(網域名稱)頁面上,輸入網域字首並檢查是否可用,或輸入您自己的網域。
請記錄完整的網域位址。
選擇Savechanges(儲存變更)。
Newconsole
建立應用程式用戶端
前往AmazonCognito主控台。
若出現提示,請輸入AWS憑證。
選擇UserPools(使用者集區)。
從清單中選擇現有的使用者集區,或建立使用者集區。
選取Appintegration(應用程式整合)索引標籤。
在Appclients(應用程式用戶端)下,選取Createanappclient(建立應用程式用戶端)。
選取Apptype(應用程式類型):Publicclient(公有用戶端)、Confidentialclient(機密用戶端),或Other(其他)。
Publicclient(公有用戶端)通常從您的使用者裝置運作,並使用未進行身分驗證和已進行權杖驗證的API。
Confidentialclient(機密用戶端)通常從您信任之中央伺服器上的應用程式(具有用戶端機密和API憑證)運行,並使用授權標頭和AWSIdentityandAccessManagement憑證來簽署請求。
對於Publicclient(公有用戶端)或Confidentialclient(機密客戶端),如果您的使用案例與預先設定的應用程式用戶端設定不同,則請選取Other(其他)。
輸入Appclientname(應用程式用戶端名稱)。
選取您想要在應用程式用戶端中允許的Authenticationflows(身分驗證流程)。
(選用)設定權杖過期。
指定應用程式用戶端的Refreshtokenexpiration(重新整理權杖過期)。
預設值為30天。
您可以將其變更為1小時到10年的任何值。
指定應用程式用戶端的Accesstokenexpiration(存取權杖過期)。
預設值為1小時。
您可以將其變更為5分鐘到24小時的任何值。
指定應用程式用戶端的IDtokenexpiration(ID權杖過期)。
預設值為1小時。
您可以將其變更為5分鐘到24小時的任何值。
重要如果您使用託管UI並設定小於一小時的權杖生命週期,則使用者可根據目前固定在一小時的其工作階段Cookie持續時間,使用權杖。
選擇Generateclientsecret(產生用戶端密碼),讓AmazonCognito為您產生用戶端密碼。
用戶端密碼通常與機密用戶端相關聯。
選擇是否要為此應用程式用戶端Enabletokenrevocation(啟用權杖撤銷)。
這將增加權杖的大小。
如需詳細資訊,請參閱撤銷權杖。
選擇是否要為此應用程式用戶端Preventerrormessagesthatrevealuserexistence(阻止顯示使用者存在的錯誤訊息)。
AmazonCognito將回應不存在之使用者的登入請求,並顯示一則通用訊息,指出使用者名稱或密碼不正確。
(選用)為此應用程式用戶端設定Attributereadandwritepermissions(屬性讀取和寫入許可)。
您的應用程式用戶端可以擁有讀取和寫入使用者集區屬性結構描述之有限子集的許可。
選擇Create(建立OpsItem)。
請記下Clientid(用戶端ID)。
這會識別註冊和登入請求中的應用程式用戶端。
設定應用程式。
在Appintegration(應用程式整合)標籤上,在Appclients(應用程式用戶端)下選取您的應用程式用戶端。
檢閱目前的HostedUI(託管UI)資訊。
在AllowedcallbackURL(s)(允許的回呼URL)下AddacallbackURL(新增回呼URL)。
回呼URL是使用者登入成功後,將重新引導至的位置。
在Allowedsign-outURL(s)(允許的登出URL)下Addasign-outURL(新增登出URL)。
登出URL是使用者在登出之後,將重新引導至的位置。
從Identityproviders(身分供應商)清單中新增至少一個列出的選項。
在OAuth2.0granttypes(OAuth2.0授予類型)下,選取Authorizationcodegrant(授權程式碼授予),傳回使用者集區權杖交換的授權程式碼。
由於權杖不會直接向最終使用者公開,因此他們不太可能遭到入侵。
但自訂應用程式需由後端交換使用者集區權杖所需的授權程式碼。
基於安全考量,強烈建議您的行動應用程式使用授權碼授予流程,搭配代碼交換證明金鑰(PKCE)。
在OAuth2.0granttypes(OAuth2.0授予類型)下,選取Implicitgrant(隱含授予),讓使用者集區JSONWeb權杖(JWT)從AmazonCognito傳回給您。
您可以使用此流程,但不提供後端為權杖交換授權程式碼。
還可以協助您除錯權杖。
您可以啟用Authorizationcode(授權碼)和Implicitcode(隱含程式碼),並視需要使用每個授予。
如果未選取Authorizationcode(授權碼)或Implicitcode(隱含程式碼),並且您的應用程式用戶端擁有用戶端密碼,則您可以啟用Clientcredentials(用戶端憑證)授予。
唯有當您的應用程式需要代表自己,而不是代表使用者請求存取權杖,才選取Clientcredentials(用戶端憑證)。
選取您想要為此應用程式用戶端授權的OpenIDConnectscopes(OpenIDConnect範圍)。
選擇Savechanges(儲存變更)。
設定網域
導覽至Appintegration(應用程式整合)索引標籤尋找使用者集區。
在Domain(網域)旁,選擇Actions(動作),並選取Createcustomdomain(建立自訂網域)或者CreateCognitodomain(建立Cognito網域)。
如果您已設定使用者集區網域,請選擇DeleteCognitodomain(刪除Cognito網域)或者Deletecustomdomain(刪除自訂網域),然後再建立新的自訂網域。
輸入可用的網域字首,以與Cognitodomain(Cognito網域)搭配使用。
如需設定Customdomain(自訂網域)的詳細資訊,請參閱將自有網域用於託管UI
選擇Create(建立OpsItem)。
查看您的登入頁面
您可以用以下URL檢視託管UI的登入頁面。
請記下response_type。
在此情況下,以response_type=code授予授權碼。
https://
成功登入後,AmazonCognito會將使用者集區權杖傳回至Web瀏覽器的網址列。
https://
以下範例為回應隱含授予請求。
您的身分權杖字串將更長。
https://www.example.com/#id_token=123456789tokens123456789&expires_in=3600&token_type=Bearer
如果未立即顯示託管UI頁面的變更,請稍候幾分鐘,然後重新整理頁面。
AmazonCognito使用者集區權杖以RS256演算法登入。
您可以使用AWSLambda解碼並驗證使用者集區權杖,請參閱AWSGitHub網站的解碼並驗證AmazonCognitoJWT權杖。
您的網域會顯示在Domainname(網域名稱)頁面中。
您的應用程式用戶端ID和回呼URL會顯示在Appclientsettings(應用程式用戶端設定)頁面中。
注意AmazonCognito託管UI不支援自訂身分驗證流程。
文件慣用形式下一步驟設定應用程式用戶端此頁面是否有幫助?-是感謝您,讓我們知道我們做得很好!若您有空,歡迎您告知我們值得讚許的地方,這樣才能保持良好服務。
此頁面是否有幫助?-否感謝讓我們知道此頁面仍須改善。
很抱歉,讓您失望。
若您有空,歡迎您提供改善文件的方式。
延伸文章資訊
- 1註冊、登入頁改版的實際流程是如何進行的? - 數位時代
下面是我們原本的註冊/登入畫面截圖,你覺得有什麼可以更好的地方? 來源:Medium ... 接下來PM便會列出需要的畫面與流程,交由我設計UI稿。
- 2UI/UX|註冊登入流程.超完整的深入教學(上) - H.Ching ...
在研究登入與註冊流程的UI/UX 過程中,發現大部分文章都只探討流程設計(例如:應該分多步驟、用圖片增加吸引力、可以加社群登入…
- 3Login Page UI | 登入頁UI
2016-10-1 - Explore Bo-Xiang Huang's board "Login Page UI | 登入頁UI", followed by 115 people on Pin...
- 4UI/UX 設計師|時代革新台灣股份有限公司|台北市松山區
適合你大展身手的工作 ... QQ…看不到,登入後就可以看到適合你的工作! ... 成為改變職場的推動者,評論內容一律匿名呈現!
- 5使用Amazon Cognito 託管UI 進行註冊及登入
您可以顯示預先建置的託管UI,或者透過OAuth 2.0 端點聯合使用者,並由其重新導向至社交登入供應商,例如Facebook、Google、Amazon 或Apple。