Hướng dẫn sử dụng đăng nhập với FB, GG Cognito

Hướng dẫn sử dụng đăng nhập với Facebook, Google bằng AWS Cognito

Share Everywhere

Table of contents

Step 1: Register app (FB)

  1. Create a developer account with Facebook.
  2. Sign in with your Facebook credentials.
  3. From the My Apps menu, choose Create New App.
  4. Enter a name for your Facebook app and choose Create App ID.
  5. On the left navigation bar, choose Settings, and then choose Basic.
  6. Note the App ID and the App Secret. You will use them in the next section.
  7. Choose + Add Platform from the bottom of the page.
  8. Choose Website.
  9. Under Website, enter a sign-in URL for your app client endpoint into Site URL. Your sign-in URL should be in the following format: https://your_user_pool_domain/login?response_type=code&client_id=your_app_client_id&redirect_uri=your_callback_url
  10. Choose Save changes.
  11. For App Domains, enter your user pool domain. https://your_user_pool_domain
  12. Choose Save changes.
  13. From the navigation bar, choose Products, and then Set up from Facebook Login.
  14. From the navigation bar, choose Facebook Login and then Settings. Enter your redirect URL into Valid OAuth Redirect URIs. The redirect URL will consist of your user pool domain with the /oauth2/idpresponse endpoint. https://your_user_pool_domain/oauth2/idpresponse
  15. Choose Save changes.

Bước 2: Configure ở cognito

  • Chọn sign-in experience
  • Chọn Federated identity provider sign-in > Add identity provider > Facebook
  • Configure như dưới đây:
Hướng dẫn sử dụng đăng nhập với FB, GG Cognito
Hướng dẫn sử dụng đăng nhập với FB, GG Cognito
 

Testing:

App integration > App clients and analytics > Chọn app

Hướng dẫn sử dụng đăng nhập với FB, GG Cognito
Hướng dẫn sử dụng đăng nhập với FB, GG Cognito
Hướng dẫn sử dụng đăng nhập với FB, GG Cognito
Hướng dẫn sử dụng đăng nhập với FB, GG Cognito

Lưu ý: Nếu gặp lỗi:

Hướng dẫn sử dụng đăng nhập với FB, GG Cognito
Hướng dẫn sử dụng đăng nhập với FB, GG Cognito

thì tức là domain đang sai hoặc thiếu, cần kiểm tra lại ở những đoạn sau:

  1. Under Website, enter a sign-in URL for your app client endpoint into Site URL. Your sign-in URL should be in the following format: https://your_user_pool_domain/login?response_type=code&client_id=your_app_client_id&redirect_uri=your_callback_url
  2. For App Domains, enter your user pool domain. https://your_user_pool_domain
  3. From the navigation bar, choose Facebook Login and then Settings. Enter your redirect URL into Valid OAuth Redirect URIs. The redirect URL will consist of your user pool domain with the /oauth2/idpresponse endpoint. https://your_user_pool_domain/oauth2/idpresponse

Khi cả 3 đúng rồi thì sẽ khắc phục được lỗi trên!

Mở rộng: register app với 1 số MXH khác: [https://docs.aws.amazon.com/cognito/latest/developerguide/cognito-user-pools-configuring-federation-with-social-idp.html]

Đăng nhập với google:

Bước 1: Tạo app google:

Hướng dẫn sử dụng đăng nhập với FB, GG Cognito
Hướng dẫn sử dụng đăng nhập với FB, GG Cognito
 

Sau khi tạo app, thì nhấn vào credentials

Hướng dẫn sử dụng đăng nhập với FB, GG Cognito
Hướng dẫn sử dụng đăng nhập với FB, GG Cognito
​  Hướng dẫn sử dụng đăng nhập với FB, GG Cognito  ​
Hướng dẫn sử dụng đăng nhập với FB, GG Cognito
Hướng dẫn sử dụng đăng nhập với FB, GG Cognito
Hướng dẫn sử dụng đăng nhập với FB, GG Cognito

Authorized JavaScript origins field.

https://<your-user-pool-domain>

Authorized Redirect URIs field.

https://<your-user-pool-domain>/oauth2/idpresponse

Testing:

Hướng dẫn sử dụng đăng nhập với FB, GG Cognito
Hướng dẫn sử dụng đăng nhập với FB, GG Cognito
Hướng dẫn sử dụng đăng nhập với FB, GG Cognito  ​
Hướng dẫn sử dụng đăng nhập với FB, GG Cognito  ​
Hướng dẫn sử dụng đăng nhập với FB, GG Cognito  ​
Hướng dẫn sử dụng đăng nhập với FB, GG Cognito  ​

 

Bạn thấy bài viết này như thế nào?
0 reactions

Add new comment

Restricted HTML

  • Allowed HTML tags: <a href hreflang> <em> <strong> <cite> <blockquote cite> <code> <ul type> <ol start type> <li> <dl> <dt> <dd> <h2 id> <h3 id> <h4 id> <h5 id> <h6 id>
  • Lines and paragraphs break automatically.
  • Web page addresses and email addresses turn into links automatically.
Image CAPTCHA
Enter the characters shown in the image.

Bài viết liên quan

Cùng mình đập hộp xem bên trong có gì nhé.

Câu chuyện học AWS nên học từ đâu và trở thành AWS Community Builder

Sau 2 tháng đăng ký làm thành viên của AWS Community Builder thì hôm nay mình đã nhận được quà của AWS từ Singapore.
Ngoài ra còn có rất nhiều câu chuyện và chia sẻ kỹ thuật hữu ích nữa

Ngoài ra còn có rất nhiều câu chuyện và chia sẻ kỹ thuật hữu ích nữa

Năm nay mình có dịp trở lại với Singapore, một đất nước rất xanh, sạch, và đẹp, ở đâu cũng thấy mọi người tập thể dục ngoài trời
Democratize analytics and machine learning with no-code AWS services

Democratize analytics and machine learning with no-code AWS services

Access to all data for fast analytics at scale is key for 360-degree projects involving data engineers
Train ML models quickly and cost-effectively with Amazon SageMaker

Train ML models quickly and cost-effectively with Amazon SageMaker

Training machine learning models at scale often requires significant investments
Go beyond insights to predictive analytics with Amazon Redshift ML and Amazon SageMaker Canvas

Go beyond insights to predictive analytics with Amazon Redshift ML and Amazon SageMaker Canvas

Organizations are managing more data than ever before, and data use is only continuing to expand.