Put part of the config in the Vercel Environment Variable, which simplifies the deployment process

LICENSE

@@ -1,6 +1,7 @@
 MIT License
 
-Copyright (c) 2021 Spencer Woo
+Copyright (c) 2021-2023 Spencer Woo
+Copyright (c) 2023 iRedScarf
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

README.zh-CN.md

@@ -0,0 +1,112 @@
+# OneDrive-Vercel-Index（一键部署版）
+
+[English](./README.md) | 简体中文
+
+本项目fork自[spencerwooo/onedrive-vercel-index](https://github.com/spencerwooo/onedrive-vercel-index)，基于原作者于2023年6月24日归档的版本并进行了一些小修改，让您可以一键部署在完全免费托管的Vercel，在一个网页中展示、分享、预览和下载您的OneDrive文件。具体部署方法请参考下面的说明。
+
+> 本版本只测试通过E5开发者帐户，其他类型的OneDrive帐户有待进一步测试。
+
+## 修改说明
+
+- 本版本主要把原本需要在`config/`目录下的`api.config.js`和`site.config.js`这两个配置文件中设置的一些变量搬到了Vercel的环境变量中进行设置。如此便无须——先fork原仓库——然后手动修改配置文件——再部署，而是可以直接点击本文档中的一键部署按钮，在部署过程中输入环境变量的值，然后完成部署。
+
+> 本版本把一些比较敏感的变量使用了非`NEXT_PUBLIC_`前缀的环境变量进行设置，尽可能让网站浏览者不能轻易获取你的OneDrive帐号、ClientID以及ClientSecret等信息。
+
+- 再就是本版本设定了当完成OAuth认证后，自动关闭OAuth认证通道，以防有心人通过OAuth认证的网址链接就轻易地获取到用户的配置信息。
+
+## 在线预览
+
+本一键部署版的[在线预览](https://odi-demo.freeloop.one) | 原作者提供的[在线预览](https://drive.swo.moe)（已暂停维护）
+
+![demo](./public/demo.png)
+
+## 部署方法
+
+### 前期准备
+
+1. **设置OneDrive帐户的API权限：**
+
+- 本项目是通过调用OneDrive的API来获取文件列表以及下载链接的，所以设置OneDrive帐户的API权限是必须的，获取方法请参考原作者编写的[使用文档](https://ovi.swo.moe/zh/docs/advanced#修改-api-权限)。
+
+> **需要设置的API权限为以下三个：`user.read`、`files.read.all`、`offline_access`。**
+
+2. **准备好在Vercel部署时填写的五个[必要环境变量（点击查看说明）](#必要变量)的值：**
+
+### 部署到Vercel
+
+3. **当您做好准备工作，就可以点击下面的按钮进行部署了：**
+
+[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/clone?repository-url=https%3A%2F%2Fgithub.com%2FiRedScarf%2Fonedrive-vercel-index&env=NEXT_PUBLIC_SITE_TITLE,USER_PRINCIPAL_NAME,BASE_DIRECTORY,CLIENT_ID,CLIENT_SECRET)
+
+> - 如果你有需要密码保护的目录：
+>
+> [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/clone?repository-url=https%3A%2F%2Fgithub.com%2FiRedScarf%2Fonedrive-vercel-index&env=NEXT_PUBLIC_SITE_TITLE,USER_PRINCIPAL_NAME,BASE_DIRECTORY,NEXT_PUBLIC_PROTECTED_ROUTES,CLIENT_ID,CLIENT_SECRET) with `NEXT_PUBLIC_PROTECTED_ROUTES`
+>
+> - 如果你有多个OneDrive帐户需要使用同一个Redis数据库：
+>
+> [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/clone?repository-url=https%3A%2F%2Fgithub.com%2FiRedScarf%2Fonedrive-vercel-index&env=NEXT_PUBLIC_SITE_TITLE,USER_PRINCIPAL_NAME,BASE_DIRECTORY,CLIENT_ID,CLIENT_SECRET,KV_PREFIX) with `KV_PREFIX`
+>
+> - 如果你需要部署多个OneDrive-Index同时都有需要密码保护的目录：
+>
+> [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/clone?repository-url=https%3A%2F%2Fgithub.com%2FiRedScarf%2Fonedrive-vercel-index&env=NEXT_PUBLIC_SITE_TITLE,USER_PRINCIPAL_NAME,BASE_DIRECTORY,NEXT_PUBLIC_PROTECTED_ROUTES,CLIENT_ID,CLIENT_SECRET,KV_PREFIX) with `NEXT_PUBLIC_PROTECTED_ROUTES` & `KV_PREFIX`
+
+4. **初次部署成功后，部署的页面上去是404的，因为我们还需要连接到Redis数据库。**
+
+> `REDIS_URL`：如果您是第一次接触Redis数据库，那么强烈推荐您使用免费且与Vercel深度合作的Upstash，详细参考[Vercel Integration](https://docs.upstash.com/redis/howto/vercelintegration)，按说明在Vercel的[Upstash集成](https://vercel.com/integrations/upstash)中设置好（简单说就是在Upstash的`Redis`选项卡中新建一个数据库，再在`Vercel Integrations`中新建集成，把刚部署的OneDrive-Index项目与Redis数据库进行关联），它会自动填入项目部署后的环境变量中。
+
+5. **`REDIS_URL`设置成功后，再重新部署一次项目。**
+
+6. **部署成功后，当您第一次访问您的`onedrive-vercel-index`页面时，会引导你进行OAuth认证（相当简单），详情请参考原作者编写的[说明文档](https://ovi.swo.moe/zh/docs/getting-started#进行认证)。**
+
+## 环境变量
+
+### 必要变量
+| 名称 | 描述 | 原路径 | 说明 |
+| --- | --- | --- | --- |
+| `NEXT_PUBLIC_SITE_TITLE` | 展示页面的标题 | `config/site.config.js` | 例如：尼加拉瓜首富的OneDrive |
+| `USER_PRINCIPAL_NAME` | 您的OneDrive帐户 | `config/site.config.js` | **字母大小写必须一致** |
+| `BASE_DIRECTORY` | 您要分享的OneDrive目录 | `config/site.config.js` | （格式为`/目录名`），根目录则填写`/` |
+| `CLIENT_ID` | 您在微软Azure注册的应用程序客户端ID | `config/api.config.js` | 原作者提供的已过期，建议自己注册一个，有效期可以设到两年（反正也要设置帐户的API权限，顺道咯）。获取方式参照原作者编写的[使用文档](https://ovi.swo.moe/zh/docs/advanced#使用你自己的-client-id-与-secret) |
+| `CLIENT_SECRET` | 您在微软Azure注册的应用程序客户端密钥 | `config/api.config.js` | 获取方式同上，特别注意这个**需要对原密钥进行AES加密**（可在原作者编写的[使用文档](https://ovi.swo.moe/zh/docs/advanced#修改-apiconfigjs)中进行） |
+
+### 可选变量
+| 名称 | 描述 | 原路径 | 说明 |
+| --- | --- | --- | --- |
+| `NEXT_PUBLIC_PROTECTED_ROUTES` | 需要密码访问的文件夹路径 | `config/site.config.js` | 格式：`/route1,/route2`， 多个路径使用`,`间隔 |
+| `NEXT_PUBLIC_EMAIL` | 显示在右上角的联系Email | `config/site.config.js` | `[email protected]` |
+| `KV_PREFIX` | 用于KV存储（键值对存储）的前缀 | `config/site.config.js` | Upstash只提供一个免费的`Redis`数据库，如果想要部署多个OneDrive-Index，就可为不同的Index设置不同的`KV_PREFIX`值，那么就不会有键值冲突了 |
+
+## 说明文档
+
+**更多玩法请查阅原作者编写的[使用文档](https://ovi.swo.moe/zh/docs/getting-started)**
+
+## 安全风险
+
+- 在原作者的存档版本中，部署者的OneDrive账户`userPrincipalName`、`clientId`和`obfuscatedClientSecret`都会暴露在网页的源代码中。
+
+> 本版本在执行OAuth认证过程时会检查是否已经通过了认证，若已通过认证则会重定向到主页，否则才会继续进行OAuth认证过程。如此访问者便不能通过访问OAuth认证的链接地址轻易获取你的`clientId`
+和`clientSecret`了。
+
+- 因为Next.js的设计决策，以`NEXT_PUBLIC_`开头的环境变量不仅在服务器端可用，而且在客户端（浏览器）也可用。这意味着任何`NEXT_PUBLIC_`前缀的环境变量都会被包含在构建的JavaScript文件中，并会被发送到用户的浏览器。因此，任何访问你的网站的人都可以通过查看网站的源代码或网络请求来查看这些环境变量的值。
+
+> 本版本把`userPrincipalName`、`clientId`、`obfuscatedClientSecret`以及`baseDirectory`变量使用了非`NEXT_PUBLIC_`前缀的环境变量，尽可能让网站浏览者不能轻易获取你的OneDrive帐号、ClientID以及ClientSecret等信息。
+
+## 待办事项
+
+- 将密码放在环境变量中，而不是加密目录下的`.password`文件中。
+
+> 不过如此便比较难为不同的加密目录设置不同的访问密码了。
+
+- 重新设计LOGO。原始LOGO的对比度太低，与页面上其他图标和字体的风格不够一致。
+
+## License
+
+[MIT License](LICENSE)
+
+© 2021-2023 [spencer woo](https://spencerwoo.com)
+
+© 2023 [iRedScarf](https://github.com/iRedScarf)
+
+<div align="center">
+    Made by <a href="https://spencerwoo.com">spencer woo</a> | Modified by <a href="https://github.com/iRedScarf">iRedScarf
+</div>

config/api.config.js

@@ -7,11 +7,11 @@
  * - If you are using a E5 Subscription OneDrive for Business account, the direct links of your files are not the same here.
  *   In which case you would need to change directLinkRegex.
  */
+
 module.exports = {
-  // The clientId and clientSecret are used to authenticate the user with Microsoft Graph API using OAuth. You would
-  // not need to change anything here if you can authenticate with your personal Microsoft account with OneDrive International.
-  clientId: 'd87bcc39-1750-4ca0-ad54-f8d0efbb2735',
-  obfuscatedClientSecret: 'U2FsdGVkX1830zo3/pFDqaBCVBb37iLw3WnBDWGF9GIB2f4apzv0roemp8Y+iIxI3Ih5ecyukqELQEGzZlYiWg==',
+  // The clientId and clientSecret are used to authenticate the user with Microsoft Graph API using OAuth.
+  // If you are an E5 developer subscriber, set them in Vercel's environment variables `CLIENT_ID` and `CLIENT_SECRET`
+  // You would not need to change anything here if you can authenticate with your personal Microsoft account with OneDrive International.
 
   // The redirectUri is the URL that the user will be redirected to after they have authenticated with Microsoft Graph API.
   // Likewise, you would not need to change redirectUri if you are using your personal Microsoft account with OneDrive International.

config/site.config.js

@@ -3,28 +3,44 @@
  * the title, used Google fonts, site icons, contact info, etc.
  */
 module.exports = {
-  // This is what we use to identify who you are when you are initialising the website for the first time.
-  // Make sure this is exactly the same as the email address you use to sign into your Microsoft account.
-  // You can also put this in your Vercel's environment variable 'NEXT_PUBLIC_USER_PRINCIPLE_NAME' if you worry about
-  // your email being exposed in public.
-  userPrincipalName: process.env.NEXT_PUBLIC_USER_PRINCIPLE_NAME || '[email protected]',
-
-  // [OPTIONAL] This is the website icon to the left of the title inside the navigation bar. It should be placed under the
-  // /public directory of your GitHub project (not your OneDrive folder!), and referenced here by its relative path to /public.
+  // [OPTIONAL] This is the website icon to the left of the title inside the navigation bar.
+  // It should be placed under the /public directory of your GitHub project (not your OneDrive folder!), and referenced here by its relative path to /public.
   icon: '/icons/128.png',
 
-  // Prefix for KV Storage
+  // Prefix for KV Storage.
+  // You can put this in Vercel's environment variable 'KV_PREFIX' without any modification here.
   kvPrefix: process.env.KV_PREFIX || '',
 
   // The name of your website. Present alongside your icon.
-  title: "Spencer's OneDrive",
+  // You can put this in Vercel's environment variable 'NEXT_PUBLIC_SITE_TITLE' without any modification here.
+  title: process.env.NEXT_PUBLIC_SITE_TITLE || 'OneDrive-Vercel-Index',
+
+  // [OPTIONAL] This is where you specify the folders that are password protected.
+  // It is an array of paths pointing to all the directories in which you have .password set. Check the documentation for details.
+  // You can put this in Vercel's environment variable 'NEXT_PUBLIC_PROTECTED_ROUTES' without any modification here.
+  protectedRoutes: process.env.NEXT_PUBLIC_PROTECTED_ROUTES ? process.env.NEXT_PUBLIC_PROTECTED_ROUTES.split(',') : [],
+
+  // [OPTIONAL] If you want to display the email used to contact you on the right side of the nav bar, 
+  // you can set it in Vercel's environment variable 'NEXT_PUBLIC_EMAIL' without any modification here.
+  email: process.env.NEXT_PUBLIC_EMAIL ? `mailto:${process.env.NEXT_PUBLIC_EMAIL}` : '',
+
+  // [OPTIONAL] The footer component of your website. You can write HTML here, but you need to escape double quotes - changing " to \".
+  // You can write anything here, and if you like badges, generate some with https://shields.io
+  footer:
+  'Powered by <a href="https://github.com/iRedScarf/onedrive-vercel-index" target="_blank" rel="noopener noreferrer">onedrive-vercel-index</a>.',
 
-  // The folder that you are to share publicly with onedrive-vercel-index. Use '/' if you want to share your root folder.
-  baseDirectory: '/Public',
+  // [OPTIONAL] This is an array of names and links for setting your social information and links.
+  // In the latest update, all brand icons inside font awesome is supported and the icon to render is based on the name you provide. See the documentation for details.
+  links: [
+    {
+      name: 'GitHub',
+      link: 'https://github.com/iRedScarf/onedrive-vercel-index',
+    },
+  ],
 
   // [OPTIONAL] This represents the maximum number of items that one directory lists, pagination supported.
   // Do note that this is limited up to 200 items by the upstream OneDrive API.
-  maxItems: 100,
+  maxItems: 200,
 
   // [OPTIONAL] We use Google Fonts natively for font customisations.
   // You can check and generate the required links and names at https://fonts.google.com.
@@ -35,28 +51,6 @@ module.exports = {
   // googleFontLinks -  an array of links for referencing the google font assets.
   googleFontLinks: ['https://fonts.googleapis.com/css2?family=Fira+Mono&family=Inter:wght@400;500;700&display=swap'],
 
-  // [OPTIONAL] The footer component of your website. You can write HTML here, but you need to escape double
-  // quotes - changing " to \". You can write anything here, and if you like badges, generate some with https://shields.io
-  footer:
-    'Powered by <a href="https://github.com/spencerwooo/onedrive-vercel-index" target="_blank" rel="noopener noreferrer">onedrive-vercel-index</a>. Made with ❤ by SpencerWoo.',
-
-  // [OPTIONAL] This is where you specify the folders that are password protected. It is an array of paths pointing to all
-  // the directories in which you have .password set. Check the documentation for details.
-  protectedRoutes: ['/🌞 Private folder/u-need-a-password', '/🥟 Some test files/Protected route'],
-
-  // [OPTIONAL] Use "" here if you want to remove this email address from the nav bar.
-  email: 'mailto:[email protected]',
-
-  // [OPTIONAL] This is an array of names and links for setting your social information and links.
-  // In the latest update, all brand icons inside font awesome is supported and the icon to render is based on the name
-  // you provide. See the documentation for details.
-  links: [
-    {
-      name: 'GitHub',
-      link: 'https://github.com/spencerwooo/onedrive-vercel-index',
-    },
-  ],
-
   // This is a day.js-style datetime format string to format datetimes in the app. Ref to
   // https://day.js.org/docs/en/display/format for detailed specification. The default value is ISO 8601 full datetime
   // without timezone and replacing T with space.

src/components/Navbar.tsx

@@ -99,20 +99,20 @@ const Navbar = () => {
                 className="flex items-center space-x-2 hover:opacity-80 dark:text-white"
               >
                 <FontAwesomeIcon icon={['fab', l.name.toLowerCase() as IconName]} />
-                <span className="hidden text-sm font-medium md:inline-block">
+                {/*<span className="hidden text-sm font-medium md:inline-block">
                   {
                     // Append link name comments here to add translations
                     // t('Weibo')
                     t(l.name)
                   }
-                </span>
+                </span>*/}
               </a>
             ))}
 
           {siteConfig.email && (
             <a href={siteConfig.email} className="flex items-center space-x-2 hover:opacity-80 dark:text-white">
               <FontAwesomeIcon icon={['far', 'envelope']} />
-              <span className="hidden text-sm font-medium md:inline-block">{t('Email')}</span>
+              {/*<span className="hidden text-sm font-medium md:inline-block">{t('Email')}</span>*/}
             </a>
           )}
 

src/pages/[...path].tsx

@@ -11,11 +11,12 @@ import SwitchLayout from '../components/SwitchLayout'
 
 export default function Folders() {
   const { query } = useRouter()
+  const title = (query.path && Array.isArray(query.path) ? query.path[query.path.length - 1] : '')
 
   return (
     <div className="flex min-h-screen flex-col items-center justify-center bg-white dark:bg-gray-900">
       <Head>
-        <title>{siteConfig.title}</title>
+        <title>{title}</title>
       </Head>
 
       <main className="flex w-full flex-1 flex-col bg-gray-50 dark:bg-gray-800">

src/pages/api/config.ts

@@ -0,0 +1,10 @@
+import type { NextApiRequest, NextApiResponse } from 'next'
+
+export default function handler(req: NextApiRequest, res: NextApiResponse) {
+  res.status(200).json({
+    clientId: process.env.CLIENT_ID || '',
+    clientSecret: process.env.CLIENT_SECRET || '',
+    userPrincipalName: process.env.USER_PRINCIPAL_NAME || '',
+    baseDirectory: process.env.BASE_DIRECTORY || '/'
+  })
+}

src/pages/api/index.ts

@@ -10,8 +10,9 @@ import { compareHashedToken } from '../../utils/protectedRouteHandler'
 import { getOdAuthTokens, storeOdAuthTokens } from '../../utils/odAuthTokenStore'
 import { runCorsMiddleware } from './raw'
 
-const basePath = pathPosix.resolve('/', siteConfig.baseDirectory)
-const clientSecret = revealObfuscatedToken(apiConfig.obfuscatedClientSecret)
+const basePath = pathPosix.resolve('/', process.env.BASE_DIRECTORY || '/')
+const clientId = process.env.CLIENT_ID || ''
+const clientSecret = revealObfuscatedToken(process.env.CLIENT_SECRET || '')
 
 /**
  * Encode the path of the file relative to the base directory
@@ -50,7 +51,7 @@ export async function getAccessToken(): Promise<string> {
 
   // Fetch new access token with in storage refresh token
   const body = new URLSearchParams()
-  body.append('client_id', apiConfig.clientId)
+  body.append('client_id', clientId)
   body.append('redirect_uri', apiConfig.redirectUri)
   body.append('client_secret', clientSecret)
   body.append('refresh_token', refreshToken)