Hướng dẫn auth0 javascript - auth0 javascript

Định cấu hình Auth0

Nhận khóa ứng dụng của bạn

Khi bạn đăng ký Auth0, một ứng dụng mới đã được tạo cho bạn hoặc bạn có thể đã tạo một ứng dụng mới. Bạn sẽ cần một số chi tiết về ứng dụng đó để liên lạc với Auth0. Bạn có thể nhận được những chi tiết này từ phần Cài đặt ứng dụng trong Bảng điều khiển Auth0.

Khi sử dụng ứng dụng mặc định với ứng dụng gốc hoặc một trang, hãy đảm bảo cập nhật phương thức xác thực điểm cuối mã thông báo lên

import createAuth0Client from '@auth0/auth0-spa-js';

9 và đặt loại ứng dụng thành

0 hoặc

1.Token Endpoint Authentication Method to

import createAuth0Client from '@auth0/auth0-spa-js';

9 and set the Application Type to either

0 or

1.

Bạn cần những thông tin sau:

• Miền
• ID máy khách

Nếu bạn tải xuống mẫu từ đầu trang này, những chi tiết này sẽ được điền cho bạn.

Định cấu hình URL gọi lại

URL gọi lại là URL trong ứng dụng của bạn trong đó Auth0 chuyển hướng người dùng sau khi chúng đã được xác thực. URL gọi lại cho ứng dụng của bạn 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.Allowed Callback URLs field in your Application Settings. If this field is not set, users will be unable to log in to the application and will get an error.

Nếu bạn đang theo dõi cùng với dự án mẫu bạn đã tải xuống từ đầu trang này, bạn nên đặt URL gọi lại được phép thành

2.Allowed Callback URL to

2.

Định cấu hình URL đăng xuất

URL đăng xuất là một URL trong ứng dụng của bạn mà Auth0 có thể quay 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ố truy vấn

3. URL đăng xuất cho ứng dụng của bạn phải được thêm vào trường URL đăng nhập đượ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 xuất khỏi ứng dụng và sẽ gặp lỗi.Allowed Logout URLs field in your Application Settings. If this field is not set, users will be unable to log out from the application and will get an error.

Nếu bạn đang theo dõi cùng với dự án mẫu bạn đã tải xuống từ đầu trang này, URL đăng xuất bạn cần thêm vào trường URLS đăng xuất được phép là

2.Allowed Logout URLs field is

2.

Định cấu hình nguồn gốc web cho phép

Bạn cần thêm URL cho ứng dụng của mình 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 ứng dụng của mình tại đây, ứng dụng sẽ không thể làm mới các mã thông báo xác thực và người dùng của bạn sẽ được đăng xuất vào lần tới khi họ truy cập ứng dụng hoặc làm mới trang.Allowed Web Origins field in your Application Settings. If you don't register your application URL here, the application will be unable to silently refresh the authentication tokens and your users will be logged out the next time they visit the application, or refresh the page.

Nếu bạn đang theo dõi cùng với dự án mẫu bạn đã tải xuống từ đầu trang này, bạn nên đặt nguồn gốc web được phép thành

2.Allowed Web Origins to

2.

Tích hợp Auth0 trong ứng dụng của bạn

Sử dụng thư viện SDK AUTH0 SPA để tích hợp AUTH0 vào ứng dụng của bạn. Bạn có thể cài đặt thư viện dưới dạng phụ thuộc vào ứng dụng của mình hoặc tải nó từ CDN.

Cài đặt như một sự phụ thuộc

Bạn có thể cài đặt SDK AUTH0 SPA dưới dạng phụ thuộc vào ứng dụng của mình, hữu ích nếu bạn đang sử dụng hệ thống xây dựng như webpack. Bạn có thể làm điều này bằng cách sử dụng

6 hoặc

7.

# installation with npm
npm install --save @auth0/auth0-spa-js

# installation with yarn
yarn add @auth0/auth0-spa-js

Sau khi cài đặt SDK AUTH0 SPA, hãy tham chiếu nó bằng cách sử dụng câu lệnh nhập tại điểm nhập của ứng dụng của bạn ():

import createAuth0Client from '@auth0/auth0-spa-js';

Tham chiếu CDN

Ngoài ra, nếu bạn không sử dụng trình quản lý gói như webpack, bạn có thể truy xuất SDK AUTH0 SPA từ CDN của Auth0.

Nếu bạn gặp phải một số vấn đề hoặc lỗi khi sử dụng SDK JavaScript mới, vui lòng kiểm tra FAQ để xem vấn đề của bạn có được đề cập ở đó không.

Xác thực với AUTH0

Đăng nhập Universal là cách dễ nhất để thiết lập xác thực trong ứng dụng của bạn. Chúng tôi khuyên bạn nên sử dụng nó cho trải nghiệm tốt nhất, bảo mật tốt nhất và mảng tính năng đầy đủ nhất. Hướng dẫn này sẽ sử dụng nó để cung cấp một cách để người dùng của bạn đăng nhập vào ứng dụng JavaScript của bạn.

Bạn cũng có thể nhúng hộp thoại đăng nhập trực tiếp vào ứng dụng của mình bằng tiện ích khóa. Nếu bạn sử dụng phương pháp này, một số tính năng, chẳng hạn như đăng nhập một lần, sẽ không thể truy cập được.

Khi người dùng đăng nhập, Auth0 trả về ba mục:

• 8: Để tìm hiểu thêm, hãy xem tài liệu mã thông báo truy cập

• 9: Để tìm hiểu thêm, hãy xem tài liệu mã thông báo ID

• 
  
    
      
      
      
    
  
    
      
  SPA Authentication Sample
      
  Welcome to our page!
      Log in
      Log out
    
  

  0: Số giây trước khi mã thông báo truy cập hết hạn

Bạn có thể sử dụng các mục này trong ứng dụng của mình để thiết lập và quản lý xác thực.

Thiết lập ứng dụng

Tạo một trang HTML cơ bản

Tạo một thư mục trên máy của bạn để chứa ứng dụng, sau đó thêm một tệp

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

1 vào gốc của dự án. Trang HTML này sẽ hiển thị một thông báo chào mừng và có phần "gated" yêu cầu người dùng phải được xác thực trước khi truy cập. Bạn có thể sao chép/dán nội dung sau vào tệp. Bạn sẽ thêm nhiều dòng khi bạn tiến bộ với bài viết này.

Thêm nội dung sau vào tệp

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

1 bạn vừa tạo:

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

Ngoài ra, hãy tạo một thư mục mới có tên

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

3, một thư mục bên trong gọi là

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

4 và một tệp mới trong đó được gọi là

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

5. Điều này sẽ được sử dụng để xác định làm thế nào các yếu tố nội dung được gated sẽ được ẩn trong trang.

Mở tệp

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

6 mới được tạo và thêm các CSS sau:

.hidden {
  display: none;
}

label {
  margin-bottom: 10px;
  display: block;
}

Cuối cùng, tạo một thư mục mới trong thư mục

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

3 có tên

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

8 và một tệp mới trong đó được gọi là

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

9. Điều này sẽ chứa logic dành riêng cho ứng dụng mà bạn sẽ tạo trong một vài phần tiếp theo.

Cấu trúc thư mục cho đến nay sẽ trông giống như sau:

.
├── index.html
└── public
    ├── css
    │   └── main.css
    └── js
        └── app.js

Tham khảo SDK

Bài viết này dựa trên SDK SPA mới có sẵn ở đây. Bạn có thể tham chiếu gói từ CDN trong tệp

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

1 bằng cách đặt các thẻ tập lệnh ở dưới cùng của thẻ

.hidden {
  display: none;
}

label {
  margin-bottom: 10px;
  display: block;
}

1:

Cấu hình thông tin đăng nhập

Tạo một

.hidden {
  display: none;
}

label {
  margin-bottom: 10px;
  display: block;
}

2 trong gốc của dự án. Các giá trị từ

.hidden {
  display: none;
}

label {
  margin-bottom: 10px;
  display: block;
}

3 và

.hidden {
  display: none;
}

label {
  margin-bottom: 10px;
  display: block;
}

4 phải được điền từ các cài đặt ứng dụng AUTH0 của bạn như được định cấu hình ở trên.

{
  "domain": "YOUR_DOMAIN",
  "clientId": "YOUR_CLIENT_ID"
}

Vì

.hidden {
  display: none;
}

label {
  margin-bottom: 10px;
  display: block;
}

2 được phục vụ công khai, tệp này không bao giờ nên chứa thông tin nhạy cảm như mật khẩu và bí mật của khách hàng.never contain sensitive information such as passwords and client secrets.

Tạo máy chủ

Trong phần này, bạn sẽ tạo một máy chủ web cơ bản bằng ExpressJS. Điều này sẽ được sử dụng để phục vụ trang HTML của chúng tôi, cùng với bất kỳ tài sản nào mà nó yêu cầu (JavaScript, CSS, v.v.).

Chạy lệnh sau trong cùng thư mục với tệp

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

1 bạn đã tạo trước đó:

Điều này sẽ khởi tạo một dự án NPM mới và giúp chúng tôi sẵn sàng cài đặt các phụ thuộc.

Cài đặt phụ thuộc

Trong thiết bị đầu cuối, cài đặt các phụ thuộc cần thiết để giúp máy chủ chạy và chạy:

Đồng thời cài đặt

.hidden {
  display: none;
}

label {
  margin-bottom: 10px;
  display: block;
}

7 để máy chủ của chúng tôi có thể được khởi động lại trên bất kỳ thay đổi mã nào:

Cuối cùng, hãy mở tệp

.hidden {
  display: none;
}

label {
  margin-bottom: 10px;
  display: block;
}

8 và sửa đổi mục nhập "tập lệnh" để trông giống như sau:

{
  // ...
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  // ...
}

• .hidden {
    display: none;
  }
  
  label {
    margin-bottom: 10px;
    display: block;
  }

  9 sẽ chạy ứng dụng như bình thường

• .
  ├── index.html
  └── public
      ├── css
      │   └── main.css
      └── js
          └── app.js

  0 sẽ chạy ứng dụng bằng

  .hidden {
    display: none;
  }
  
  label {
    margin-bottom: 10px;
    display: block;
  }

  7, xem các thay đổi khi chúng tôi sửa đổi các tệp

Tạo Server.js

Tiếp theo, tạo một tệp mới trong gốc của dự án cùng với

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

1 và

.hidden {
  display: none;
}

label {
  margin-bottom: 10px;
  display: block;
}

8, được gọi là

.
├── index.html
└── public
    ├── css
    │   └── main.css
    └── js
        └── app.js

4. Đây sẽ là máy chủ phụ trợ của chúng tôi và sẽ được sử dụng để phục vụ các trang spa.

Dăn

.
├── index.html
└── public
    ├── css
    │   └── main.css
    └── js
        └── app.js

4 với mã sau:

const express = require("express");
const { join } = require("path");
const app = express();

// Serve static assets from the /public folder
app.use(express.static(join(__dirname, "public")));

// Endpoint to serve the configuration file
app.get("/auth_config.json", (req, res) => {
  res.sendFile(join(__dirname, "auth_config.json"));
});

// Serve the index page for all other requests
app.get("/*", (_, res) => {
  res.sendFile(join(__dirname, "index.html"));
});

// Listen on port 3000
app.listen(3000, () => console.log("Application running on port 3000"));

Máy chủ cung cấp hai điểm cuối:

• một trong đó phục vụ tệp cấu hình xác thực cho ứng dụng phía máy khách
• một trong đó phục vụ mọi yêu cầu khác cho tệp

  
  
    
      
      
      
    
  
    
      
  SPA Authentication Sample
      
  Welcome to our page!
      Log in
      Log out
    
  

  1, sẽ cung cấp hỗ trợ cho bất kỳ định tuyến phía máy khách nào khi tất cả các tuyến đi đến cùng một trang

Ứng dụng cũng phục vụ tất cả các tệp tĩnh, chẳng hạn như các tệp

.
├── index.html
└── public
    ├── css
    │   └── main.css
    └── js
        └── app.js

7 và

.
├── index.html
└── public
    ├── css
    │   └── main.css
    └── js
        └── app.js

8 từ thư mục

.
├── index.html
└── public
    ├── css
    │   └── main.css
    └── js
        └── app.js

9.

Khởi tạo SDK

SDK phải được khởi tạo đúng với thông tin của ứng dụng AUTH0 được tạo ở trên.

Để bắt đầu, hãy mở tệp

0 và thêm một biến để giữ đối tượng máy khách Auth0:

Điều này phải được khởi tạo bằng cách sử dụng các giá trị từ tệp

.hidden {
  display: none;
}

label {
  margin-bottom: 10px;
  display: block;
}

2. Điều này có thể được thực hiện bằng cách gọi điểm cuối trên máy chủ được tạo trong phần trước. Để thực hiện việc này, hãy tạo một chức năng mới gọi là

2 xuống tệp

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

9, có thể được sử dụng để tải xuống thông tin này:

import createAuth0Client from '@auth0/auth0-spa-js';

0

Tiếp theo, tạo một chức năng mới khác gọi là

4. Điều này sẽ sử dụng

2 để tải xuống tệp cấu hình và khởi tạo biến

6:

import createAuth0Client from '@auth0/auth0-spa-js';

1

Cuộc gọi này cũng sẽ điền vào bộ đệm trong bộ nhớ với mã thông báo truy cập hợp lệ và thông tin hồ sơ người dùng nếu ai đó đã xác thực trước đó và phiên đó vẫn còn hiệu lực.

Thêm một trình xử lý cho chức năng

7 sau đó sẽ thực hiện cuộc gọi này để khởi tạo ứng dụng:

import createAuth0Client from '@auth0/auth0-spa-js';

2

Bây giờ đi và truy cập nó tại http: // localhost: 3000. Bạn sẽ thấy thông báo chào mừng và cả hai nút xác thực bị tắt. Tuy nhiên, lưu ý rằng một số trình duyệt bộ đệm các nguồn trang. Khi kiểm tra từng kết quả của từng bước, bạn nên thực hiện làm mới trang đầy đủ bỏ qua bộ đệm. Điều này có thể đạt được bằng cách sử dụng các phím

8 trên các phím OSX và

9 trên Windows.

Khôi phục trạng thái đăng nhập với các nhà cung cấp xã hội

Người dùng được đăng nhập bằng tên người dùng/mật khẩu sẽ được tự động ký lại âm thầm khi ứng dụng tải lại. Không cần thêm hành động cho loại đăng nhập này.username/password will be silently reauthenticated automatically when the application reloads. No further action is needed for this type of login.

Nếu bạn đang sử dụng trải nghiệm đăng nhập Universal cổ điển và muốn người dùng xác thực bằng cách sử dụng các nhà cung cấp nhận dạng xã hội (như Google, Apple, Facebook, v.v.), thì bạn sẽ cần định cấu hình các kết nối đó trong bảng điều khiển AUTH0 của mình.social identity providers (such as Google, Apple, Facebook, etc.), then you will need to configure those connections in your Auth0 Dashboard.

Trong menu điều hướng, chọn kết nối - xã hội và chọn kết nối xã hội mà bạn muốn hỗ trợ. Trong các cài đặt kết nối, hãy nhấp vào Cách có được ID máy khách? Và làm theo hướng dẫn để thiết lập ID và bí mật của riêng bạn.Connections - Social, and select the social connection you’d like to support. In the connection’s settings, click “How to obtain a Client ID?“ and follow the instructions to set up your own ID and secret.

Nếu bạn đang sử dụng trải nghiệm đăng nhập phổ quát mới, các kết nối xã hội được kích hoạt mặc định sẽ âm thầm tái ký kết mà không cần cấu hình bổ sung. Tuy nhiên, bạn vẫn nên thiết lập các khóa của riêng mình và tránh sử dụng các khóa phát triển Auth0 mặc định trong một ứng dụng sản xuất.

Đánh giá trạng thái xác thực

Như một cách tiếp cận đầu tiên, bạn muốn chắc chắn rằng bất kỳ ai cũng có thể truy cập trang công khai nhưng không phải là trang dành cho người dùng được xác thực, chẳng hạn như bảng cài đặt hoặc chi tiết hồ sơ người dùng. Bạn có thể quyết định nội dung nào có sẵn bằng cách ẩn, vô hiệu hóa hoặc xóa nó nếu không có người dùng hiện đang đăng nhập. Bạn làm như vậy bằng cách kiểm tra kết quả gọi phương thức

{
  "domain": "YOUR_DOMAIN",
  "clientId": "YOUR_CLIENT_ID"
}

0. Sử dụng điều này để bật hoặc vô hiệu hóa các nút đăng nhập và đăng xuất, được vô hiệu hóa theo mặc định. Đây có thể là một phần của hàm

{
  "domain": "YOUR_DOMAIN",
  "clientId": "YOUR_CLIENT_ID"
}

1 mới được gọi từ phương thức

7 ngay sau khi khởi tạo.Log in and Log out buttons, which are disabled by default. This can be part of a new

{
  "domain": "YOUR_DOMAIN",
  "clientId": "YOUR_CLIENT_ID"
}

1 function called from the

7 method right after the initialization.

Vẫn ở bên trong tệp

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

9, thêm một hàm mới có tên

{
  "domain": "YOUR_DOMAIN",
  "clientId": "YOUR_CLIENT_ID"
}

4 và sửa đổi trình xử lý

{
  "domain": "YOUR_DOMAIN",
  "clientId": "YOUR_CLIENT_ID"
}

5 để gọi chức năng mới này:

import createAuth0Client from '@auth0/auth0-spa-js';

3

Điểm kiểm tra: Nếu bạn chạy lại dự án, bạn sẽ thấy nút "đăng nhập" được hiển thị dưới dạng được bật như không người dùng nào đăng nhập trước đó. Nhưng nhấp vào nó sẽ không làm gì vì chưa có logic liên quan đến hành động đó. If you run the project again, you should see that the "Log in" button is shown as enabled as no user has previously logged in. But clicking it will not do anything as there is no logic associated to that action yet.

Đăng nhập vào ứng dụng

Xác thực đạt được thông qua chuyển hướng đến trang đăng nhập Universal Auth0. Khi người dùng đăng nhập hoặc đăng nhập, kết quả sẽ được chuyển đến URI chuyển hướng ứng dụng của bạn, được cung cấp với yêu cầu ủy quyền.

Bên trong tệp

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

9, cung cấp chức năng

{
  "domain": "YOUR_DOMAIN",
  "clientId": "YOUR_CLIENT_ID"
}

7 gọi

{
  "domain": "YOUR_DOMAIN",
  "clientId": "YOUR_CLIENT_ID"
}

8 để thực hiện bước đăng nhập. Hàm

{
  "domain": "YOUR_DOMAIN",
  "clientId": "YOUR_CLIENT_ID"
}

7 được gọi bằng nút đăng nhập được xác định trước đó trong trang HTML. Trong mẫu này, bạn sẽ chuyển hướng người dùng trở lại cùng một trang hiện tại. Bạn có thể có được giá trị đó từ thuộc tính

{
  // ...
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  // ...
}

0:Log in button previously defined in the HTML page. In this sample, you will redirect the user back to the same page they are now. You can obtain that value from

{
  // ...
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  // ...
}

0 property:

import createAuth0Client from '@auth0/auth0-spa-js';

4

Ngoài ra, vì đây là một ứng dụng trang duy nhất, kết quả của cuộc gọi này cần được xử lý trong cùng một bối cảnh. Điều này có nghĩa là khi trang được tải và người dùng không được xác thực, bạn có thể ở một trong hai kịch bản sau:

1. Người dùng không muốn xác thực và chỉ điều hướng qua nội dung công cộng hoặc
2. Người dùng gần đây đã bắt đầu quá trình xác thực và hiện đang tìm cách hoàn thành nó.

Kịch bản thứ hai này là cái bạn cần xử lý. Trong phương thức

7 của bạn, hãy kiểm tra xem người dùng có được xác thực hay không và nếu truy vấn URL chứa cả tham số

{
  // ...
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  // ...
}

2 và

{
  // ...
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  // ...
}

3. Điều này sẽ chỉ ra rằng một kết quả xác thực có mặt và cần phải được phân tích cú pháp. Trong kịch bản đó, bạn làm như vậy bằng cách gọi phương thức

{
  // ...
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  // ...
}

4. Điều này sẽ cố gắng trao đổi kết quả mà phụ trợ AUTH0 đã cho bạn trở lại cho các mã thông báo thực sự mà bạn có thể sử dụng.

Ngoài ra, các tham số truy vấn phải được xóa khỏi URL để nếu người dùng làm mới trang, ứng dụng không cố gắng phân tích lại các tham số

{
  // ...
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  // ...
}

3 và

{
  // ...
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  // ...
}

2. Điều này đạt được với phương pháp

{
  // ...
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  // ...
}

7.

Sửa đổi chức năng

7 bên trong

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

9 để bao gồm các thay đổi này:

import createAuth0Client from '@auth0/auth0-spa-js';

5

Gọi lại hiện được xử lý đúng cách và xác thực có thể được hoàn thành thành công.

Chạy dự án và nhấp vào nút Đăng nhập vào. Bạn nên được đưa đến trang đăng nhập Universal được cấu hình cho ứng dụng của bạn. Hãy tiếp tục và tạo người dùng mới hoặc đăng nhập bằng kết nối xã hội. Sau khi xác thực thành công, bạn sẽ được chuyển hướng đến trang bạn trước đây. Lần này, kết quả sẽ có mặt trong truy vấn URL và trao đổi sẽ tự động xảy ra. Nếu mọi thứ đều ổn, bạn sẽ không có tham số truy vấn trong URL, giờ đây người dùng sẽ đăng nhập và nút "Đăng xuất" sẽ được bật.Log in button. You should be taken to the Universal Login Page configured for your application. Go ahead and create a new user or log in using a social connection. After authenticating successfully, you will be redirected to the page you were before. This time, the result will be present in the URL query and the exchange will happen automatically. If everything went fine, you will end up with no query parameters in the URL, the user would now be logged in and the "Log out" button will be enabled.

Nếu bạn thấy bất kỳ lỗi nào từ máy chủ AUTH0, hãy kiểm tra xem bạn đã không quên đăng ký URL gọi lại hoặc nguồn gốc được phép như được giải thích ban đầu.

Đăng nhập người dùng

Bạn có thể nhận thấy rằng nút đăng xuất có thể nhấp khi người dùng được xác thực, nhưng không làm gì cả. Bạn cần thêm mã sẽ đăng nhập người dùng từ phụ trợ AUTH0.Log out button is clickable when the user is authenticated, but does nothing. You need to add the code that will log the user out from the Auth0 backend.

Bắt đầu đăng nhập bằng cách gọi phương thức

const express = require("express");
const { join } = require("path");
const app = express();

// Serve static assets from the /public folder
app.use(express.static(join(__dirname, "public")));

// Endpoint to serve the configuration file
app.get("/auth_config.json", (req, res) => {
  res.sendFile(join(__dirname, "auth_config.json"));
});

// Serve the index page for all other requests
app.get("/*", (_, res) => {
  res.sendFile(join(__dirname, "index.html"));
});

// Listen on port 3000
app.listen(3000, () => console.log("Application running on port 3000"));

0 chuyển giao URI quay trở lại hợp lệ. Trong mẫu này, bạn sẽ đưa người dùng trở lại cùng một trang hiện tại. Bạn có thể có được giá trị đó từ thuộc tính

{
  // ...
  "scripts": {
    "start": "node server.js",
    "dev": "nodemon server.js"
  },
  // ...
}

0. Tóm tắt logic này thành một phương pháp

const express = require("express");
const { join } = require("path");
const app = express();

// Serve static assets from the /public folder
app.use(express.static(join(__dirname, "public")));

// Endpoint to serve the configuration file
app.get("/auth_config.json", (req, res) => {
  res.sendFile(join(__dirname, "auth_config.json"));
});

// Serve the index page for all other requests
app.get("/*", (_, res) => {
  res.sendFile(join(__dirname, "index.html"));
});

// Listen on port 3000
app.listen(3000, () => console.log("Application running on port 3000"));

2.

import createAuth0Client from '@auth0/auth0-spa-js';

6

Điểm kiểm tra: Được xác thực Nhấp vào nút Đăng xuất. Bạn nên được đưa đến trang đăng nhập Universal được cấu hình cho ứng dụng của bạn và sau đó quay lại trang bạn đã từng trước. Bây giờ các cookie xác thực đã được xóa và người dùng được đăng xuất. Nút "Đăng nhập" sẽ được bật lại. Being authenticated click the Log out button. You should be taken to the Universal Login Page configured for your application and then back to the page you were before. Now the authentication cookies were cleared and the user is logged out. The "Log in" button will be enabled back again.

Nếu bạn thấy bất kỳ lỗi nào từ máy chủ AUTH0, hãy kiểm tra xem bạn đã không quên đăng ký URL đăng nhập như được giải thích ban đầu.

Đọc hồ sơ người dùng

Mỗi khi người dùng được đăng nhập, bạn có quyền truy cập cả vào mã thông báo truy cập và mã thông báo ID. Thông tin hồ sơ của người dùng sau đó được trích xuất từ ​​mã thông báo ID. Thông thường, mã thông báo được sử dụng để gọi ứng dụng phụ trợ của bạn và thông tin hồ sơ được sử dụng để hiển thị tên và ảnh hồ sơ của chúng. Trong phần này, bạn sẽ hiển thị chúng trong các khu vực văn bản riêng biệt để bạn có thể dễ dàng kiểm tra chúng.access token and the ID token. The user's profile information is then extracted from the ID token. Typically, the token is used to call your backend application and the profile information is used to display their name and profile picture. In this section you are going to display them in separate text areas so you can easily inspect them.

Mở tệp

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

1 và chèn các dòng sau ở dưới cùng của thân.

import createAuth0Client from '@auth0/auth0-spa-js';

7

Bây giờ mở lại tệp

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

9 và sửa đổi hàm

{
  "domain": "YOUR_DOMAIN",
  "clientId": "YOUR_CLIENT_ID"
}

1 đã được khai báo trước đó. Thêm logic sao cho người dùng được đăng nhập vào nội dung được hiển thị. Sử dụng các biến và chức năng hiện có từ máy khách SDK để có được và hiển thị thông tin này trên trang.

Ngoài ra, khi bắt đầu bài viết này, bạn đã thêm một tệp

  
    
    
    
  

  
    
SPA Authentication Sample
    
Welcome to our page!
    Log in
    Log out
  

6 với định nghĩa của lớp

const express = require("express");
const { join } = require("path");
const app = express();

// Serve static assets from the /public folder
app.use(express.static(join(__dirname, "public")));

// Endpoint to serve the configuration file
app.get("/auth_config.json", (req, res) => {
  res.sendFile(join(__dirname, "auth_config.json"));
});

// Serve the index page for all other requests
app.get("/*", (_, res) => {
  res.sendFile(join(__dirname, "index.html"));
});

// Listen on port 3000
app.listen(3000, () => console.log("Application running on port 3000"));

7, có thể được sử dụng để dễ dàng ẩn các yếu tố trên trang. Sử dụng cờ được xác thực như hiển thị bên dưới, thêm hoặc xóa lớp này vào các phần tử bạn muốn hiển thị hoặc ẩn trong hàm

{
  "domain": "YOUR_DOMAIN",
  "clientId": "YOUR_CLIENT_ID"
}

1:

import createAuth0Client from '@auth0/auth0-spa-js';

8

Lưu ý rằng các cuộc gọi đến phiên bản SDK có thể ném một ngoại lệ nếu xác thực không thành công, nếu không có người dùng hiện đang xác thực hoặc nếu mã thông báo truy cập cần được làm mới và yêu cầu đó không thành công. Bạn sẽ cần đặt một khối thử/bắt xung quanh chúng để xử lý chính xác mọi lỗi. Những kiểm tra lỗi này không được hiển thị trên bài viết nhưng chúng có sẵn trên ứng dụng mẫu cuối cùng mà bạn có thể tải xuống.

Điểm kiểm tra: Đi trước và chạy dự án lần cuối cùng. Bây giờ nếu người dùng được xác thực, bạn sẽ nhận được mã thông báo truy cập và dữ liệu hồ sơ của họ. Xem cách nội dung này biến mất khi bạn đăng xuất. Go ahead and run the project for the last time. Now if the user is authenticated you will get to see their access token and profile data. See how this content disappears when you log out.