Vue + Flask Gmail API

Question

我正在尝试构建一个 Web 应用程序，使用 Vue 作为前端，使用 Flask 作为后端，读取用户的 Gmail 电子邮件。

所需功能：

• 用户单击前端的“链接 Gmail 帐户”按钮
• 用户通过 gmail Oauth2 进行身份验证并确认。一旦确认，他们就会重定向回他们所在的页面
• 用户确认后，后端查询gmail以获取所有用户的电子邮件并将数据返回给前端

我一直在尝试使用 https://developers.google.com/gmail/api/quickstart/python 作为起点，但我无法对用户进行身份验证 - 我不断收到随机的重定向 uri 不匹配错误端口（我在本地执行此操作，因此将重定向 uri 设置为我访问项目的本地主机端口）。

我认为我做的事情根本上是错误的，或者没有以正确的方式使用 Gmail API，但在 google 和 youtube 上进行了搜索，但没有结果。

我认为可能导致问题的具体事项：

• 实现这一目标的最佳总体策略是什么？我应该使用 Python 还是 JavaScript 中的 Gmail API？现在，用户单击“链接帐户”按钮，该按钮调用我后端中的 API，然后运行 Python 快速入门指南中的代码。
• 我应该建立什么样的谷歌项目？我目前已为“Web 应用程序”配置了凭据
• 我应该将什么作为重定向 uri？我正在使用 localhost，但不确定放在这里到底是什么（我已经尝试过 http://localhost、http://localhost:5000、http://localhost:5000/、http://localhost:5000/emails [this是我希望他们返回的网址]）。无论我输入什么，我总是收到重定向 uri 不匹配的信息，它表示它正在寻找的 uri 是 http://localhost:[随机端口]/

对于如何实现这一目标，我将不胜感激。谢谢！

Answer 1

根据您要使用 Gmail API 的用途，您必须选择设备或类别。在您的情况下，因为它是一个网站，所以应该设置为“Web 应用程序”。

此外，您应该使用以下重定向 URI：

http://localhost/emails/

。您不应包含端口号，并且应使用尾部斜杠（在末尾添加最后一个

/

）。请注意，您在后端设置的 redirect URI 必须与您在 Credentials Page 中设置的 完全匹配。另请注意，更新此 URI 可能需要几分钟时间。