Mã OTP Hoạt Động Ra Sao Và Cách Tạo Mã OTP

10:04 No Comments

Trong bài viết này tôi xin khái quát định nghĩa OTP, cách nó hoạt động và thư viện hỗ trợ tạo – kiểm tra OTP. Rất thích hợp cho các bạn làm service trên .NET Core cần bảo mật 2 lớp.

1) Mã OTP là gì?

Chắc ai trong các bạn cũng biết được ứng dụng của mã OTP rồi. Mã OTP – One Time Password, được hiểu là mã chỉ dùng được một lần. Mã này sẽ có thời gian hiệu lực nhất định, thường là 30 giây đến 1 phút. Những đặc tính của OTP như sau:

• Mã này có thời gian hiệu lực ngắn
• Mã này thường là lớp mật khẩu cuối cùng
• Mã này được sinh ra dựa trên một mã bí mật và định danh người dùng kèm thời gian hệ thống

Mã này có thể được tạo ra bằng nhiều cách:

• SMS OTP: nhà quản lý thông tin cá nhân của bạn sẽ tạo ra mã này dựa trên thông tin đăng nhập (lớp 1) của bạn. Sau đó họ sẽ gửi SMS đến điện thoại của bạn đã đăng ký, nếu bạn nhập đúng thì bạn vượt qua lớp 2.
• Token: là một thiết bị độc lập có thể tự tạo ra mã OTP (đã được liên kết với tài khoản của bạn trước đó).
• Smart OTP: là một ứng dụng có thể cài đặt trên điện thoại (hoặc mọi thiết bị có hỗ trợ). Ứng dụng này cũng cần liên kết với tài khoản của bạn.

Việc liên kết ứng dụng (hay thiết bị) tạo OTP rất đơn giản nhưng cần giữ bí mật. Bạn chỉ cần quét mã QR được tạo ra bởi máy chủ quản lý thông tin của bạn 1 lần duy nhất.
Sau đó mã OTP sẽ được tạo mới định kỳ (sau 30 hoặc 60 giây). Nếu bạn mất điện thoại hoặc thiết bị tạo OTP đó là một hiểm họa cho bạn.
Hãy đổi ngay mật khẩu chính (lớp 1) nếu bạn mất điện thoại hoặc thiết bị tạo OTP (Token).

2) OTP hoạt động thế nào và tại sao cần nó?

Sử dụng OTP khác gì việc tài khoản của bạn có hai mật khẩu?
Bản chất là như nhau nhưng nguy cơ mất an toàn cao hơn nếu cả hai mật khẩu đều do bạn quản lý.

• Bạn phải nhớ 2 mật khẩu cho một tài khoản
• Thường các mật khẩu sẽ gắn với những thứ quanh bạn, nếu đoán được mật khẩu lớp 1, có thể đoán được lớp 2
• Nếu bạn để lộ cả 2 mật khẩu, nghĩa là bạn mất tài khoản (nguy cơ cao)
• Nếu bạn để lộ mật khẩu lớp 1 và OTP (lớp 2), thông thường bạn chỉ mất tài khoản trong 60 giây (nếu bạn phát hiện kiệp, kẻ gian có ít thời gian để kiệp đánh cắp tài khoản của bạn).

OTP được tạo ra dựa trên một mã bí mật (thường được tạo ngẫu nhiên chỉ thiết bị của bạn và máy chỉ biết), định danh tải khoản (như account id) và Time. Để tăng tính bảo mật, việc tạo mã bí mật cần thuật toán đặc biệt, it nhất là MD5 trên một chuỗi cực kỳ khó trùng lập.
Để liên kết ứng dụng tạo OTP (hoặc Token), bạn cần nhập 3 thông tin trên. Thường là liên kết bằng cách san Qr code. Sau khi đã liên kết, việc tạo mã OTP sẽ coi như là đồng bộ giữa thiết bị bạn giữ và trên máy chủ. Thế nên chúng hoạt động độc lập sau một lần đồng bộ duy nhất.

Giống như việc 2 người cùng đếm tốc độ đều nhau và đếm từ 0 thì họ sẽ đếm tới 10 cùng một lúc. Nếu 2 người không cùng dừng lại ở một số vào một thời điểm thì họ không thuộc một cặp với nhau. Dĩ nhiên việc tạo OTP phức tạo hơn như thế.

3) Cách tạo và kiểm tra mã OTP

Hôm nay tôi sẽ giới thiệu đến bạn thư việc giúp tạo mã OTP là OTP-Sharp.

1	PM> Install-Package OtpSharp

Với thư viện này bạn có thể dùng với 2 ngữ cảnh sau:

• Server side: dùng để tạo mã nếu bạn muốn send SMS OTP cho Client. Và dùng để verify OTP của Client. Ngoài ra còn tạo mã để Client có thể liên kết.
• Client side: dùng để tạo mã OTP cho Client (tương tự các ứng dụng hiện tại trên điện thoại)

Trong ứng dụng sau đây tôi có cả 2 ngữ cảnh trên.

#1 Trước tiên tôi tạo 1 ứng dụng trong thế này.

#2 Để tạo được một đối tượng OTP, bạn cần những thông tin sau đây:

• Secret key: mã bí mật của bạn, thường sẽ được sinh ra ngẫu nhiên bởi thuật toán
• Step: thời gian cho mỗi lần (Step) thay đổi OTP (thời gian hết hạn của OTP)
• Size: số ký tự cho mã OTP (chỉ hỗ trợ 6 hoặc 8)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

public partial class MainWindow : Window {     private Totp totp;       // Store inputed info from user     public OTPRequest OTPRequest { get; set; } = new OTPRequest();       // Store OTP info after generating     public OTP OTP { get; set; } = new OTP();       // Support display QR image     public Image QRCode { get; set; }       public MainWindow()     {         InitializeComponent();         this.DataContext = this;     }       private void GenerateOTP()     {         // Reseting data         this.OTP.Otp = "";         this.OTP.RemainingSeconds = 0;           // Get key         byte[] rfcKey = UTF8Encoding.ASCII.GetBytes(this.OTPRequest.SecretKey);           // Generating TOTP         this.totp = new Totp(rfcKey, this.OTPRequest.Step,                                 OtpHashMode.Sha1, this.OTPRequest.Size);               // Show OTP info on UI         this.UpdateOTPInfo();           }       private void UpdateOTPInfo()     {         this.OTP.Otp = this.totp.ComputeTotp();         this.OTP.RemainingSeconds = this.totp.RemainingSeconds();     } }

#3 Sau khi tạo được đối tượng OTP, bạn có thể lấy mã OTP, Url (nội dung của QR code, format của url này là chuẩn) để share cho Client (cũng là bí mật) và thời giạn còn lại  (RemainingSeconds) cho Step hiện tại.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42

private void GenerateOTP() {     // Reseting data     this.OTP.Otp = "";     this.OTP.RemainingSeconds = 0;       // Get key     byte[] rfcKey = UTF8Encoding.ASCII.GetBytes(this.OTPRequest.SecretKey);       // Generating TOTP     this.totp = new Totp(rfcKey, this.OTPRequest.Step,                             OtpHashMode.Sha1, this.OTPRequest.Size);     // Show OTP info on UI     this.UpdateOTPInfo();       // Generate shared key (QR)     string url = KeyUrl.GetTotpUrl(rfcKey, this.OTPRequest.SiteId, this.OTPRequest.Step, OtpHashMode.Sha1, this.OTPRequest.Size);     this.LoadQr(url); }   private void LoadQr(string url) {     // downloading image     string qrUrl = string.Format("http://qrcode.kaywa.com/img.php?s=4&d={0}", HttpUtility.UrlEncode(url));     Uri urlUri = new Uri(qrUrl);     var request = WebRequest.CreateDefault(urlUri);       // Rendering image     Image image = new System.Windows.Controls.Image();     image.BeginInit();     image.Source = BitmapFrame.Create(request.GetResponse().GetResponseStream(), BitmapCreateOptions.None, BitmapCacheOption.OnLoad);     image.EndInit();       // Show image on UI     this.QRCode = image; }   private void UpdateOTPInfo() {     this.OTP.Otp = this.totp.ComputeTotp();     this.OTP.RemainingSeconds = this.totp.RemainingSeconds(); }

Trên ứng dụng Google Authenticator, bạn tiến hành scan QR code vừa được tạo ra là xong phần liên kết tài khoản.

#4 Để kiểm tra OTP của Client, bạn gọi hàm sau của đối tượng ‘totp’ có chung mã bí mật.

1 2 3 4 5 6 7 8 9 10

private void Verify(string otp) {     if (string.IsNullOrWhiteSpace(otp))     {         return;     }       long windowUsed;     bool isValid = totp.VerifyTotp(otp, out windowUsed, new VerificationWindow(0, 0)); }

Trong đó đối tượng VerificationWindow có 2 thông tin quan trọng:

• Previous(n): là số step* (n) QUÁ KHỨ được chấp nhận. Vẫn chấp nhận nếu OTP hiện tại của Client trùng với OTP lần thứ ‘<= n’ trước đó. Trường hợp Client CHẬM hơn server.
• Future(m): là số step* (m) trong TƯƠNG LAI được chấp nhận. Trường hợp Client NHANH hơn server (m lần)

*Step: mỗi lần mã OTP thay đổi xem như 1 step. Step hiện tại trên Server được tính là 0. Nếu Server chấp nhận lệch 2 step ở quá khứ (Previous(2)) nghĩa là Client chỉ được chấp nhận khi cần nhiều nhất 2 lần thay đổi OTP nữa để đuổi kiệp step hiện tại trên Server (ví dụ step dừng lại đợi Client). Mục đích việc này là phòng khi tốc động mạng hoặc tốc dộ gửi/nhận SMS tới/tại Client có độ trễ lớn.

#5 Kết quả.
Toàn bộ code có trên GitHub.

Đọc thêm...

Windows Presentation Foundation

10:00 No Comments

WPF là gì?

Windows Presentation Foundation hay gọi tắt là WPF – là một nền tảng cho phép developer có thể tạo ra các ứng dụng trên nền .NET framework cho Windows nói chung. Cũng có thể gọi WPF là một GUI framework. Nó ra đời sau Winform và tốt hơn người tiền nhiệm về mọi mặt.

WPF là gì?

1. WPF là gì?

WPF, viết tắt của Windows Presentation Foundation, là hệ thống API mới hỗ trợ việc xây dựng giao diện đồ hoạ trên nền Windows. Được xem như thế hệ kế tiếp của WinForms, WPF tăng cường khả năng lập trình giao diện của lập trình viên bằng cách cung cấp các API cho phép tận dụng những lợi thế về đa phương tiện hiện đại. Là một bộ phận của .NET Framework 3.0, WPF sẵn có trong Windows Vista và Windows Server 2008. Đồng thời, WPF cũng có thể hoạt động trên nền Windows XP Service Pack 2 hoặc mới hơn, và cả Windows Server 2003.

WPF là gì?

WPF được xây dựng nhằm vào ba mục tiêu cơ bản:

• Cung cấp một nền tảng thống nhất để xây dựng giao diện người dùng;
• Cho phép người lập trình và người thiết kế giao diện làm việc cùng nhau một cách dễ dàng;
• Cung cấp một công nghệ chung để xây dựng giao diện người dùng trên cả Windows và trình duyệt Web.

2. Nền tảng thống nhất để xây dựng giao diện người dùng

Trước khi WPF ra đời, việc tạo giao diện người dùng theo những yêu cầu mô tả ở ví dụ trên đòi hỏi sử dụng rất nhiều công nghệ khác nhau. Để tạo form, các control và các tính năng kinh điển khác của một giao diện đồ họa Windows, thông thường lập trình viên sẽ chọn Windows Forms, một phần của .NET Framework. Nếu cần hiển thị văn bản, Windows Forms có một số tính năng hỗ trợ văn bản trực tiếp hoặc có thể sử dụng Adobe’s PDF để hiển thị văn bản có khuôn dạng cố định.

Đối với hình ảnh và đồ họa 2 chiều, lập trình viên sẽ dùng GDI+, một mô hình lập trình riêng biệt có thể truy nhập qua Windows Forms. Để hiển thị video hay phát âm thanh, lập trình viên lại phải sử dụng Windows Media Player, và với đồ họa 3 chiều, anh ta lại phải dùng Direct3D, một thành phần chuẩn khác của Windows. Tóm lại, quá trình phát triển giao diện người dùng theo yêu cầu trở nên phức tạp, đòi hỏi lập trình viên quá nhiều kỹ năng công nghệ.

WPF là giải pháp hợp nhất nhằm giải quyết tất cả những vấn đề công nghệ nêu trên, hay nói cách khác, WPF cung cấp nhiều tính năng lập trình giao diện trong cùng một công nghệ đơn nhất. Điều này giúp cho quá trình tạo giao diện người dùng trở nên dễ dàng hơn đáng kể.

Hình bên dưới  cho thấy một giao diện quản lý và theo dõi bệnh nhân có sự kết hợp của hình ảnh, text, đồ họa 2 chiều/3 chiều và nhiều thông tin trực quan khác. Tất cả đều được tạo ra bằng WPF – lập trình viên không cần viết code để sử dụng các công nghệ  chuyên biệt như GDI+ hay Direct3D.

Tuy nhiên, WPF ra đời không có nghĩa là tất cả những công nghệ nêu trên bị thay thế. Windows Forms vẫn có giá trị, thậm chí trong WPF, một số ứng dụng mới vẫn sẽ sử dụng Windows Forms. Windows Media Player vẫn đóng một vai trò công cụ độc lập để chơi nhạc và trình chiếu video. PDF cho văn bản vẫn tiếp tục được sử dụng. Direct3D vẫn là công nghệ quan trọng trong games và các dạng ứng dụng khác (Trong thực tế, bản thân WPF dựa trên Direct3D để thực hiện mọi biểu diễn đồ họa).

Việc tạo ra một giao diện người dùng hiện đại không chỉ là việc hợp nhất các công nghệ sẵn có khác nhau. Nó còn thể hiện ở việc tận dụng lợi điểm của card đồ họa hiện đại. Để giải phóng những hạn chế của đồ họa bitmap, WPF dựa hoàn toàn trên đồ họa vector, cho phép hình ảnh tự động thay đổi kích thước để phù hợp với kích thước và độ phân giải của màn hình mà nó được hiển thị.

Bằng việc hợp nhất tất cả các công nghệ cần thiết để tạo ra một giao diện người dùng vào một nền tảng đơn nhất, WPF đơn giản hóa đáng kể công việc của lập trình viên giao diện. Với việc yêu cầu lập trình viên học một môi trường phát triển duy nhất, WPF góp phần làm giảm chi phí cho việc xây dựng và bảo trì ứng dụng. Và bằng việc cho phép tích hợp đa dạng nhiều cách biểu diễn thông tin trên giao diện người dùng, WPF góp phần nâng cao chất lượng, và theo đó là giá trị công việc, của cách thức người dùng tương tác với ứng dụng trên Windows.

3. Khả năng làm việc chung giữa người thiết kế giao diện và lập trình viên

Trong thực tế, việc xây dựng một giao diện người dùng phức hợp như trong ví dụ về ứng dụng quản lý bệnh nhân trên đòi hỏi những kỹ năng ít thấy ở những lập trình viên đơn thuần, mà chỉ có thể tìm thấy ở những người thiết kế giao diện chuyên nghiệp. Nhưng câu hỏi đặt ra là làm sao để người thiết kế và lập trình viên có thể làm việc cùng nhau?

Thông thường, người thiết kế giao diện sử dụng một công cụ đồ họa để tạo ra những ảnh tĩnh về cách bố trí giao diện trên màn hình. Những hình ảnh này sau đó được chuyển tới lập trình viên với nhiệm vụ tạo ra mã trình để hiện thực hóa giao diện đã thiết kế. Đôi lúc vẽ ra một giao diện thì đơn giản với người thiết kế, nhưng để biến nó thành hiện thực có thể là khó khăn hoặc bất khả thi với lập trình viên.

Hạn chế về công nghệ, sức ép tiến độ, thiếu kỹ năng, hiểu nhầm hoặc đơn giản là bất đồng quan điểm có thể khiến lập trình viên không đáp ứng được đầy đủ yêu cầu từ người thiết kế. Do vậy, điều cần thiết ở đây là một cách thức để hai nhóm công tác độc lập này có thể làm việc với nhau mà không làm thay đổi chất lượng của giao diện đã thiết kế.

Để thực hiện được điều này, WPF đưa ra ngôn ngữ đặc tả eXtensible Application Markup Language (XAML). XAML định ra một tập các phần tử XML như Button, TextBox, Label…, nhằm định nghĩa các đối tượng đồ họa tương ứng như nút bấm, hộp thoại, nhãn…, và nhờ đó cho phép mô tả chính xác diện mạo của giao diện người dùng. Các phần tử XAML cũng chứa các thuộc tính, cho phép thiết lập nhiều tính chất khác nhau của đối tượng đồ họa tương ứng.

Ví dụ, đoạn mã sau sẽ tạo ra một nút bấm màu đỏ “Click me”:

1	<Button x:Name=”btn” Content=”Click me”/>

Mỗi phần tử XAML lại tương ứng với một lớp WPF, và mỗi thuộc tính của phần tử đó lại tương ứng với thuộc tính hay sự kiện của lớp này. Chẳng hạn, nút bấm màu đỏ trong ví dụ trên có thể tạo bằng C# code như sau:

1 2 3

Button btn = new Button(); btn.Background = Brushes.Red; btn.Content = "Click me";

Nếu như mọi thứ có thể biểu diễn bằng XAML thì cũng có thể biểu diễn bằng đoạn mã, thì câu hỏi đặt ra là XAML có ý nghĩa gì? Câu trả lời là việc xây dựng các công cụ sinh và sử dụng các đặc tả bằng XML dễ dàng hơn nhiều so với xây dựng một công cụ tương tự làm việc với đoạn mã. Bởi vậy, XAML mở ra một cách thức tốt hơn để lập trình viên và người thiết kế làm việc với nhau. Hình dưới đây minh họa quá trình này.

Người thiết kế có thể mô tả giao diện người dùng và tương tác với nó thông qua một công cụ, chẳng hạn như Microsoft Expression Interactive Designer. Chỉ tập trung vào việc định ra diện mạo và cảm quan cho giao diện đồ họa WPF, công cụ này sinh các đoạn mô tả giao diện thể hiện qua ngôn ngữ XAML. Lập trình viên sau đó sẽ nhập đoạn mô tả XAML đó vào môi trường lập trình, chẳng hạn như Microsoft Visual Studio.

Thay vì lập trình viên phải tái tạo lại giao diện từ đầu dựa trên một ảnh tĩnh mà người thiết kế cung cấp, bản thân các đoạn XAML này sẽ được Microsoft Visual Studio biên dịch để tái tạo thành giao diện đồ họa đúng theo mô tả. Lập trình viên chỉ tập trung vào việc viết mã trình cho giao diện được sinh ra, chẳng hạn như xử lý các sự kiện, theo những chức năng đề ra của ứng dụng.

Việc cho phép người thiết kế và lập trình viên làm việc chung như vậy sẽ hạn chế những lỗi phát sinh khi hiện thực hóa giao diện từ thiết kế. Thêm vào đó, nó còn cho phép hai nhóm công tác này làm việc song song, khiến mỗi bước lặp trong quy trình phát triển phần mềm ngắn đi và việc phản hồi được tốt hơn. Vì cả hai môi trường đều có khả năng hiểu và sử dụng XAML, ứng dụng WPF có thể chuyển qua lại giữa hai môi trường phát triển để sửa đổi hay bổ sung giao diện. Với tất cả những lợi điểm này, vai trò của người thiết kế trong việc xây dựng giao diện được đặt lên hàng đầu.

4. Công nghệ chung cho giao diện trên Windows và trên trình duyệt Web

Trong thời đại bùng nổ của Internet, các ứng dụng Web ngày một phát triển. Việc trang bị giao diện người dùng với đầy đủ tính năng như một ứng dụng desktop sẽ thu hút nhiều người sử dụng;, và do đó góp phần làm tăng giá trị doanh nghiệp. Tuy nhiên, như đã nêu trong phần đầu, với những công nghệ truyền thống, để phát triển một giao diện đồ họa vừa hoạt động trên desktop vừa trên trình duyệt Web, đòi hỏi phải sử dụng những công nghệ hoàn toàn khác nhau, giống như việc xây dựng hai giao diện hoàn toàn độc lập. Điều này tạo ra chi phí không cần thiết để phát triển giao diện.

WPF là một giải pháp cho vấn đề này. Lập trình viên có thể tạo ra một ứng dụng trình duyệt XAML (XBAP) sử dụng WPF chạy trên Internet Explore. Trên thực tế, cùng đoạn code này có thể được dùng để sinh ứng dụng WPF chạy độc lập trên Windows. Hình 01 minh họa một ứng dụng dịch vụ tài chính hoạt động như một ứng dụng WPF độc lập. Trong khi đó, hình 02 minh họa giao diện của cùng ứng dụng chạy trên Internet Explore dưới dạng XBAP.

Hình 01

Hình 02

Như đã thấy trong Hình 02, phần giao diện của ứng dụng dạng XBAP được trình duyệt chia thành các frame thay vì chạy trên các cửa sổ riêng, ngoài ra, các chức năng đều được bảo toàn. Cùng một đoạn mã được sử dụng chung cho cả hai trường hợp sẽ làm giảm khối lượng công việc cần thiết để phát triển hai dạng giao diện. Thêm vào đó, sử dụng cùng một đoạn mã cũng có nghĩa là sử dụng cùng kỹ năng của lập trình viên.

Do đó, lập trình viên chỉ cần có học một kiến thức chung là có thể sử dụng trong cả hai trường hợp. Một lợi điểm nữa của việc dùng chung công nghệ cho cả giao diện Windows và giao diện Web là người xây dựng ứng dụng không nhất thiết phải quyết định trước loại giao diện nào được sử dụng. Miễn là máy client đáp ứng được những yêu cầu hệ thống để chạy XBAP, một ứng dụng có thể cung cấp cả giao diện Windows và giao diện Web, mà chỉ sử dụng phần lớn những đoạn mã giống nhau.

Mỗi ứng dụng XBAP được download khi cần từ một Web server, nên nó phải tuân theo những yêu cầu về an ninh khắt khe hơn đối với một ứng dụng Windows độc lập. Theo đó, XBAP chạy trong phạm vi sandbox an ninh do hệ thống an ninh truy nhập mã của .NET Framework cung cấp. XBAP chỉ chạy với các hệ thống Windows có cài đặt WPF và chỉ với Internet Explore phiên bản 6 và 7 trở lên.

Trích Microsoft VN.

Đọc thêm...