OAuth luồng web không mã: Thực hiện các yêu cầu được xác thực đối với API luồng web bằng Xano

Nè mọi người!

Gần đây tôi đã giải quyết nhiệm vụ tích hợp Webflow OAuth vào ứng dụng của mình và là một người không viết mã, tôi muốn chia sẻ cách tiếp cận của mình bằng cách sử dụng Xano làm phụ trợ và Webflow làm giao diện người dùng. Nếu bạn là một chuyên gia viết mã, hãy đồng ý với tôi—đừng ném cà chua thối! Đây là người không cần lập trình viên, hy vọng sẽ làm hành trình của bạn suôn sẻ hơn một chút.

TLDR: Tôi đã biên soạn từng bước thành một video dành cho những ai thích học trực quan nhưng bạn sẽ tìm thấy phiên bản văn bản chi tiết của quy trình bên dưới.

Hiểu OAuth

Hãy nhanh chóng nắm bắt khái niệm cơ bản về cách thức hoạt động của OAuth. Hãy hình dung thế này: bạn đang đi nghỉ và muốn thuê một căn hộ ở nước ngoài. Bạn tìm thấy một tòa nhà chung cư nơi bạn có thể thuê một căn hộ. Khi đến nơi, thay vì được trao chìa khóa của tất cả các căn hộ, chủ sở hữu sẽ gửi cho bạn mã một lần để truy cập hộp khóa chìa khóa của căn hộ cụ thể của bạn.

Bạn sử dụng mã này để mở hộp khóa và lấy thẻ chìa khóa, cấp cho bạn quyền vào căn hộ trong thời gian lưu trú.

Theo cách tương tự này, Webflow đại diện cho chủ sở hữu căn hộ, mã một lần đóng vai trò là mã truy cập và thẻ chìa khóa tương tự như mã thông báo truy cập.

Nếu bạn cần quyền truy cập vào bất kỳ thông tin nào về dự án Webflow của người dùng—chẳng hạn như danh sách trang, nội dung, bộ sưu tập hoặc biểu mẫu—bạn sẽ cần có mã thông báo truy cập. Mã thông báo này được sử dụng với mọi yêu cầu API được gửi tới Webflow thay mặt cho người dùng.

Trong ví dụ bên dưới, tôi sẽ minh họa việc xây dựng một ứng dụng Webflow đơn giản hiển thị thông tin về dự án của người dùng mà không lưu trữ mã thông báo truy cập trong cơ sở dữ liệu của tôi (mặc dù trong các tình huống thực tế, bạn nên lưu trữ mã thông báo được liên kết với người dùng).

Bước 1: Tạo ứng dụng Webflow mới

Điều hướng đến tab "Ứng dụng & tích hợp" trên trang tổng quan Webflow của bạn và tạo một ứng dụng mới. Cung cấp thông tin chung về ứng dụng của bạn, bao gồm tên, mô tả và URL trang chủ của ứng dụng. Chỉ định các quyền cần thiết—trong ví dụ của tôi, tôi sẽ sử dụng ứng dụng khách dữ liệu, cấp quyền truy cập "Đọc" cho "Trang web". Bạn có thể điều chỉnh các quyền này sau nếu cần.

Những thông tin quan trọng mà chúng tôi cần ở đây là Client ID và Client Secret , được tạo tự động cho ứng dụng của bạn. Bây giờ hãy để trống trường URL chuyển hướng; chúng ta sẽ xem lại nó trong bước tiếp theo.

Bước 2: Thiết lập dự án Webflow mới làm Frontend

Tạo dự án Webflow mới với hai trang: Trang chủ và Trang web. Trên Trang chủ, thêm nút có nhãn "Hiển thị trang web", nút này sẽ kích hoạt yêu cầu tới Webflow để lấy mã truy cập.

Đặt URL của nút thành https://webflow.com/oauth/authorize?response_type=code&client_id=YOUR_CLIENT_ID&scope=sites%3Aread , thay thế YOUR_CLIENT_ID bằng ID khách hàng thực tế thu được trước đó. Điều chỉnh URL nếu ứng dụng của bạn yêu cầu quyền bổ sung.

Nhấp vào nút này sẽ hiển thị màn hình quyền cho người dùng, cho phép họ chọn dự án nào sẽ cấp quyền truy cập. Sau khi cấp phép ứng dụng, chúng sẽ được chuyển hướng đến URL chuyển hướng—hãy nhớ sao chép URL của trang Trang web (trang thứ hai bạn đã tạo) và dán URL đó vào trường URL chuyển hướng của ứng dụng.

Sau khi hoàn tất bước này, việc nhấp vào "Hiển thị trang web" sẽ chuyển hướng người dùng đến trang Trang web, với mã truy cập được bao gồm trong URL.

Bước 3: Thiết lập dự án Xano và tạo API đầu tiên

Tạo một dự án mới trong Xano và điều hướng đến tab API. Thêm Nhóm API mới, sau đó trong nhóm đó, thêm Điểm cuối API mới—hãy gọi nó là "getToken".

Trong điểm cuối "getToken":

1. Thêm kiểu nhập văn bản có tên "accessCode" để nhận mã truy cập từ giao diện người dùng.

   
   

2. Thực hiện yêu cầu POST tới https://api.webflow.com/oauth/access_token với các tham số nội dung:

   • client_id: ID khách hàng của bạn

   • client_secret: Bí mật khách hàng của bạn

   • Grant_type: ủy quyền_code

   • mã: accessCode (sử dụng biến từ đầu vào)

     
     

   • 

   
   

3. Xác định đầu ra của yêu cầu API đầu tiên là "accessToken", đây sẽ là mã thông báo truy cập được liên kết với người dùng.

   
   

4. Thực hiện yêu cầu API thứ hai (cho mục đích minh họa) để truy xuất danh sách trang web của người dùng—yêu cầu NHẬN tới https://api.webflow.com/v2/sites . Bao gồm các tiêu đề sau:

   • chấp nhận: ứng dụng/json

   • ủy quyền: accessToken.response.result.access_token

     
     

   • 

   
   

5. Xác định đầu ra của API thứ hai là "siteList", đại diện cho danh sách các dự án Webflow.

   
   

6. Trả về "siteList" trong phản hồi.

   
   

7. Sao chép URL điểm cuối API để sử dụng sau.

Bước 4: Định cấu hình yêu cầu giao diện người dùng từ dự án Webflow của bạn

Quay lại dự án Webflow và mở trang Sites—trang nơi người dùng được chuyển hướng sau khi cấp quyền truy cập vào các dự án Webflow của họ. Tại đây, hãy thêm các hàm JavaScript sau vào vùng mã tùy chỉnh trước thẻ </body>.

Đầu tiên, hãy tạo hàm getSites() để truy xuất các trang web:

 function getSites() { const url = window.location.search; const params = new URLSearchParams(url); const accessCode = params.get('code'); const options = { method: 'POST', headers: {accept: 'application/json', 'content-type': 'application/json'}, body: JSON.stringify({accessCode: accessCode}) }; fetch('YOUR_API_ENDPOINT', options) .then(response => response.json()) .then(response => { const siteList = response.response.result.sites; showSites(siteList); }) .catch(err => console.log(err)); }

Sau đó, hãy tạo hàm showSites() để hiển thị các trang được truy xuất:

 function showSites(sites) { const container = document.querySelector('#result'); sites.forEach(site => { const siteDiv = document.createElement('div'); siteDiv.classList.add('site'); const siteContent = `<h2>${site.displayName}</h2> <p><strong>ID:</strong> ${site.id}</p> <p><strong>Workspace ID:</strong> ${site.workspaceId}</p> <p><strong>Short Name:</strong> ${site.shortName}</p> <p><strong>Time Zone:</strong> ${site.timeZone}</p> <p><strong>Created On:</strong> ${site.createdOn}</p> <p><strong>Last Updated:</strong> ${site.lastUpdated}</p> <p><strong>Last Published:</strong> ${site.lastPublished}</p> <img src="${site.previewUrl}" alt="Preview"> `; siteDiv.innerHTML = siteContent; container.appendChild(siteDiv); }); }

Cuối cùng, hãy đảm bảo rằng hàm getSites() chạy khi tải trang:

 document.addEventListener('DOMContentLoaded', function() { getSites(); });

Và bạn có nó rồi đấy! Tôi hy vọng hướng dẫn này hữu ích cho những người không phải là lập trình viên của tôi!

Vui lòng liên hệ nếu bạn có bất kỳ câu hỏi nào hoặc cần làm rõ thêm. Chúc mừng mã hóa!