I’m trying to authenticate with OAuth 2.0 and I keep getting 401 unauthorized errors. I know for sure that I’m using my correct Client ID and Client Secret, so I’m not sure what’s going wrong.
Solved
OAuth authentication not working
Best answer by ostefaniuk Box
Summary: the problem @user79 is reporting occurred with an attempt to use Transloadit with Companion integrated with Uppy component in a Vue + PHP project, with Box Custom app with oAuth 2.0.
I tried to recreate the behaviour using a simplified code sample. I was able to successfully log in to Box with Uppy, but once added the Transloadit with Companion oAuth the process failed. Here is the code I used:
<!DOCTYPE html>
<html>
<head>
<title>Uppy+Transloadit sample app</title>
<link
href="https://releases.transloadit.com/uppy/v3.10.0/uppy.min.css"
rel="stylesheet"
/>
<script type="module">
import {
Uppy,
Dashboard,
ImageEditor,
RemoteSources,
Transloadit,
} from 'https://releases.transloadit.com/uppy/v3.10.0/uppy.min.mjs'
const uppy = new Uppy()
.use(Transloadit, {
waitForEncoding: true,
alwaysRunAssembly: true,
assemblyOptions: {
params: {
template_id: 'TRANSLOADIT_TEMPLATE_ID',
auth: {
key: 'TRANSLOADIT_KEY',
},
},
},
})
.use(Dashboard, { trigger: '#browse' })
.use(ImageEditor, { target: Dashboard })
.use(RemoteSources, {
companionUrl: 'COMPANION_URL',
})
.on('complete', ({ transloadit }) => {
console.log(transloadit)
transloadit.forEach((assembly) => {
console.log(assembly.results)
})
})
.on('error', (error) => {
console.error(error)
})
</script>
</head>
<body>
<button id="browse">Select Files</button>
</body>
</html>
Errors I’m getting are:
401 on transloadit url and after granting access to Box I get:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').
Box recognises the login and sends email notification to the user about this action. I contacted the Transloadit support and they are currently working on the fix in the Uppy source code. Please follow this thread for more details and status: https://github.com/transloadit/uppy/pull/4681 [github.com]
Cheers,
Olga
Hi there, can you specify if you’re using an SDK, what is the programming language you’re using? Also, could you check your setting in the Developer Console: especially the Redirect URI and CORS Domain. Here is my recent blog post touching Box node.js SDK and OAuth 2.0. It might be a helpful reference: https://medium.com/box-developer-blog/getting-started-with-box-node-js-sdk-with-oauth-2-0-5ca2e2e9c713
Hi there, have you checked the OAuth 2.0 Redirect URI and CORS Domains settings in the Box Developer Console (Configuration tab)?
Summary: the problem @user79 is reporting occurred with an attempt to use Transloadit with Companion integrated with Uppy component in a Vue + PHP project, with Box Custom app with oAuth 2.0.
I tried to recreate the behaviour using a simplified code sample. I was able to successfully log in to Box with Uppy, but once added the Transloadit with Companion oAuth the process failed. Here is the code I used:
<!DOCTYPE html>
<html>
<head>
<title>Uppy+Transloadit sample app</title>
<link
href="https://releases.transloadit.com/uppy/v3.10.0/uppy.min.css"
rel="stylesheet"
/>
<script type="module">
import {
Uppy,
Dashboard,
ImageEditor,
RemoteSources,
Transloadit,
} from 'https://releases.transloadit.com/uppy/v3.10.0/uppy.min.mjs'
const uppy = new Uppy()
.use(Transloadit, {
waitForEncoding: true,
alwaysRunAssembly: true,
assemblyOptions: {
params: {
template_id: 'TRANSLOADIT_TEMPLATE_ID',
auth: {
key: 'TRANSLOADIT_KEY',
},
},
},
})
.use(Dashboard, { trigger: '#browse' })
.use(ImageEditor, { target: Dashboard })
.use(RemoteSources, {
companionUrl: 'COMPANION_URL',
})
.on('complete', ({ transloadit }) => {
console.log(transloadit)
transloadit.forEach((assembly) => {
console.log(assembly.results)
})
})
.on('error', (error) => {
console.error(error)
})
</script>
</head>
<body>
<button id="browse">Select Files</button>
</body>
</html>
Errors I’m getting are:
401 on transloadit url and after granting access to Box I get:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('file://') does not match the recipient window's origin ('null').
Box recognises the login and sends email notification to the user about this action. I contacted the Transloadit support and they are currently working on the fix in the Uppy source code. Please follow this thread for more details and status: https://github.com/transloadit/uppy/pull/4681 [github.com]
Cheers,
Olga
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.