Xây dựng Hệ thống Xác thực Người dùng MFA (Mã Thành phần Đăng ký) Sử dụng Hình ảnh

Hầu hết các ứng dụng Internet tương tác yêu cầu người dùng trước tiên phải “đăng ký” để sử dụng ứng dụng và sau đó yêu cầu người dùng “đăng nhập” mỗi khi họ muốn sử dụng ứng dụng. Quá trình đăng ký người dùng đầu tiên và sau đó công nhận người dùng đó để cho phép họ truy cập có thể được mô tả là Xác thực Người dùng . Bài viết này tập trung vào mã và quy trình được sử dụng trong thành phần đăng ký của hệ thống xác thực người dùng Authur của chúng tôi.

Cổng thông tin đăng nhập bản demo của chúng tôi cho phép người dùng truy cập ứng dụng xây dựng truyện tranh trên web có tên Storybook, nhưng bản thân Cổng thông tin này có thể được sử dụng trong nhiều trường hợp yêu cầu xác thực để sử dụng ứng dụng web.

Kho lưu trữ mã Logon Portal

Cơ sở mã mà chúng tôi mô tả sau đây có sẵn trên GitHub dưới dạng kho lưu trữ công khai tại https://github.com/Bob-Wright/Authur-User-Registration-System . Nhận xét, phê bình và đề xuất luôn được hoan nghênh!

Cổng đăng nhập

Ứng dụng trình tạo được khởi chạy từ thư viện truyện tranh do chính người xây dựng tạo ra và trang đầu tiên của ứng dụng là trang đích của cổng đăng nhập được hiển thị ở đây trong hai ảnh chụp màn hình tiếp theo. Trang này được trình bày bởi Portal.php trong thư mục Storybook.

Có bốn lựa chọn tùy chọn đăng nhập được liệt kê trong hộp thoại chính của chúng tôi, cùng với một phương thức bật lên giải thích cơ bản mô tả từng tùy chọn đăng nhập có sẵn thông qua nút “ GIẢI THÍCH TÙY CHỌN ĐĂNG NHẬP ”.

Cũng bao gồm trong hộp thoại đăng nhập là tùy chọn “ Thay đổi mật khẩu ” được bao gồm ở đây vì lý do thường xuyên khiến người dùng muốn thay đổi mật khẩu của họ là để họ có thể đăng nhập.

Mục cuối cùng trong hộp thoại là lời mời nút Đăng ký để đăng ký với tư cách người dùng.

Đăng ký

Chọn nút Đăng ký này sẽ khởi chạy chương trình signup.php và chúng ta sẽ thấy hộp thoại trong ba ảnh chụp màn hình sau. Hộp thoại này yêu cầu thông tin dữ liệu người dùng sẽ được sử dụng để tạo mục nhập cơ sở dữ liệu hồ sơ người dùng

Ngoài việc lấy thông tin về tên người dùng và địa chỉ email, hộp thoại yêu cầu nhập mật khẩu và theo truyền thống, chúng tôi yêu cầu kết hợp các ký tự chữ và số ở dạng chữ hoa và chữ thường cùng với ít nhất một ký tự biểu tượng. Mục đích của việc yêu cầu các tham số ký tự này rõ ràng là để làm cho mật khẩu khó đoán hơn. Làm thế nào mà hoạt động tốt là tranh luận.

Bên cạnh các mục nhập tên người dùng, email và mật khẩu, hộp thoại cũng thu thập các mục dữ liệu nhất định về mỗi người dùng. Các mục này trên danh nghĩa không chứa dữ liệu nhận dạng cá nhân mà thay vào đó được tạo ra để cung cấp danh sách ngắn các yếu tố nhị phân (có / không) mà sau này chúng tôi có thể sử dụng trong quá trình xác thực. Vì vậy, ví dụ, chúng tôi có thể hỏi một người dùng cụ thể "Bạn có thể bơi không?" như một yếu tố để xác định chúng.

Sau khi các mục dữ liệu này được cung cấp, chúng tôi có thể tiếp tục bằng cách nhấp vào nút “ Đăng ký ” ở cuối màn hình. Điều này sẽ dẫn đến màn hình hiển thị sau cho chúng tôi biết rằng một email xác nhận đã được gửi đến người dùng.

Email hiển thị ở đây tiếp theo sẽ được gửi đến địa chỉ email của người dùng mới để xác minh.

Tất cả các hoạt động đăng ký trước đó sẽ đăng ký hiệu quả người dùng trong một hệ thống đăng nhập mã thông báo / mã thông báo-trao đổi mật khẩu đầy đủ chức năng hỗ trợ ba phương thức đăng nhập đầu tiên (Tên người dùng / mật khẩu, Liên kết ma thuật và Mật khẩu một lần) được hiển thị trong hộp thoại Cổng thông tin ban đầu của chúng tôi.

Lựa chọn hình ảnh GateKeeper

Nhưng mã trở nên thú vị hơn từ đây khi chúng tôi tiếp tục tạo mã thông báo đăng nhập MFA dựa trên hình ảnh cho đăng ký của người dùng của chúng tôi. Nhấp vào nút “Xác minh email của tôi” trong email sẽ dẫn đến màn hình trình duyệt tiếp theo được hiển thị bên dưới được mở bởi chương trình GateKeeper.php nằm trong thư mục Storybook / Portal . Trước tiên, trang web của chương trình GateKeeper thông báo cho người dùng rằng Email của họ đã được xác minh thành công và tiếp tục bằng cách yêu cầu người dùng chọn hình ảnh đại diện “người gác cổng” từ một thư viện hình ảnh.

Có trong kho lưu trữ mã trên GitHub là một chương trình dành cho nhà phát triển tiện ích có tên là dumpSessionZ.php (hoặc dumpSession.php nếu bạn không sử dụng trình quản lý cơ sở dữ liệu phiên Zebra session2DB có trong repo) sẽ cho phép hiển thị định kỳ PHP $ _SESSION các biến khi chương trình thực thi. Những hình ảnh tiếp theo này là kết quả của quá trình dumpSession chạy trên trang chương trình GateKeeper.php như chúng ta thấy ở trên và nó mô tả hoạt động của chương trình PHP đang thực thi, cho phép chúng ta “theo dõi”.

Khía cạnh chính của chức năng GateKeeper liên quan đến việc thao tác một số mảng tệp hình ảnh mà sau đó chúng tôi sử dụng để đưa vào thư viện lựa chọn trên màn hình. Mục đích của những kế hoạch này là sắp xếp lại thứ tự hiển thị hình ảnh trong thư viện một cách ngẫu nhiên trên mỗi lần tải trang. Nếu bạn nhìn vào mã GateKeeper.php , bạn sẽ lưu ý rằng chúng tôi đã chèn một bẫy ngoại lệ trong phần trên cùng của mã để chọn hình ảnh để hiển thị để chúng tôi có thể chỉ định đưa hình ảnh người dùng cụ thể vào thư viện. Điều này cho phép chúng tôi chắc chắn rằng hình ảnh này có thể được chọn làm hình đại diện người gác cổng của người dùng bẫy ngoại lệ. Điều này có hai phân nhánh.

Đầu tiên, nó cho phép tôi đặc biệt đưa ảnh chụp cá nhân của mình vào hướng dẫn demo ☺ . Thứ hai, nó cung cấp một nơi thuận tiện để chèn một miếng đệm có thể được sử dụng để cung cấp một hình ảnh cụ thể cho bất kỳ người dùng được chỉ định nào.

Tuy nhiên, hãy tiếp tục và giả sử rằng người dùng của chúng tôi đã nhấp vào hình ảnh đại diện được hiển thị đã chọn trong màn hình GateKeeper ở trên. Điều này dẫn đến việc hiển thị trang thông tin mugshot đầu tiên được hiển thị ở đây tiếp theo. Hình ảnh cho trang này là hình ảnh JPEG được tải từ thư mục Storybook / Portal / ckimages bởi chương trình Storybook / Portal / mugshotChoice.php .

Điều này cũng dẫn đến việc thêm một vài giá trị nữa vào mảng dữ liệu PHP $ _SESSION mà chúng ta có thể kiểm tra bằng cách làm mới màn hình dumpSession của chúng ta. Đặc biệt lưu ý là thông tin từ cơ sở dữ liệu người dùng bao gồm địa chỉ email người dùng và họ và tên cùng với các giá trị yếu tố được hiển thị ở đây tiếp theo.

Nếu chúng tôi nhấp vào hình ảnh Gatekeeper để tiếp tục đăng ký người dùng của chúng tôi, hành động này dẫn đến một yêu cầu POST biểu mẫu được mugshotChoice.php cấp cho Máy chủ API Node PGP của chúng tôi. Thiết bị đầu cuối Node sẽ hiển thị màn hình sau khi nó tạo và lưu cặp khóa PGP cho người dùng này và sau đó chờ yêu cầu API tiếp theo.

Khi API hoàn tất quá trình tạo khóa, sau đó nó sẽ lưu các khóa trong cơ sở dữ liệu và đưa người dùng trở lại ứng dụng chính bằng email thông báo hoàn thành PGP API hiển thị trang web hiển thị bên cạnh bao gồm hướng tải Storybook / Portal / showMugshotChoice.php . Mã cho dịch vụ Node API khi được cài đặt được bao gồm trong repo bài viết này trong thư mục Authur / openPGP và có thêm thông tin về mã API trong bài viết này ( https://medium.com/@itzbobwright/some-openpgp- crypto-functions-on-a-node-api-server ) và repo GitHub được liên kết của nó.

Thiết lập này cho phép sử dụng API nằm trên miền được tách biệt với ứng dụng đăng nhập và nó cho phép sử dụng kho lưu trữ NodeJS openPGPjs mà bạn có thể tìm thấy dưới dạng một nhánh trên kho GitHub này tại https://github.com/Bob -Wright / openpgpjs .

Hãy xem xét một vài khía cạnh của sự tách biệt này mà chúng ta có thể tận dụng. Chúng tôi có thể có API máy chủ PGP Node của mình chạy trên cùng một máy chủ như cổng đăng nhập của chúng tôi. Một cân nhắc khác sẽ là kết nối Máy chủ nút PKC với máy chủ Ứng dụng đăng nhập qua IP riêng hoặc sơ đồ cách ly tương tự. Người ta có thể sử dụng địa chỉ IP của máy chủ thay vì hệ thống DNS Internet.

Nhưng để tiếp tục thảo luận về lược đồ hiện tại, người dùng sẽ nhấp vào hình ảnh theo hướng dẫn để tải showMugshotChoice.php với kết quả là hiển thị trang sau.

Nếu chúng ta làm mới dumpSession trên trang này, chúng ta có thể thấy thêm bốn giá trị dữ liệu được thêm vào các biến mảng PHP $ _SESSION như được hiển thị bên dưới. Mảng hiện bao gồm một giá trị cho khóa công khai kiểu PGP được lưu trữ với giá trị khóa mảng $ _SESSION của [plaintext] cùng với ba giá trị khác cho các khóa [coverImage] , [stegoImge] và [secretKey] . Giá trị [plaintext] , tức là KHỐI KHÓA CÔNG KHAI PGP , được truy xuất từ cơ sở dữ liệu khóa mà trước đó nó đã được viết bởi Node PGP API của chúng tôi.

Chương trình showMugshotChoice.php đã sử dụng các giá trị này để tạo ra hình ảnh hiển thị trong màn hình ở trên và hình ảnh này thực sự bây giờ là một hình ảnh định dạng PNG đã lưu mới đã được mã hóa Steganographically để nhúng mã hóa giá trị KHỐI KHÓA CÔNG KHAI PGP.

Tại thời điểm này, chúng tôi đã sử dụng phần đăng ký hoặc đăng ký của Cổng thông tin đăng nhập của chúng tôi để tạo và lưu tất cả thông tin mà chúng tôi hiện đang sử dụng trong Hệ thống xác thực người dùng-dựa trên hình ảnh-MFA-Người dùng-xác thực của chúng tôi . Nếu người dùng của chúng tôi bây giờ nhấp vào hình ảnh theo chỉ dẫn, họ sẽ được đưa trở lại trang Cổng thông tin đăng nhập mới với mảng $ _SESSION mới được xóa như được hiển thị trên hai màn hình ở đây bên dưới và họ có thể tiếp tục đăng nhập vào Trình tạo sách truyện tranh Storybook.

Trước khi chúng tôi nhấp vào hình ảnh thông tin mugshot thứ hai và trong khi mảng $ _SESSION của chúng tôi vẫn được tải, chúng tôi có thể chuyển sự chú ý sang sử dụng một chương trình khác cũng có trong thiết lập demo. Nếu chúng ta duyệt đến trang Storybook / Portal / decodeStego.php, chúng ta sẽ thấy màn hình này tiếp theo bên dưới hiển thị bằng chứng trích xuất khái niệm về KHỐI KHÓA CÔNG KHAI được nhúng và mã hóa bằng mã hóa cho người dùng này.

Kết thúc những hình ảnh tiếp theo này là các ảnh chụp dumpSession hoàn chỉnh cho trang trên.

Sự kết luận

Điều đó hoàn thành việc kiểm tra mã được sử dụng trong thành phần Ghi danh hoặc Đăng ký của Hệ thống xác thực người dùng MFA dựa trên hình ảnh xác thực của chúng tôi. Phần tiếp theo và cuối cùng của mã của chúng tôi mà chúng tôi sẽ xem xét là chức năng thành phần Đăng nhập , trong đó chúng tôi xác minh người dùng mới đăng ký của mình để truy cập ứng dụng Storybook được lưu trữ của chúng tôi. Hãy theo dõi bài viết này hy vọng sẽ sớm ra mắt.

Đối với lần lặp lại tiếp theo của Hệ thống xác thực người dùng của chúng tôi, mục đích là thêm hai cơ sở. Cơ sở đầu tiên sẽ là bao gồm một phương pháp để sử dụng theo chương trình hình ảnh Steganographic được tạo của chúng tôi để đúc hoặc tạo hình ảnh NFT để sử dụng làm hình ảnh mã thông báo MFA của chúng tôi. Một cân nhắc quan trọng ở đây là chi phí và đối với bản demo, việc đúc tiền phải không có phí xăng. Cơ sở thứ hai sẽ cho phép người dùng tải lên hình ảnh đại diện người gác cổng của riêng họ như được cung cấp bởi cơ sở dữ liệu nhân viên mà sau đó chúng tôi có thể chuyển đổi sang định dạng Steganographic NFT của chúng tôi.

Hãy để tôi cung cấp một số lời cảm ơn và TIẾN ĐỘ rất xứng đáng cho tất cả các lập trình viên nhân từ có công việc của họ đã đóng góp cho nỗ lực này. Cuối cùng, cảm ơn Chúa và gia đình tôi vì sự hỗ trợ tuyệt vời nhất !!

Cũng được xuất bản ở đây.