Xây dựng một hệ thống xác thực người dùng cho ứng dụng Web của bạn từ đầu có thể là một công việc phức tạp. Thoạt nghe có vẻ dễ, nhưng có rất nhiều chi tiết bạn phải xem xét - băm mật khẩu đúng cách, bảo mật phiên người dùng, cung cấp cách đặt lại mật khẩu đã quên. Hầu hết các khung hiện đại đều cung cấp mã soạn sẵn để xử lý tất cả các vấn đề này nhưng ngay cả khi bạn không sử dụng khung, đừng tuyệt vọng. Trong bài viết này, tôi sẽ chỉ cho bạn cách xây dựng một ứng dụng PHP từ đầu [chỉ phụ thuộc duy nhất vào một thư viện bên ngoài - DotEnv, để chúng ta có thể lưu trữ các bí mật của mình trong một. env bên ngoài kho lưu trữ mã]. Ứng dụng sẽ cung cấp thông tin đăng nhập/đăng xuất của người dùng, đăng ký người dùng mới và biểu mẫu 'Quên mật khẩu' bằng cách tận dụng OAuth 2 đơn giản của Okta. 0 API
Tất cả những gì bạn cần để làm theo hướng dẫn là tài khoản nhà phát triển Okta [bạn có thể tạo một tài khoản miễn phí], PHP và Trình soạn thảo
Tại sao nên sử dụng Okta để xác thực?
Okta giúp quản lý danh tính dễ dàng hơn, an toàn hơn và có khả năng mở rộng hơn so với những gì bạn đã từng sử dụng. Okta là một dịch vụ API cho phép bạn tạo, chỉnh sửa và lưu trữ an toàn tài khoản người dùng và dữ liệu tài khoản người dùng, đồng thời kết nối chúng với một hoặc nhiều ứng dụng. API của chúng tôi cho phép bạn
- Xác thực và ủy quyền cho người dùng của bạn
- Lưu trữ dữ liệu về người dùng của bạn
- Thực hiện đăng nhập dựa trên mật khẩu và mạng xã hội
- Bảo mật ứng dụng của bạn bằng xác thực đa yếu tố
- Và nhiều hơn nữa. Kiểm tra tài liệu sản phẩm của chúng tôi để biết thêm thông tin
Đăng ký tài khoản nhà phát triển miễn phí mãi mãi và khi bạn hoàn tất, hãy quay lại để tìm hiểu thêm về cách xây dựng ứng dụng PHP với xác thực người dùng từ đầu
Tạo tài khoản nhà phát triển Okta miễn phí
Trước khi tiếp tục, bạn cần đăng nhập vào tài khoản Okta của mình [hoặc tạo tài khoản mới miễn phí] và tạo ứng dụng OAuth. Bạn sẽ cần lấy ID ứng dụng khách và bí mật ứng dụng khách cho ứng dụng của mình và bạn cũng sẽ cần mã thông báo API để ứng dụng có thể đăng ký người dùng từ xa
Dưới đây là hướng dẫn từng bước
- Chuyển đến mục menu Ứng dụng và nhấp vào nút 'Thêm ứng dụng'
- Chọn Web và nhấp vào Tiếp theo
- Nhập tiêu đề và đặt http. //máy chủ cục bộ. 8080/ làm cả URI cơ sở và URI chuyển hướng đăng nhập, sau đó nhấp vào Xong. Bạn có thể để nguyên phần còn lại của cài đặt
Sao chép Client ID và Client Secret từ cài đặt ứng dụng
Chuyển đến API > Mã thông báo và nhấp vào Tạo mã thông báo
Nhập tiêu đề cho mã thông báo của bạn và đảm bảo sao chép giá trị của mã thông báo và lưu trữ an toàn. Bạn sẽ chỉ có thể nhìn thấy nó một lần - nếu bạn làm mất nó, bạn sẽ cần tạo một mã thông báo mới
Hãy ghi lại URL tổ chức chính của bạn [có vẻ như https. //{yourOktaDomain} ] - bạn cũng sẽ cần cái này.
Tạo bộ xương dự án
Bắt đầu bằng cách tạo một thư mục /src và một tệp
/vendor
.env
/vendor
.env
/vendor
.env
{
"require": {
"vlucas/phpdotenv": "^2.4"
},
"autoload": {
"psr-4": {
"Src\\": "src/"
}
}
}
Chúng tôi cũng đã định cấu hình trình tải tự động PSR-4 sẽ tự động tìm các lớp PHP trong thư mục
CLIENT_ID=
CLIENT_SECRET=
REDIRECT_URI=//localhost:8080/
METADATA_URL=//{yourOktaDomain}/oauth2/default/.well-known/oauth-authorization-server
API_URL_BASE=//{yourOktaDomain}/api/v1/
API_TOKEN=
Chúng tôi có thể cài đặt các phụ thuộc của mình ngay bây giờ
composer install
Chúng tôi có một thư mục
CLIENT_ID=
CLIENT_SECRET=
REDIRECT_URI=//localhost:8080/
METADATA_URL=//{yourOktaDomain}/oauth2/default/.well-known/oauth-authorization-server
API_URL_BASE=//{yourOktaDomain}/api/v1/
API_TOKEN=
CLIENT_ID=
CLIENT_SECRET=
REDIRECT_URI=//localhost:8080/
METADATA_URL=//{yourOktaDomain}/oauth2/default/.well-known/oauth-authorization-server
API_URL_BASE=//{yourOktaDomain}/api/v1/
API_TOKEN=
CLIENT_ID=
CLIENT_SECRET=
REDIRECT_URI=//localhost:8080/
METADATA_URL=//{yourOktaDomain}/oauth2/default/.well-known/oauth-authorization-server
API_URL_BASE=//{yourOktaDomain}/api/v1/
API_TOKEN=
Hãy tạo một tệp
CLIENT_ID=
CLIENT_SECRET=
REDIRECT_URI=//localhost:8080/
METADATA_URL=//{yourOktaDomain}/oauth2/default/.well-known/oauth-authorization-server
API_URL_BASE=//{yourOktaDomain}/api/v1/
API_TOKEN=
CLIENT_ID=
CLIENT_SECRET=
REDIRECT_URI=//localhost:8080/
METADATA_URL=//{yourOktaDomain}/oauth2/default/.well-known/oauth-authorization-server
API_URL_BASE=//{yourOktaDomain}/api/v1/
API_TOKEN=
/vendor
.env
/vendor
.env
Tiếp theo, chúng tôi sẽ tạo một tệp
CLIENT_ID=
CLIENT_SECRET=
REDIRECT_URI=//localhost:8080/
METADATA_URL=//{yourOktaDomain}/oauth2/default/.well-known/oauth-authorization-server
API_URL_BASE=//{yourOktaDomain}/api/v1/
API_TOKEN=
CLIENT_ID=
CLIENT_SECRET=
REDIRECT_URI=//localhost:8080/
METADATA_URL=//{yourOktaDomain}/oauth2/default/.well-known/oauth-authorization-server
API_URL_BASE=//{yourOktaDomain}/api/v1/
API_TOKEN=
và một tệp
/vendor
.env
Dự án sẽ có cấu trúc thư mục sau [bạn có thể tạo các tệp còn lại ngay bây giờ]
/vendor
.env
Tệp
/vendor
.env
/vendor
.env
/vendor
.env
/vendor
.env
Ngay bây giờ, nó chỉ tải chế độ xem 'nhà' mà không có dữ liệu
Tập lệnh
/vendor
.env
/vendor
.env
/vendor
.env
/vendor
.env
/vendor
.env
/vendor
.env
Thư mục
/vendor
.env
/vendor
.env
/vendor
.env
Hãy bắt đầu xây dựng quan điểm
/vendor
.env
{
"require": {
"vlucas/phpdotenv": "^2.4"
},
"autoload": {
"psr-4": {
"Src\\": "src/"
}
}
}
Chế độ xem Trang chủ tải đầu trang và chân trang và nó có khả năng hiển thị thông báo thông báo và thông báo lỗi. Nó cũng hiển thị nội dung khác nhau tùy thuộc vào việc người dùng có đăng nhập [được xác định bằng cách kiểm tra
/vendor
.env
Đây là phiên bản đầy đủ của chế độ xem đầu trang và chân trang
/vendor
.env
{
"require": {
"vlucas/phpdotenv": "^2.4"
},
"autoload": {
"psr-4": {
"Src\\": "src/"
}
}
}
{
"require": {
"vlucas/phpdotenv": "^2.4"
},
"autoload": {
"psr-4": {
"Src\\": "src/"
}
}
}
Tiêu đề tải khung Bulma CSS và hiển thị tên người dùng cùng với liên kết đăng xuất nếu có người dùng đã đăng nhập hoặc liên kết Đăng nhập/Quên mật khẩu/Đăng ký nếu không có người dùng đã đăng nhập
Khởi động máy chủ PHP tích hợp
composer install
Khi bạn tải http. //máy chủ cục bộ. 8080, bạn sẽ thấy ứng dụng
Triển khai Đăng nhập / Đăng xuất Okta
Đăng nhập Okta xảy ra trong một số giai đoạn
- Xây dựng URL đăng nhập
- Chuyển hướng đến URL
- Xác thực Okta xảy ra từ xa và sau đó chuyển hướng trở lại URI chuyển hướng của chúng tôi
- Xử lý phản hồi và ủy quyền cho người dùng trong ứng dụng của chúng tôi
Chúng tôi sẽ sửa đổi
/vendor
.env
/vendor
.env
composer install
và cũng để xử lý bước 4 khi nhận được chuyển hướng trở lại [bao gồm mã từ Okta]
composer install
Chúng tôi cũng sẽ thêm một trình xử lý Đăng xuất rất đơn giản, chỉ hủy đặt biến phiên
/vendor
.env
Đây là phiên bản mới
/vendor
.env
composer install
Chúng ta cũng hãy xây dựng
/vendor
.env
/vendor
.env
/vendor
.env
/vendor
.env
composer install
Khá nhiều điều xảy ra trong lớp
/vendor
.env
Trước khi tạo URL ủy quyền, chúng tôi tạo một giá trị
/vendor
.env
composer install
Phương thức
/vendor
.env
composer install
Khi chúng tôi lấy lại chuyển hướng, chúng tôi nhận được biến trạng thái mà chúng tôi đã gửi cùng với chuyển hướng ủy quyền và mã từ Okta. Khi chúng tôi nhận được mã, chúng tôi gọi phương thức
/vendor
.env
composer install
Sau đó, chúng tôi sử dụng
/vendor
.env
composer install
Sau đó, chúng tôi sử dụng điểm cuối nội quan để xác nhận mã thông báo hợp lệ và đang hoạt động, đồng thời lấy tên người dùng của người dùng mới được ủy quyền
composer install
Đăng ký người dùng mới thông qua API Okta
Đăng ký người dùng mới sẽ được xử lý trong lớp
/vendor
.env
/vendor
.env
/vendor
.env
Trình xử lý đầu tiên chỉ cần tải chế độ xem
/vendor
.env
{
"require": {
"vlucas/phpdotenv": "^2.4"
},
"autoload": {
"psr-4": {
"Src\\": "src/"
}
}
}
/vendor
.env
Trình xử lý thứ hai ủy quyền cho bộ điều khiển người dùng khi biểu mẫu được gửi
{
"require": {
"vlucas/phpdotenv": "^2.4"
},
"autoload": {
"psr-4": {
"Src\\": "src/"
}
}
}
/vendor
.env
Chúng ta cũng cần thêm một phương thức mới
{
"require": {
"vlucas/phpdotenv": "^2.4"
},
"autoload": {
"psr-4": {
"Src\\": "src/"
}
}
}
/vendor
.env
{
"require": {
"vlucas/phpdotenv": "^2.4"
},
"autoload": {
"psr-4": {
"Src\\": "src/"
}
}
}
/vendor
.env
Trình xử lý thứ ba chỉ hiển thị thông báo 'Cảm ơn bạn đã đăng ký' trên bảng điều khiển sau khi đăng ký thành công
Biểu mẫu trông như thế này và mã bao gồm xác thực và xử lý lỗi [ảnh chụp màn hình hiển thị đầu ra sau khi gửi biểu mẫu trống]
Bạn có thể thấy những người dùng mới trong bảng quản trị Okta của mình, nếu bạn đi tới Người dùng > Mọi người
Quên mật khẩu thông qua API Okta
Tính năng 'Quên mật khẩu' sẽ theo cùng một khuôn mẫu
Trình xử lý mới trong
/vendor
.env
/vendor
.env
Trình xử lý đầu tiên tải chế độ xem
{
"require": {
"vlucas/phpdotenv": "^2.4"
},
"autoload": {
"psr-4": {
"Src\\": "src/"
}
}
}
{
"require": {
"vlucas/phpdotenv": "^2.4"
},
"autoload": {
"psr-4": {
"Src\\": "src/"
}
}
}
/vendor
.env
Trình xử lý thứ hai ủy quyền cho bộ điều khiển người dùng khi biểu mẫu được gửi
{
"require": {
"vlucas/phpdotenv": "^2.4"
},
"autoload": {
"psr-4": {
"Src\\": "src/"
}
}
}
/vendor
.env
Bộ điều khiển sử dụng hai phương pháp mới từ
/vendor
.env
{
"require": {
"vlucas/phpdotenv": "^2.4"
},
"autoload": {
"psr-4": {
"Src\\": "src/"
}
}
}
{
"require": {
"vlucas/phpdotenv": "^2.4"
},
"autoload": {
"psr-4": {
"Src\\": "src/"
}
}
}
{
"require": {
"vlucas/phpdotenv": "^2.4"
},
"autoload": {
"psr-4": {
"Src\\": "src/"
}
}
}
/vendor
.env
Trình xử lý thứ ba hiển thị thông báo trên bảng điều khiển sau khi kích hoạt quy trình đặt lại
Ứng dụng hiện đã hoàn tất. Bạn có thể đăng ký người dùng mới trong máy chủ ủy quyền Okta của mình, ủy quyền cho họ trong ứng dụng Web của bạn và kích hoạt quy trình 'Đặt lại mật khẩu' từ xa
Tìm hiểu thêm về PHP và Okta OAuth 2. 0
Bạn có thể tìm thấy toàn bộ ví dụ mã ở đây. liên kết GitHub
Nếu bạn muốn tìm hiểu sâu hơn về các chủ đề được đề cập trong bài viết này, các tài nguyên sau đây là điểm khởi đầu tuyệt vời
- OAuth 2. 0 và OpenID Kết nối
- API người dùng Okta
- Xây dựng ứng dụng CRUD cơ bản với Laravel và React
- Xác thực Wordpress với Okta
Như mọi khi nếu bạn có bất kỳ câu hỏi, nhận xét hoặc quan tâm nào về bài đăng này, vui lòng để lại nhận xét bên dưới. Để biết nội dung tuyệt vời khác từ Nhóm Okta Dev, hãy theo dõi chúng tôi trên Twitter @OktaDev, Facebook, LinkedIn và YouTube