Danh sách thư mục công khai OneDrive, được cung cấp bởi Vercel và Next.js.


Hướng dẫn tạo website index Onedrive miễn phí

Trưng bày, chia sẻ, xem trước và tải xuống các tệp bên trong OneDrive của bạn với onedrive-vercel-index. Thiết lập đơn giản, không cần máy chủ và mã nguồn mở. Quan trọng hơn, chúng tôi rất xinh đẹp (● '◡' ●)
Dưới đây là hướng dẫn nhanh quá dài mà bạn không nên đọc về cách triển khai onedrive-vercel-index của riêng bạn.
  1. Fork repo spencerwooo/onedrive-vercel-index.
  2. Thay đổi userPrincipleName trong site.config.js bằng email tài khoản Microsoft của bạn.
  3. Thay đổi baseDirectory trong site.config.js bằng thư mục trong thư mục gốc OneDrive của bạn.
  4. Tùy chọn - Kiểm tra xem bạn có cần thay đổi hay không trong api.config.js.
  5. Import vào Vercel và thêm tích hợp Upstash
  6. Redeploy. 🎉
Chỉ mục onedrive-vercel-index được triển khai sẽ hướng dẫn bạn thực hiện quy trình ủy quyền và lưu trữ các mã thông báo cần thiết trong cơ sở dữ liệu Redis. Đó là tất cả những gì phải làm!

1. Bắt đầu (ngay bây giờ!)

onedrive-vercel-index sử dụng OneDrive của bạn làm máy chủ lưu trữ và hiển thị các tệp, hình ảnh, video, bài hát và tài liệu được lưu trữ bên trong OneDrive của bạn để người khác xem trước và tải xuống.

onedrive-vercel-index thực sự là một mẫu được xây dựng bằng Next.js, bạn có thể lưu trữ trên Vercel, Netlify hoặc các nền tảng không máy chủ khác hoàn toàn miễn phí. Đây là cách bạn sẽ triển khai onedrive-vercel-index của riêng mình hoàn toàn từ đầu .

2. Fork the repo

Chuyển dự án vào tài khoản GitHub của riêng bạn, vì bạn sẽ duy trì phiên bản tùy chỉnh của dự án này với các cấu hình của riêng bạn.

3. Sửa đổi cấu hình

Một số sửa đổi cấu hình cơ bản là bắt buộc. Hai tệp cấu hình bao gồm config/site.config.jsconfig/api.config.js. Cái trước là để tùy chỉnh trang web của bạn và cái sau là để định cấu hình các tuyến API.

4. Tùy chỉnh cài đặt trang web

Sửa đổi config/site.config.js theo cấu hình của bạn, nơi bạn phải thay đổi:
  • userPrincipalName - được sử dụng để xác minh danh tính của bạn khi thực hiện OAuth. Nó thường là địa chỉ email Microsoft của bạn khi bạn đăng nhập vào OneDrive của mình.
  • baseDirectory - thư mục cơ sở được chia sẻ bằng cách sử dụng onedrive-vercel-index. Bạn phải đảm bảo rằng thư mục tồn tại bên trong OneDrive của bạn. (Bạn cũng có thể tạo một thư mục có tên Publictrong OneDrive của mình để giữ mọi thứ giống nhau với dự án chính.)

5. Sửa đổi cài đặt API (tùy chọn)

Nếu ...

Bạn là người dùng OneDrive phiên bản quốc tế (không phải tài khoản OneDrive Business hoặc Education, không phải người dùng SharePoint, không phải người dùng Microsoft 365 E5), bạn có thể bỏ qua bước này và để config/api.config.js nguyên.

Nếu không, và chỉ khi bạn phải !!!

Người dùng OneDrive có các tuyến API khác với những gì chúng tôi thường sử dụng, bạn cần thay đổi authApivà driveApi:


Thay đổi chúng thành:
authApi: "https://login.partner.microsoftonline.cn/common/oauth2/v2.0/token", driveApi: "https://microsoftgraph.chinacloudapi.cn/v1.0/me/drive",
Tài khoản OneDrive dành cho doanh nghiệp, tài khoản giáo dục và tài khoản đăng ký E5 cần xác nhận xem họ có đặc quyền quản trị hay không , tiếp tục không chạm config/api.config.jsvà thử OAuth, nếu nó không hoạt động (yêu cầu bạn đăng nhập bằng tài khoản có đặc quyền quản trị), thì bạn cần sử dụng của riêng bạn clientId và clientSecret là tài khoản công khai do tôi tạo sẽ không hoạt động trên tài khoản của bạn. Thông tin thêm về điều này trong Sử dụng mã khách hàng và bí mật của riêng bạn.

6. Nhập và triển khai trong Vercel

Nhập dự án GitHub onedrive-vercel-index đã được phân nhánh của bạn vào Vercel. Thay đổi:
  • Build command thành pnpm build.
  • Install command thành pnpm install.

Sau đó nhấn triển khai. Vercel sẽ tự động xây dựng và triển khai dự án của bạn. Tuy nhiên, việc triển khai có thể không thành công vì bạn chưa thêm biến môi trường REDIS_URL, đó là những gì chúng ta sẽ làm bây giờ.

7. Tạo kết nối Redis

Tạo cơ sở dữ liệu Redis và đặt URL của cá thể Redis thành biến môi trường REDIS_URLbên trong dự án Vercel. Cơ sở dữ liệu Redis được sử dụng để lưu trữ yêu cầu access_tokensvà refresh_tokenskhi giao tiếp với API của OneDrive.
  • Bạn có thể sử dụng Upstash cho việc này, hoàn toàn miễn phí, tích hợp đầy đủ với Vercel, tài liệu hướng dẫn tại đây: Vercel Integration (bỏ qua bước cuối cùng Create Your Redis Client, đã được thực hiện trong onedrive-vercel-index).
  • Bạn cũng có thể lưu trữ bất kỳ máy chủ Redis nào, sử dụng AWS, Google Cloud, Azure, v.v. Miễn là bạn có URL Redis mà Vercel có thể sử dụng.
Dù bạn sử dụng phương pháp nào, bạn cũng nên có một REDIS_URLbiến môi trường hiện tại trong Vercel, biến này sẽ giống như sau:
redis://:xxx...@some-thing-like-35533.upstash.io:35533
or:
rediss://:xxx...@some-thing-like-35533.upstash.io:35533
Nếu bạn đã bật TLS (SSL) trên cơ sở dữ liệu mới nổi của mình.

8. Triển khai lại trên Vercel

Cuối cùng, kích hoạt triển khai lại trên Vercel để sử dụng biến môi trường mới, điều hướng đến trang mới được triển khai và thực hiện ủy quyền theo hướng dẫn onedrive-vercel-index. Các miền được Vercel sử dụng được liệt kê trong cài đặt dự án của bạn. Bạn cũng có thể định cấu hình miền tùy chỉnh tại đây. (Thông tin thêm về điều này trong Custom domain.)

9. Xác thực onedrive-vercel-index của bạn

Điều hướng đến onedrive-vercel-index mới được triển khai của bạn, thường là https://xxx.vercel.app nếu bạn chưa đặt miền tùy chỉnh. Vì bạn chưa được xác thực nên bạn sẽ được chuyển hướng đến quy trình OAuth.

Bước 1 - Chuẩn bị


Kiểm tra bất kỳ điều gì không chính xác về cấu hình đã xác định của bạn. Đặc biệt client_idvà client_secret(bị xáo trộn), phải hoàn toàn giống với dự án chính nếu bạn đang sử dụng mã thông báo công khai để xác thực. Ngoài ra, hãy kiểm tra các phạm vi API, chúng tôi chỉ yêu cầu:
  • user.read: để kiểm tra email của bạn với tài khoản bạn sử dụng cho OAuth, để một số người ngẫu nhiên không thể đánh lừa bạn bằng cách xác thực lại tài khoản của anh ấy/cô ấy nhiều lần.
  • files.read.all: để truy cập vào các tệp bên trong OneDrive của bạn.
  • offline_access: để ... truy cập ngoại tuyến 🙃
Nếu mọi thứ có vẻ chính xác, hãy chuyển sang bước 2. Nếu không, bạn cần sửa đổi config/api.config.js và triển khai lại trên Vercel.

Bước 2 - Nhận mã xác thực


Dựa trên config/api.config.js, chúng tôi đã tạo liên kết OAuth cho bạn. Nhấp vào liên kết, một tab mới sẽ mở ra và nhắc bạn đăng nhập vào tài khoản Microsoft của mình. Đảm bảo rằng bạn đăng nhập bằng cùng một tài khoản mà bạn đã xác định trong userPrincipalName đó config/site.config.js.


Bạn sẽ được dẫn đến http://localhost, sao chép toàn bộ URL trên thanh địa chỉ của mình vào phần nhập liệu bên dưới. onedrive-vercel-index sẽ trích xuất codetừ ​​URL và sử dụng nó để lấy một cặp access_tokenvà refresh_token. Nhấp vào Get tokens để tiếp tục.

Bước 3 - Nhận quyền truy cập và làm mới mã thông báo


Chờ một chút vì các mã thông báo cần một chút để trả lại. Nếu mọi việc suôn sẻ, bạn sẽ được chào đón với màn hình thành công này: với một cặp mã thông báo hợp lệ để bạn lưu trữ trong cơ sở dữ liệu Redis của mình. Nhấp vào Store tokens để tiếp tục.