Implementing OAuth Flow with Django+DRF+Vue with JWT

Viewed 171

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;
        });
    },


    },
}
0 Answers
Related