update guided oauth process
This commit is contained in:
parent
13f5c2c79f
commit
329d084a79
7 changed files with 84 additions and 54 deletions
|
@ -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
|
||||
|
|
|
@ -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's account login page. Authenticate with your Microsoft account and copy
|
||||
the redirected URL down below.
|
||||
open a new tab to Microsoft'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
|
||||
|
|
|
@ -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'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
BIN
public/images/fabulous-celebration.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 647 KiB |
BIN
public/images/fabulous-come-back-later.png
Normal file
BIN
public/images/fabulous-come-back-later.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 370 KiB |
BIN
public/images/fabulous-fireworks.png
Normal file
BIN
public/images/fabulous-fireworks.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 209 KiB |
BIN
public/images/step-2-screenshot.png
Normal file
BIN
public/images/step-2-screenshot.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 327 KiB |
Loading…
Reference in a new issue