Vue + Flask Gmail API

0
votes

I am attempting to build a webapp using Vue for the frontend and Flask for the backend that reads in the users Gmail emails.

Desired functionality:

  • User clicks a button to "Link Gmail Account" on the frontend
  • User is authenticated with gmail Oauth2 and confirms. Once confirmed, they redirect back to the page they were on
  • Once the user confirms, the backend queries gmail to get all of the users emails and returns the data to the frontend

I have been trying to use https://developers.google.com/gmail/api/quickstart/python as a starting point, but I cannot authenticate the user -- I keep getting a redirect uri mistmatch error with a random port (I am doing this locally so have set the redirect uri to be the localhost port where I access my project).

I think I am doing something fundamentally wrong or not using the Gmail API in the correct way, but have searched all over google and youtube to no avail.

Specific things that I think could be causing an issue:

  • What is the best overall strategy to implement this? Should I use the Gmail API in Python or Javascript? Right now, the use clicks the "Link Account" button which calls an API in my backend which then runs the code in the Python Quickstart guide.
  • What kind of google project should I set up? I currently have my credentials configured for a "web application"
  • What should I put as the redirect uri? I am using localhost but am unsure exactly what to put here (I have tried http://localhost, http://localhost:5000, http://localhost:5000/, http://localhost:5000/emails [this is the url I want them to return to]). No matter what I put, I keep getting a redirect uri mismatch and it says the uri it is looking for is http://localhost:[random port]/

I would appreciate any help on how to approach achieving this. Thank you!

1
vue.jsflaskgoogle-oauthgmail-api

1 Answers

0
votes

Solution

Depedinding on what you are going to use Gmail API for, you must select the device or category. In your case, as it is a website it should be set to Web Application.

Also, you should be using the following redirect URI: http://localhost/emails/. You should not include the port number and you should be using trailing slashes (adding the last / at the end). Note that the redirect URI you set up in your backend must be an exact match of the one you have set up in your Credentials Page. Also please note that it might take some minutes to update this URI.

Moreover, this is a guide on how to create a Sign In button that will authorise your users that I believe will be useful for you.

I hope this has helped you. Let me know if you need anything else or if you did not understood something. :)