x/onedrive
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update guided oauth process

Browse source
This commit is contained in:
spencerwooo 2021-12-31 21:49:36 +08:00
parent 13f5c2c79f
commit 329d084a79
No known key found for this signature in database
GPG key ID: 24CD550268849CA0
7 changed files with 84 additions and 54 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

55
pages/onedrive-vercel-index-oauth/step-1.tsx
View file

@ -1,4 +1,5 @@
import Head from 'next/head'
import Image from 'next/image'
import { useRouter } from 'next/router'
import siteConfig from '../../config/site.json'
@ -8,7 +9,6 @@ import Footer from '../../components/Footer'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
export default function OAuthStep1() {
const redis_url = process.env.REDIS_URL
const router = useRouter()
return (
@ -22,30 +22,37 @@ export default function OAuthStep1() {
<div className="w-full max-w-5xl p-4 mx-auto">
<div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded p-3">
<h3 className="font-medium text-xl mb-4">Welcome to your new onedrive-vercel-index 🎉</h3>
<div className="mx-auto w-52">
<Image src="/images/fabulous-fireworks.png" width={912} height={912} alt="fabulous fireworks" />
</div>
<h3 className="font-medium text-xl mb-4 text-center">Welcome to your new onedrive-vercel-index 🎉</h3>
<h3 className="font-medium text-lg mt-4 mb-2">Step 1/3: Preparations</h3>
<p className="py-1 text-yellow-400 font-medium text-sm">
<FontAwesomeIcon icon="exclamation-triangle" className="mr-1" /> If you have not specified a REDIS_URL
inside your Vercel env variable, go initialise one at{' '}
<a href="https://upstash.com/" target="_blank" rel="noopener noreferrer" className="underline">
Upstash
</a>
. Docs:{' '}
<a
href="https://docs.upstash.com/redis/howto/vercelintegration"
target="_blank"
rel="noopener noreferrer"
className="underline"
>
Vercel Integration - Upstash
</a>
.
</p>
<p className="py-1">
Authorisation is required as no valid{' '}
<code className="text-sm font-mono underline decoration-wavy decoration-pink-600">access_token</code> or{' '}
<code className="text-sm font-mono underline decoration-wavy decoration-green-600">refresh_token</code> is
present on this deployed instance.
</p>
<h3 className="font-medium text-lg mt-4 mb-2">Step 1/3: Preparations</h3>
<p className="py-1">
Check the following configurations (especially <code className="text-sm font-mono">client_id</code> and{' '}
<code className="text-sm font-mono">client_secret</code> (obfuscated)) and see if they match the official
ones specified in the documentation of{' '}
<a
href="https://github.com/spencerwooo/onedrive-vercel-index"
target="_blank"
rel="noopener noreferrer"
className="hover:underline text-blue-600 dark:text-blue-500"
>
onedrive-vercel-index
</a>{' '}
before proceeding with authorising this application with your own Microsoft account.
present on this deployed instance. Check the following configurations before proceeding with authorising
onedrive-vercel-index with your own Microsoft account.
</p>
<div className="overflow-hidden my-4">
@ -103,15 +110,11 @@ export default function OAuthStep1() {
</table>
</div>
<p className="py-1">
<p className="py-1 font-medium text-sm">
<FontAwesomeIcon icon="exclamation-triangle" className="mr-1 text-yellow-400" /> If you see anything
missing or incorrect, you need to reconfigure <code className="text-sm font-mono">/config/api.json</code>{' '}
missing or incorrect, you need to reconfigure <code className="text-xs font-mono">/config/api.json</code>{' '}
and redeploy this instance.
</p>
<p className="py-1">
<FontAwesomeIcon icon="exclamation-triangle" className="mr-1 text-yellow-400" />️ If you are previewing
this locally, you would need to reauthorise yourself when you eventually deploy the site on Vercel.
</p>
<div className="text-right mb-2 mt-6">
<button

39
pages/onedrive-vercel-index-oauth/step-2.tsx
View file

@ -1,6 +1,7 @@
import Head from 'next/head'
import Image from 'next/image'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import siteConfig from '../../config/site.json'
@ -29,17 +30,23 @@ export default function OAuthStep2() {
<div className="w-full max-w-5xl p-4 mx-auto">
<div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded p-3">
<h3 className="font-medium text-xl mb-4">Welcome to your new onedrive-vercel-index 🎉</h3>
<p className="py-1">
Authorisation is required as no valid{' '}
<code className="text-sm font-mono underline decoration-wavy decoration-pink-600">access_token</code> or{' '}
<code className="text-sm font-mono underline decoration-wavy decoration-green-600">refresh_token</code> is
present on this deployed instance.
</p>
<div className="mx-auto w-52">
<Image
src="/images/fabulous-come-back-later.png"
width={912}
height={912}
alt="fabulous come back later"
/>
</div>
<h3 className="font-medium text-xl mb-4 text-center">Welcome to your new onedrive-vercel-index 🎉</h3>
<h3 className="font-medium text-lg mt-4 mb-2">Step 2/3: Get authorisation code</h3>
<p className="py-1">The OAuth URL has been generated for you:</p>
<p className="py-1 text-red-400 font-medium text-sm">
<FontAwesomeIcon icon="exclamation-circle" className="mr-1" /> If you are not the owner of this website,
stop now, as continuing with this process may expose your personal files in OneDrive.
</p>
<div
className="relative my-2 font-mono border border-gray-500/50 rounded text-sm bg-gray-50 dark:bg-gray-800 cursor-pointer hover:opacity-80"
onClick={() => {
@ -53,13 +60,19 @@ export default function OAuthStep2() {
<code>{oAuthUrl}</code>
</pre>
</div>
<p className="py-1">
Click on the link to get the{' '}
The OAuth link for getting the authorisation code has been created. Click on the link above to get the{' '}
<b className="underline decoration-wavy decoration-yellow-400">authorisation code</b>. Your browser will
open a new tab to Microsoft&apos;s account login page. Authenticate with your Microsoft account and copy
the redirected URL down below.
open a new tab to Microsoft&apos;s account login page. After logging in and authenticating with your
Microsoft account, you will be redirected to a blank page on localhost. Paste{' '}
<b className="underline decoration-wavy decoration-teal-500">the entire redirected URL</b> down below.
</p>
<div className="my-4 rounded overflow-hidden w-2/3 mx-auto">
<Image src="/images/step-2-screenshot.png" width={1466} height={607} alt="step 2 screenshot" />
</div>
<input
className={`w-full flex-1 border bg-gray-50 dark:bg-gray-800 dark:text-white focus:ring focus:outline-none p-2 font-mono rounded my-2 font-medium text-sm ${
authCode

44
pages/onedrive-vercel-index-oauth/step-3.tsx
View file

@ -1,5 +1,6 @@
import axios from 'axios'
import Head from 'next/head'
import Image from 'next/image'
import { useRouter } from 'next/router'
import { useEffect, useState } from 'react'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
@ -13,6 +14,17 @@ import { LoadingIcon } from '../../components/Loading'
export default function OAuthStep3({ accessToken, expiryTime, refreshToken, error, description, errorUri }) {
const router = useRouter()
const [expiryTimeLeft, setExpiryTimeLeft] = useState(expiryTime)
useEffect(() => {
if (!expiryTimeLeft) return
const intervalId = setInterval(() => {
setExpiryTimeLeft(expiryTimeLeft - 1)
}, 1000)
return () => clearInterval(intervalId)
}, [expiryTimeLeft])
const [buttonContent, setButtonContent] = useState(
<>
@ -72,14 +84,10 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
<div className="w-full max-w-5xl p-4 mx-auto">
<div className="dark:bg-gray-900 dark:text-gray-100 bg-white rounded p-3">
<h3 className="font-medium text-xl mb-4">Welcome to your new onedrive-vercel-index 🎉</h3>
<p className="py-1">
Authorisation is required as no valid{' '}
<code className="text-sm font-mono underline decoration-wavy decoration-pink-600">access_token</code> or{' '}
<code className="text-sm font-mono underline decoration-wavy decoration-green-600">refresh_token</code> is
present on this deployed instance.
</p>
<div className="mx-auto w-52">
<Image src="/images/fabulous-celebration.png" width={912} height={912} alt="fabulous celebration" />
</div>
<h3 className="font-medium text-xl mb-4 text-center">Welcome to your new onedrive-vercel-index 🎉</h3>
<h3 className="font-medium text-lg mt-4 mb-2">Step 3/3: Get access and refresh tokens</h3>
{error ? (
@ -118,14 +126,14 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
</div>
) : (
<div>
<p className="py-1 font-medium">Success, the API returned what we needed.</p>
<p className="py-1 font-medium">Success! The API returned what we needed.</p>
<ol className="py-1">
{accessToken && (
<li>
<FontAwesomeIcon icon={['far', 'check-circle']} className="text-green-500" />{' '}
<span>
Acquired access_token:{' '}
<code className="text-sm font-mono opacity-80">{`${accessToken.substring(0, 30)}...`}</code>.
<code className="text-sm font-mono opacity-80">{`${accessToken.substring(0, 60)}...`}</code>
</span>
</li>
)}
@ -134,21 +142,27 @@ export default function OAuthStep3({ accessToken, expiryTime, refreshToken, erro
<FontAwesomeIcon icon={['far', 'check-circle']} className="text-green-500" />{' '}
<span>
Acquired refresh_token:{' '}
<code className="text-sm font-mono opacity-80">{`${refreshToken.substring(0, 50)}...`}</code>.
<code className="text-sm font-mono opacity-80">{`${refreshToken.substring(0, 60)}...`}</code>
</span>
</li>
)}
</ol>
<p className="py-1 font-medium text-sm text-teal-500">
<FontAwesomeIcon icon="exclamation-circle" className="mr-1" /> These tokens may take a few seconds to
populate after you click the button below. If you go back home and still see the welcome page telling
you to re-authenticate, revisit home and do a hard refresh.
</p>
<p className="py-1">
Click the button below to save these tokens securely on Vercel before they expire. These tokens may
take a few seconds to populate, if you go back home and still see the welcome page telling you to
re-authenticate, go back home and do a hard refresh.
Final step, click the button below to store these tokens persistently before they expire after{' '}
{Math.floor(expiryTimeLeft / 60)} minutes {expiryTimeLeft - Math.floor(expiryTimeLeft / 60) * 60}{' '}
seconds. Don&apos;t worry, after storing them, onedrive-vercel-index will take care of token refreshes
and updates after your site goes live.
</p>
<div className="text-right mb-2 mt-6">
<button
className="text-white bg-gradient-to-br from-teal-400 via-teal-500 to-teal-600 hover:bg-gradient-to-bl focus:ring-4 focus:ring-teal-200 dark:focus:ring-teal-800 font-medium rounded-lg text-sm px-4 py-2.5 text-center disabled:cursor-not-allowed disabled:grayscale"
className="text-white bg-gradient-to-br from-green-500 to-teal-300 hover:bg-gradient-to-bl focus:ring-4 focus:ring-green-200 dark:focus:ring-green-800 font-medium rounded-lg text-sm px-4 py-2.5 text-center disabled:cursor-not-allowed disabled:grayscale"
onClick={sendAuthTokensToServer}
>
{buttonContent}

BIN
public/images/fabulous-celebration.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 647 KiB

BIN
public/images/fabulous-come-back-later.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 370 KiB

BIN
public/images/fabulous-fireworks.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 209 KiB

BIN
public/images/step-2-screenshot.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 327 KiB