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à   . 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   của chúng tôi. Xác thực Người dùng Authur  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   . Nhận xét, phê bình và đề xuất luôn được hoan nghênh! https://github.com/Bob-Wright/Authur-User-Registration-System  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   trong thư mục Storybook.  Portal.php  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 “   ” đượ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. Thay đổi mật khẩu  Mục cuối cùng trong hộp thoại là lời mời nút   để đăng ký với tư cách người dùng. Đăng ký  Đăng ký  Chọn nút   này sẽ khởi chạy chương trình   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  Đăng ký signup.php  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 “   ” ở 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.  Đăng ký  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   nằm trong thư mục   . Trước tiên, trang web của chương trình   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.  GateKeeper.php Storybook / Portal GateKeeper  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à   (hoặc   nếu bạn không sử dụng trình   có trong repo) sẽ cho phép hiển thị định kỳ   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”.  dumpSessionZ.php dumpSession.php quản lý cơ sở dữ liệu phiên Zebra session2DB PHP $ _SESSION  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ã   , 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. GateKeeper.php  Đầ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   đầu tiên được hiển thị ở đây tiếp theo. Hình ảnh cho trang này là hình ảnh   được tải từ thư mục Storybook / Portal /   bởi chương trình   .  thông tin mugshot JPEG ckimages 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   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.  dumpSession  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   cho   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.  mugshotChoice.php cấp Máy chủ API Node PGP  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   . 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   và có thêm thông tin về mã API trong bài viết này (   ) và repo GitHub được liên kết của nó.    Storybook / Portal / showMugshotChoice.php Authur / openPGP https://medium.com/@itzbobwright/some-openpgp- crypto-functions-on-a-node-api-server  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ữ     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   . NodeJS openPGPjs 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   với kết quả là hiển thị trang sau.  showMugshotChoice.php  Nếu chúng ta làm mới   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   cùng với ba giá trị khác cho các khóa   ,   và   . Giá trị   , tức là   , đượ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. dumpSession [plaintext] [coverImage] [stegoImge] [secretKey] [plaintext] KHỐI KHÓA CÔNG KHAI PGP  Chương trình   đã 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   đã lưu mới đã được mã hóa Steganographically để nhúng mã hóa giá trị KHỐI KHÓA CÔNG KHAI PGP.  showMugshotChoice.php PNG  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   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.  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 .  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   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.  Storybook / Portal / decodeStego.php,  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   hoặc   của   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   , 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   đượ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. Ghi danh Đăng ký Hệ thống xác thực người dùng MFA dựa trên hình ảnh xác thực Đăng nhập Storybook  Đối với lần lặp lại tiếp theo của   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ệ thống xác thực người dùng  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.

2022 - HackerNoon Contributor of the Year - Authentication

Nominated for 2022 - HackerNoon Contributor of the Year - Authentication

Developer

Nghe bài viết này bằng Tiếng Anh, đọc bởi robot thông minh của HackerNoon

dài quá đọc không nổi

Download free Tech Leaders Productivity Report!

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

About Author

BÌNH LUẬN

chuyên mục

BÀI VIẾT NÀY CŨNG CÓ MẶT TẠI

Related Stories

179 Stories To Learn About Reading

309 Stories To Learn About Smart Contracts

184 Stories To Learn About Psychology

72 Stories To Learn About Adam Smith

179 Stories To Learn About Reading

309 Stories To Learn About Smart Contracts

184 Stories To Learn About Psychology

72 Stories To Learn About Adam Smith

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps