nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Assistance with OAUT2 using javascript

amei_123

I have developed a javascript program (html file) which accesses my dropbox app files. It works fine with a short term access code when I am logged into my dropbox account. I need to generate on demand short term access codes when other users access the html file.

Below is a function that I am using to try to generate on demand short term access code :

    function app_authorization2() {

        const CLIENT_ID = app_key;

        const REDIRECT_URI = redirect_uri;

// Generate PKCE values for security

function generateCodeVerifier() {

const array = new Uint32Array(56);

window.crypto.getRandomValues(array);

return Array.from(array, dec => ('0' + dec.toString(16)).substr(-2)).join('');

}

async function gererateCodeChallenge(verifier) {

const encoder = new TextEncoder();

const data = encoder.encode(verifier);

const digest = await window.crypto.subtle.digest('SHA-256', data);

return btoa(String.fromCharCode.apply(null, new Uint8Array(digest)))

.replace(/+/g, '-').replace(///g, '-').replace(/=+$/, '');

}

// Redirect the user to Dropbox

async function initiateDropboxLogin() {

const verifier = generateCodeVerifier();

localStorage.setItem('dropbox_verifier', verifier);

const challenge = await gererateCodeChallenge(verifier);

const dbx = new Dropbox.Dropbox({ clientId: CLIENT_ID });

const authUrl = await dbx.auth.getAuthenticationUrl (

REDIRECT_URI,   // redirectUri

null,           // state'code',         // authType

'offline',      // tokenAccessType

['files.content.write', 'files.content.read'],  // scope

'none',         // includeGrantedScopes

challenge,

true            // usePKCE

);

window.location.href = authUrl;

console.log("Authorization URL Properties - ", authUrl);}

initiateDropboxLogin();

Access_Code = authUrl.code;

console.log("Access Code - ", Access_Code);

return Access_Code;

}

When I run it it gives me the following screens :

The final screen is :

The redirect uri is :

const redirect_uri = 'http://localhost:3000/auth';

I am not sure if this is the correct uri I should be using. As you can see I get a authorization code, but need to get to the next step and get an access token.

Any help would be greatly appreciated, thanks.

Find more posts tagged with

Comments

Здравко

Hi @amei_123,

If you are not sure whether your redirect URI is correct,… nobody else could be. 🙂
In general such URI has to point service listening for a request. In this context, do you have such a service on the place where your URI points to (i.e. on your "localhost" do you have something that listen on port 3000)? 😉 Rhetoric of course.

Hope this gives direction.

Здравко

@amei_123, while reading your post again, I can see that you're mixing different terms! You use "access code" for 2 different non-interchangeable things. The code you receive on initial authorization is one time use and its only purpose is… authorization, but not authentication! On other side in you post you're talking about access to your account where access token is the only possible thing to be in use - again, they are different things. Clarify to yourself what actually you need.

If the only thing you need is renewing (long term) access, the code you're trying to receive may not be needed at all (it is needed on initial authorization only - something you may do by hands outside your javascript). Take a look here for possible "by hands" initial authorization. The only thing you need then in your script, in such a case, is proper Dropbox client initialization with refresh token and after that use the so constructed client as… you're using it already. 😉

good luck.

amei_123

Thanks for taking the time to look at this. What I am looking for is the ability for other users (without dropbox) accounts to be able to access 2 files in my app that have the information the program handles. I have been able to do this manually by going into my app and getting an access token which I paste into my program. This was good for testing for my use, but now I need other users to access it. I am new to this OAUTH2 but if I have interpreted this correctly a user can get a temporary access token when they access the program (authorization_app2() function, or other function within the program) which I can use to grant them access via my Access_Token variable within the program.

Здравко

Yes you can do what you want. As I described already you can use refresh token that doesn't expire on its own (like access token does) and so will be able to do it in the same way as you are doing it in test time without time limitation.

You should keep in mind something else thought. Giving your private info to other people (like access token, refresh token, or anything else similar) you give those people right to represent themself as you! You should ensure those people wouldn't exploit in unlawful way the right you give to them. This may be dangerous, so pay attention! Maybe it's better to organize some server site application where you may keep all your private data inaccessible directly by anyone else while at the same time giving access to whoever you would like to without danger for your privacy. Keeping all in a single file is possible, but not a good solution (it's rather dangerous).

If you decide to give other people such access, make sure they have access only to the thing you want to. Example of such limitation is application with application folder access. In such a case other people would have access only to things you put in your application folder only (not to entire account content). Another example is giving only read permission if your application doesn't need to change anything, so other people wouldn't be able change or put something in your account. It's better than nothing but still not advisable - server site application is better way for a scenario like yours (where you have full control).

amei_123

I have updated my oath2 function as shown below. However my issue now is with the redirect http that does return a code in the http address localhost (http://localhost:3000/auth?code=24j2NmohKcAAAAAAAAABhbcl7g4WqNwSxGzJOJ0f9BQ), but I get the following error (The message port closed before a response was received).

Function code below :

           async function app_authorization2() {

            const CLIENT_ID = app_key;

            const REDIRECT_URI = redirect_uri;

// Redirect the user to Dropbox

            const dbx = new Dropbox.Dropbox({ clientId: CLIENT_ID });

            const authUrl = await dbx.auth.getAuthenticationUrl (

                REDIRECT_URI,   // redirectUri

                null,           // state    

                'code',         // authType

                'offline',      // tokenAccessType

                null,  // scope

                'none',         // includeGrantedScopes

                true            // usePKCE

                );

            console.log("Authorization URL Properties - ", authUrl);

            window.location.href = authUrl;

            const params = new URLSearchParams(window.location.search);

            const code = params.get('code');

            console.log("Code - ", code);

            try {

                const tokenResult = await dbx.auth.getAccessTokenFromCode(

                'http://localhost:3000/auth',

                code

                );    

                console.log('Access Token:', tokenResult.result.access_token);

                Access_Token = tokenResult.result.access_token;

                return Access_Token;

                } catch (error) {

                    console.error('Error exchanging code for token:', error);

                }

            }

Main script where I call the function :

    (async () => {

        app_authorization2();

Здравко

Hello agan @amei_123,

You're receiving the same view in the browser what you received before; and I cannot see any reason (something different in your code) to be something else. Why do you think it should be something else; what do you have changed actually? 🧐

In context of your statement - "The message port closed before a response was received" - have you ever open such a port, at all, to be possible be closed in advance next? 😁 If you think you have it, try find out where did you open it in your code? 🙂 (there is no such thing or if there is you haven't posted it in your reply)

Also keep in mind that usually from a file that some web browser opens you cannot drive system level listening ports. It was possible far ago, but at present web browsers forbid such activity cosa it could be used as exploit (security hole) by web developers (with bad intentions).

As far as I see you miss some basic knowledge about web development. Try some online tutorials before continue. Your project requires not only very basic web design knowledge, but also more deep knowledge about javascript and what/where every single feature could be used (where it is allowed to be used actually) and how it could be used. All this is outside Dropbox javascript SDK as such.