Lấy cliet id của gmail
Chào mọi người, Show Trong thời buổi hiện nay với việc tất cả các nền tảng, ứng dụng được kết nối với nhau thì việc đồng bộ với một số nền tảng lớn như Google, Facebook, Twitter, etc... là một điều hết sức cần thiết trong ứng dụng của chúng ta. Vào một số diễn đàn lớn như Stackoverflow, Medium, Hackermon, etc... chúng ta đều biết là sẽ phải tạo một tài khoản sau đó join vào đó. Nhưng sẽ tuyệt vời và thuận tiện hơn khi bạn có thể join vào mà không cần lập account. Lý do là bởi vì không phải ai cũng có thể nhớ được một đống account cho dù nó là những account do chính mình tạo ra .Hiểu được điều này, hôm nay mình xin chia sẻ với mọi người cách xác thực (hay còn gọi là Authentication) với Google thông qua OAuth. Mình sẽ sử dụng Nodejs, MongoDB và một số third library hỗ trợ: Expressjs, Passportjs, Mongoose (các thư viện này sẽ giúp chúng ta thao tác với nodejs, mongodb và đồng bộ với Google một cách dễ dàng hơn) để xây dựng ứng dụng. Ok, bắt đầu thôi !! OAuth FlowTrước khi đi vào implementing thì mình sẽ giải thích OAuth để mọi người có cái nhìn khái quát nhất. Ở trên mình có Diagram về OAuth Flow, miêu tả hành động, cách thức và quá trình Client, Server và Goole tương tác, giao tiếp với nhau. Vậy thì OAuth là cái quái gì ?Nói về OAuth thì cơ bản nó là một phương thức chứng thực, nhờ đó mà một web web servie hay một application thứ 3 (ứng dụng của chúng ta) có thể đại diện cho người dùng truy cập vào các tài nguyên của người dùng nằm trên một số dịch vụ nào đó (có thể là Facebook, Google, LinkedIn, etc... ). Khi các công ty như Facebook cung cấp API cho bên thứ 3 để có thể truy cập vào tài nguyên của người dùng, qua đó mở nên một thị trường mới gọi là 3rd party app, ví dụ như tweetdeck hay hootsuite. Mình sẽ đi vào giải thích chi tiết từng quá trình để mọi người có thể hiểu rõ nhất về cách chúng giao tiếp với nhau. Lưu ý: Đây là Diagram miêu tả chung về OAuth Flow nên chúng ta có thể áp dụng với tất cả các nền tảng khác nhau Facebook, LinkedIn, Spotify đều được nhé, ở đây mình sẽ làm ví dụ về Google. ProcessPhase 1:
Và toàn bộ, toàn bộ bước trên sẽ do Passportjs thao tác và trả về thông tin của user đó. Phase 2:
Trên đây là toàn bộ quá trình khi người dùng Login thông qua Facebook, Server và Google đã tâm sự một hồi và bằng một phép màu nào đó, chúng ta đã Logged , fantasticHiểu được concept cũng như toàn bộ quá trình là điều rất quan trọng vì nó sẽ giúp chúng ta thao tác, implement code một cách dễ dàng. ImplementationSau khi đã hiểu được concept và quá trình rồi thì bước này sẽ easy như ăn cơm thôi. Mình sẽ implement và sau đó sẽ show ra user info của người dùng dưới dạng json. 1. Setup passportjsMình sẽ sử dụng thư viện Passportjs để xử lý Goole OAuth. Trong Passport Library, bao gồm 2 thư viện:
Nếu các bạn dùng Facebook thì có thể vào passportjs.org, sau đó View All Strategy và tìm kiếm passport-facebook. Ở đây mình dùng Goole Strategy: passport-google-oauth2. Setup expressjs app, passportjs, passport-google-oauth20. In
Sau đó bạn cần phải lấy Client ID và Client Secret Đối với Facebook hoặc các nên tảng khác thì cũng tương tự, Client ID và Client Secret. Sau khi lấy được Client ID và Client Secret thì chúng ta sẽ pass vào GoogleStrategy. In
In
Sau đó setup route để cho user gửi request. In
Ở đây khi người dùng login (request: Sau khi người dùng login thì Google sẽ redirect về Server để cho server xử lý, lúc này chúng ta cần tạo 1 route để hứng response từ thằng Google trả về. In
Một lần nữa lại phải nhờ thằng Passport xử lý hộ .OK đến đây thì các bạn có thể test bằng cách visit vào
Oke vậy là chúng ta đã lấy được dữ liệu từ Google trả về rồi, giờ là lúc để lưu nó vào Database hoặc làm bất cứ điều gì chúng ta muốn thôi 2. Setup MongoDBMình sử dụng Database online của mlab. Các bạn cũng có thể dùng local database để lưu trữ. It's fine. In
Ở đây mình dùng mongodb online, nên
Các bạn cũng có thể dùng local với
Tạo In
Save user info vào Database, mình đã tách đoạn code xử lý passport ra một file riêng sau đó In
Tiếp theo là sử dụng Bài hướng dẫn hơi dài nên các bạn có thể đọc qua để hiểu về nó. Bản chất của 2 function này là generate ra một đoạn mã nào đó (token) sau đó biên dịch ra (decoded) để xác thực người dùng. In
Giờ là lúc để enable cookie app. Do
In
Set thời gian (30 days) và cookie key (In OK we were finished!!! 3. Test AuthenticationMình sẽ tạo 1 route để test xem, sau khi chúng ta login bằng Goole xong thì có hiển thị được thông tin không nhé. In
ở đây mình mong muốn sau khi access vào route này, server sẽ trả về thông tin của mình. Sau khi login xong, bạn visit vào url:
Bump, đây là kết quả sau khi visited :
Trong Database cũng được khởi tạo: SummaryAuthentication là một vấn đề không mới nhưng để hiểu và xử lý nó đúng cách, hiểu quả là một điều không hề dễ dàng. Chúng ta nên tìm hiểu kỹ concept, process của nó trước khi đi thực hiện để tránh hiểu sai vấn đề dẫn đến gặp bug trong quá trình thực hiện. Vậy là mình đã chia sẻ với các bạn cách Login thông qua Google, bài chia sẻ khá dài và mình cũng không thể show được tất cả code nên các bạn có thể visited repo của mình trên github nhé. Cảm ơn mọi người đã đọc bài! Happy coding!! Diagram: StephenGrider |