Đây là phần 5 trong series Giải ngố authentication. Nếu các bạn chưa xem phần 1, 2, 3, 4 thì có thể xem ở đây:
Nhiều khi tự hỏi OAuth 2.0 là gì? Nghe cao siêu thế nhỉ?
Thực ra thì nó cũng không phải gì cao siêu đâu, nó là cái giao thức để làm mấy chức năng như: Đăng nhập bằng tài khoản Google, Facebook, Github,… đó 😁.
OAuth 2.0, viết tắt của “Open Authorization”, là một tiêu chuẩn được thiết kế để cho phép một trang web hoặc ứng dụng thay mặt người dùng truy cập các tài nguyên được lưu trữ bởi các ứng dụng web khác
Trước đây thì có OAuth 1.0, nhưng nó có nhiều vấn đề nên đã được thay thế bằng OAuth 2.0.
Về lý thuyết của OAuth 2 mình sẽ để ở cuối bài, vì bây giờ các bạn đọc cũng mơ hồ lắm.
Các bạn làm cái demo cùng với mình, đăng ký Google OAuth, đọc flow hoạt động của nó, chạy thử code trong repository của mình cung cấp ở dưới là hiểu.
Oke, bắt đầu nhé.
🥇Đăng ký dịch vụ Google OAuth
Muốn thực hiện chức năng đăng ký / đăng nhập bằng một bênh thứ 3 như Google, Facebook, Github,… thì chúng ta cần phải đăng ký dịch vụ của họ trước, để họ biết App chúng ta là gì, cần truy cập vào thông tin gì,…
Dưới đây mình sẽ hướng dẫn mọi người đăng ký trong môi trường test, nghĩa là chúng ta sẽ đăng ký dịch vụ Google OAuth để chạy trên localhost.
Sau này muốn chạy trên domain thật thì nó có button Publish App, bạn làm theo hướng dẫn của họ là được thôi.
Ở đây mình giả sử URL của mình như sau
🥈1. Tạo project trên Google Cloud Console
Lên google gõ Google Cloud Console và click vào kết quả đầu tiên hoặc click vào link này cho nhanh
Hoặc nếu đây là lần đầu tiên bạn vào thì UI nó sẽ như dưới đây
Tiếp theo chúng ta sẽ tiến hành tạo một project mới.
Nếu lần đầu tiên thì làm như hình dưới đây
🥈2. Tạo OAuth Consen Screen
Chọn OAuth Consen Screen -> User Type là External -> Create
Tại bước 1, chúng ta điền thông tin cách mà App hiển thị khi người dùng đăng nhập bằng Google OAuth
Dưới đây là thông tin của mình, các bạn có thể tham khảo:
App information:
App Logo:
App Domain
Authorized domains: Mình sẽ bỏ qua cái này
Developer contact information:
Chọn Save and Continue
Ở đây các bạn nhấn Add or Remove Scopes để chọn phạm vi data truy cập vào thông tin người dùng.
Mình sẽ chọn userinfo.email và userinfo.profile và nhấn Update.
Tiếp tục nhấn Save and Continue
Vì chúng ta đang ở trạng thái là Testing, nên chúng ta sẽ thêm một số gmail vào để test chức năng đăng nhập bằng google. Chỉ nhưng gmail được thêm vào đây mới có thể đăng nhập được.
Chọn Save and Continue
Cuối cùng là review lại thông tin và nhấn Back to Dashboard
🥈3. Tạo Credential
Chọn Credentials -> Create Credentials -> OAuth client ID
Application type: Web application
Name: Google OAuth MMO Credential
Authorized JavaScript origins: mình sẽ bỏ qua cái này
Authorized redirect URIs: điền vào đây một số url để Google OAuth có thể redirect về sau khi đăng nhập thành công. Mình sẽ điền API end point của mình, Ví dụ: http://localhost:4000/api/oauth/google
Cuối cùng nhấn Create
Sau đó chúng ta sẽ nhận được Client ID và Client Secret.
Các bạn lưu lại 2 cái này để mà dùng nhé (hoặc chọn Download JSON để tải về file json chứa 2 cái này)
Bây giờ thì đọc thử cái flow của Google OAuth nhé, phía dưới có link Github, bạn chỉ cần thay thế các giá trị trong file .env của 2 folder client và server là test được.
🥇Flow của Google OAuth
Mặc dù mình nói là flow Google nhưng Facebook, Github, Twitter, … cũng tương tự như vậy. Mấy ông mạng xã hội này đều dùng chung flow OAuth 2.0 mà.
Giả sử
Thì flow đăng nhập bằng Google OAuth sẽ như sau:
Đấy, nói chung flow cơ bản sẽ diễn ra như thế, còn biến tấu gì thêm là tùy vào hệ thống mỗi người.
🎉Đây là link github demo: https://github.com/duthanhduoc/OAuth-Google
Các bạn cứ clone về, sau đó vào file .env của folder client và server để thay đổi các giá trị tương ứng với các giá trị của các bạn nhé.
Source code trên mình làm thuần, nghĩa là không dùng Passport hay googleapis, để các bạn hiểu flow hoạt động nó như thế nào.
Bây giờ thì chúng ta học lý thuyết thôi 😆
🥇Nguyên tắc của OAuth 2.0
OAuth 2.0 là một giao thức ủy quyền (authorization protocol) chứ không phải là một giao thức xác thực (authentication protocol).
OAuth 2.0 sử dụng access token để ủy quyền cho các ứng dụng truy cập vào các tài nguyên người dùng. Thường thì access token này sẽ theo format JWT (JSON Web Token).
🥇Các bên trong OAuth 2.0
Một hệ thống OAuth 2.0 bao gồm 4 bên:
🥇Phạm vi của OAuth 2.0
Phạm vi (Scopes) là concept quan trọng của OAuth 2.0. Nó cho phép người dùng có thể chọn xem ứng dụng sẽ được phép truy cập vào những tài nguyên nào. Lúc mà chúng ta login thì sẽ thấy có một popup hiện lên thông báo ứng dụng sẽ truy cập vào những thông tin gì của người dùng.