web api security tập 2

Ái chà, tiếp tục với web api thôi. Trong phần 2 này, mình sẽ thực hiện gọi api bằng ajax, có sử dụng Authorize. Do đó, để gọi được Get action, cần phải thông qua 1 bước đăng nhập. Đó là nội dung của bài viết này, hãy bắt tay vào làm thử nhen.

ajax

register

Tất nhiên là phải đăng ký tài khoản rồi vì security thông qua membership mà. Các bước thực hiện của mình sẽ là Register > Login > Get values

Hãy xem qua đoạn code đăng ký sau:

Mọi thứ vẫn đơn giản. Data truyền vào là 1 json object, các properties của object phụ thuộc vào model của action Register trong api

Có thể bạn sẽ gặp chút rắc rối khi đăng ký password với các điều kiện, để đơn giản thì hãy lược bỏ các điều khoản đó trong App_Start > IdentityConfig.cs

identity config

Nhớ lại phần 1 mình đã chỉnh connection string để db được tạo ra trong sql server. Hãy bấm nút register và mở db ra để xem kết quả

asp.net database

Vậy là thao tác đăng ký đã thành công. Từ bây giờ bạn chỉ cần sử dụng account này để đăng nhập.

ajax promise

Nói một chút về ajax promise: mỗi khi thực hiện một lệnh gọi ajax, kết quả trả về sẽ là 1 jquery XMLHttpRequest (jqXHR) object, object này implements từ 1 interface gọi là promise. Ta có thể viết ajax và sử dụng success anonymous function hoặc sử dụng promise để viết callback. Bản thân mình thích viết bằng promise hơn vì code sẽ rõ ràng hơn, nhưng đó là ý kiến cá nhân.

Trở lại chủ đề chính, viêc mình muốn nói ở đây là, sau khi đăng ký xong bạn sẽ phải đăng nhập mới có thể get values được. Hãy xem 2 cách viết sau:

Sử dụng anonymous function, gọi trực tiếp trong callback

Sử dụng promise

Cho dù bạn lựa chọn cách nào thì cũng ok cả, nhưng mình sẽ sử dụng cách thứ 2 để thực hiện: nếu login thành công thì get values, ngược lại thì hành động khác (ví dụ như báo lỗi...)

when login, then get values

Yeah, rất ngắn gọn, rõ ràng và dể hình dung. Đó là nội dung của sự kiện button get values click

Mình sẽ đi lần lượt từng function

login

Không có gì là phức tạp, gọi action '/token' là vì custom route của web api (Account/GetExternalLogin), data truyền vào là 1 object (không phải json, các bạn sẽ biết điều này ở phần 3). Một điều chú ý là, function login sẽ trả về đối tượng ajax, đây là mấu chốt của promise, và đối tượng response khi thành công sẽ là 1 object có chứa:

login response

Cái bạn cần quan tâm ở đây là 2 peoperties: access_token và token_type. Hãy lưu access_token vào session. (web api sessionStorage)

Có thể (mà chắc chắn) là bạn sẽ bị dính lỗi cors ở bước login, mặc dù ở bài 1 bạn đã enable cors. Tại sao ư? Bạn đã enabled cors, nhưng đó là ở tầng API (có thể xem là tầng giao tiếp ngoài cùng), còn việc login lại ở tầng middleware (trung gian). Để giải quyết vấn đề, bạn chỉ cần enable cors-bằng-tay cho việc login bằng cách thêm vào đầu Providers > ApplicationOAuthProvider.cs > GrantResourceOwnerCredentials đoạn code sau:

Bây giờ thì ngon rồi đấy :))

get values

Hãy chú ý ở lần gọi ajax này, mình truyền vào header thông tin Authorization, đó là token_type và access_token lấy từ sesion. Nếu không thì sao? Tất nhiên là lỗi Unauthorize như phần 1 sẽ xuất hiện rồi.

get values success

Yeah, vậy là xong rồi. Tất nhiên đây chỉ là các bước, trong thực tế bạn có thể lưu trữ access_token trong Session/Cookie (không nên)... để không phải gọi nhiều lần việc login.

kết

Trong phần này mình đã hướng dẫn xong việc sử dụng ajax để truy vập vào authorize api. Nếu các bạn chưa thực hiện thành công, có thể download source ở phần 3. Trong phần cuối mình sẽ hướng dẫn gọi authorize api từ c#, hy vọng các bạn đón xem :))

Hết tập 2 :))

Comments

Popular posts from this blog

Gỡ bộ Visual Studio ra khỏi máy tính

Căn giữa thẻ div trong thẻ div