I'm trying to implement Dropbox OAuth Flow on my project, it's working fine without DRF and Vue, when i moved on Vue for my frontend, things get messy. Here are the Django views when only working with Django: (In this scenario all redirect flow happen in same page.)
For detailed information about the class used in flow
@login_required
def dropbox_oauth2_authorize(request):
return redirect(DropboxOAuth2Flow(
consumer_key=settings.DPX_APP_KEY,
redirect_uri=request.build_absolute_uri(reverse('driver:dropbox-callback')), # Belongs to the following view
session=request.session,
csrf_token_session_key="dropbox-auth-csrf-token",
consumer_secret=settings.DPX_APP_SECRET,
locale="en",
token_access_type="offline").start())
def dropbox_oauth2_callback(request):
try:
result = DropboxOAuth2Flow(
consumer_key=settings.DPX_APP_KEY,
redirect_uri=request.build_absolute_uri(reverse('driver:dropbox-callback')),
session=request.session,
csrf_token_session_key="dropbox-auth-csrf-token",
consumer_secret=settings.DPX_APP_SECRET,
locale="en",
token_access_type="offline").finish(
request.GET)
cursor = dropbox.Dropbox(
oauth2_access_token=result.access_token,
oauth2_refresh_token=result.refresh_token,
oauth2_access_token_expiration=result.expires_at,
app_key=settings.DPX_APP_KEY,
app_secret=settings.DPX_APP_SECRET)
...
return redirect(reverse('driver:account')) # Redirects account page where authorization started
except dropbox.oauth.BadRequestException as e:
raise e
except dropbox.oauth.BadStateException as e:
raise e
except dropbox.oauth.CsrfException as e:
raise e
except dropbox.oauth.NotApprovedException as e:
raise e
except dropbox.oauth.ProviderException as e:
raise e
I'm managing authorization in Django with djangorestframework-simplejwt for Vue frontend. Also using axios for DRF. For managing oauth flow on backend (in DRF view), what would you suggest me to do? I tried to get dropbox authorization link via DRF view but it didn't let me open this in new tab, because of CORS headers. Here is the DRF and Vue code:
@api_view(['GET'])
@permission_classes([permissions.IsAuthenticated & ReadAndWritePermission])
def dropbox_acc_oauth2_authorize(request):
return HttpResponseRedirect(DropboxOAuth2Flow(
consumer_key=settings.DPX_APP_KEY,
redirect_uri=request.build_absolute_uri(reverse('api:user_cloudaccs_dropbox_oauth2_callback', request=request)),
session=request.session,
csrf_token_session_key="dropbox-auth-csrf-token",
consumer_secret=settings.DPX_APP_SECRET,
locale="en",
token_access_type="offline").start())
Vue side: Shortly a page contains a button connected to this method via @click, EventService is a shorthand for axios.get with proper JWT authorization header. (Points to the DRF view above)
methods: {
oauthFlow() {
var newWindow = window.open();
EventService.oauthFlowStart()
.then((response) => {
newWindow.document.write(response.data);
})
.catch((e) => {
throw e;
});
},
},
}