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.

Bài viết liên quan

Khám phá FinOps

Khám phá FinOps - công nghệ đám mây

Nhiều doanh nghiệp ngày nay lựa chọn chuyển sang công nghệ đám mây với hi vọng đạt được lợi thế cạnh tranh so với đối thủ nhờ tiềm năng về hiệu quả cao và tiết kiệm chi phí hơn của công nghệ này.
Microservices Roadmap

Microservices Roadmap

- Kafka, RabbitMQ, Amazon SQS: Efficient and reliable message brokers for seamless communication between microservices.
The Data Analyst Roadmap

The Data Analyst Roadmap

**Database Knowledge**: Gain proficiency in working with databases like MySQL, PostgreSQL, or MongoDB.
Architectural patterns in software design

Architectural patterns in software design

Choose the architecture that aligns with your application's unique needs and goals. Each pattern offers a tailored approach to elevate your software system!
Exploring the Technological Marvel Behind Netflix

Exploring the Technological Marvel Behind Netflix

Ever wondered about the tech wizardry that powers your binge-watching adventures on Netflix?