React: Login với Auth0

Bạn đang quan tâm đến React: Login với Auth0 phải không? Nào hãy cùng PHE BINH VAN HOC theo dõi bài viết này ngay sau đây nhé!

Video đầy đủ React: Login với Auth0

auth0 cho phép bạn nhanh chóng thêm xác thực vào ứng dụng phản ứng của mình và lấy thông tin người dùng. trong bài đăng này, tôi sẽ chỉ cho bạn cách tích hợp auth0 vào ứng dụng react bằng cách sử dụng auth0 react sdk.

ủy quyền cấu hình0

đặt khóa ứng dụng

đăng ký tài khoản trên auth0 sẽ tạo một ứng dụng mới cho bạn hoặc bạn có thể tạo một ứng dụng mới. nó cần một số chi tiết ứng dụng để giao tiếp với auth0. bạn có thể lấy thông tin này trong phần cấu hình ứng dụng của bảng auth0.

Khi sử dụng ứng dụng mặc định với ứng dụng gốc hoặc ứng dụng trang đơn, hãy nhớ cập nhật phương thức xác thực điểm cuối mã thông báo thành không có và đặt loại ứng dụng thành spa hoặc gốc.

bạn cần thông tin sau:

đặt url gọi lại

url gọi lại là url ứng dụng của bạn, nơi auth0 chuyển hướng người dùng sau khi họ đã xác thực. url gọi lại của ứng dụng phải được thêm vào trường url gọi lại được phép trong cài đặt ứng dụng của bạn. nếu trường này không được đặt, người dùng sẽ không thể đăng nhập vào ứng dụng và sẽ gặp lỗi.

đặt url đăng xuất

url đăng xuất là url trong ứng dụng của bạn mà auth0 có thể trả lại sau khi người dùng đã đăng xuất khỏi máy chủ ủy quyền. điều này được chỉ định trong tham số. Cũng giống như url gọi lại, url đăng xuất cũng phải được thêm vào trường url đăng xuất được phép trong cài đặt ứng dụng. nếu trường này không được đặt, người dùng sẽ không thể đăng xuất khỏi ứng dụng và sẽ gặp lỗi.

đặt nguồn gốc web được phép

Bạn phải thêm url của ứng dụng vào trường nguồn gốc web được phép trong cài đặt ứng dụng của bạn. Nếu bạn không đăng ký url của ứng dụng tại đây, ứng dụng sẽ không thể làm mới mã thông báo xác thực và người dùng sẽ bị đăng xuất khỏi ứng dụng của chúng tôi vào lần tiếp theo họ truy cập ứng dụng hoặc làm mới trang.

cài đặt react auth0 react sdk

với npm:

cũng sử dụng sợi:

sdk hỗ trợ các phương thức và biến giúp bạn tích hợp auth0 với ứng dụng phản ứng của mình một cách chủ động bằng cách sử dụng móc phản ứng hoặc các thành phần bậc cao hơn.

định cấu hình thành phần auth0provider

Về cơ bản, auth0 react sdk sử dụng bối cảnh phản ứng để quản lý trạng thái xác thực của người dùng. Một cách để tích hợp auth0 với ứng dụng react của bạn là bọc thành phần gốc của bạn bằng auth0provider mà bạn có thể nhập từ sdk.

thành phần auth0provider có các đạo cụ sau:

• domain và clientid: Giá trị của các thuộc tính này tương ứng với các giá trị của “domain” và “clientid” có trong “cài đặt” của ứng dụng trang đơn mà bạn đã đăng ký trong auth0.

nếu bạn đang sử dụng miền tùy chỉnh với auth0, giá trị của thuộc tính miền là giá trị của miền tùy chỉnh thay vì giá trị được phản ánh trong tab “cài đặt”.

• redirecturi: url-nơi người dùng điều hướng sau khi xác thực bằng auth0.

auth0provider lưu trữ trạng thái xác thực của người dùng và trạng thái của sdk, cho dù auth0 đã sẵn sàng để sử dụng hay chưa. nó cũng hỗ trợ các phương thức đăng nhập và đăng xuất của người dùng mà bạn có thể sử dụng bằng cách sử dụng useauth0 ().

Bây giờ bạn đã định cấu hình auth0provider, hãy chạy ứng dụng của bạn để xác minh rằng sdk đang khởi chạy chính xác và ứng dụng của bạn không nhận được bất kỳ lỗi nào liên quan đến auth0.

thêm thông tin đăng nhập vào ứng dụng của bạn

auth0 react sdk cung cấp cho bạn các công cụ để dễ dàng triển khai xác thực người dùng cho ứng dụng react của bạn, chẳng hạn như nút đăng nhập bằng cách sử dụng phương thức loginwithredirect () của hookosystemuth0 (). gọi phương thức loginwithredirect () sẽ chuyển hướng người dùng đến trang đăng nhập chung auth0, nơi auth0 có thể xác thực họ. sau khi xác thực thành công, auth0 sẽ chuyển hướng người dùng đến ứng dụng của bạn.

Hướng dẫn này tập trung vào việc sử dụng móc phản ứng tùy chỉnh useauth0 (). nếu bạn đang sử dụng các thành phần lớp, hãy kiểm tra các mẫu này bằng cách sử dụng thành phần bậc cao hơn withauth0 ().

Thêm thành phần nút đăng nhập vào ứng dụng của bạn. khi nhấp vào nó xác minh ứng dụng phản ứng chuyển hướng người dùng đến trang đăng nhập toàn cầu auth0 và bây giờ người dùng có thể đăng nhập hoặc đăng ký bằng tên người dùng và mật khẩu hoặc đăng nhập với nhà cung cấp xã hội. Sau khi hoàn tất việc này, hãy xác minh rằng auth0 chuyển hướng người dùng đến ứng dụng của bạn bằng cách sử dụng giá trị redirecturi mà chúng tôi đã đặt ban đầu trong auth0provider.

auth0 cung cấp nhà cung cấp xã hội google mặc định cho người thuê mới và cung cấp khóa nhà phát triển để kiểm tra đăng nhập với nhà cung cấp danh tính xã hội. tuy nhiên, khóa nhà phát triển có một số hạn chế có thể khiến ứng dụng của bạn hoạt động khác. để biết thêm chi tiết về hoạt động này cụ thể như thế nào và cách khắc phục, hãy xem tài liệu kiểm tra kết nối xã hội với khóa nhà phát triển auth0

thêm đăng xuất vào ứng dụng

Giờ đây, người dùng có thể đăng nhập vào ứng dụng, ứng dụng phải có chức năng đăng xuất. nút đăng xuất được tạo bằng phương thức logout () của hook useauth0 (). logout () sẽ chuyển hướng người dùng đến điểm cuối đăng xuất auth0 (https: // your_domain / v2 / logout) và ngay lập tức chuyển hướng người dùng đến ứng dụng của bạn.

hiển thị thông tin người dùng

auth0 react sdk giúp bạn nhanh chóng đưa thông tin người dùng được liên kết với người dùng đã đăng nhập vào bất kỳ thành phần nào bạn cần, chẳng hạn như tên hoặc hình ảnh của người dùng để hiển thị trang thông tin người dùng. thông tin người dùng có sẵn thông qua thuộc tính người dùng đã đọc được cung cấp bởi hook useauth0 (). ví dụ về thành phần cấu hình sau đây sẽ chỉ rõ cách sử dụng nó:

Thuộc tính người dùng chứa thông tin liên quan đến danh tính của người dùng (thông tin này sẽ không chứa thông tin người dùng nhạy cảm như mật khẩu). như vậy, tính khả dụng của nó phụ thuộc vào trạng thái xác thực của người dùng. Để tránh lỗi hiển thị, hãy sử dụng thuộc tính isauthenticated của useauth0 () để kiểm tra xem auth0 đã xác thực người dùng chưa trước khi react hiển thị bất kỳ thành phần nào sử dụng người dùng. đảm bảo rằng sdk đã tải xong trước khi truy cập thuộc tính isauthenticated, bằng cách kiểm tra xem quá trình tải có bằng false hay không.

xác minh rằng bạn có thể hiển thị chính xác tên người dùng.name hoặc bất kỳ thuộc tính người dùng nào khác trong thành phần sau khi người dùng đăng nhập.

Như vậy trên đây chúng tôi đã giới thiệu đến bạn đọc React: Login với Auth0. Hy vọng bài viết này giúp ích cho bạn trong cuộc sống cũng như trong học tập thường ngày. Chúng tôi xin tạm dừng bài viết này tại đây.

Website: https://phebinhvanhoc.com.vn/