【问题标题】：Vue + Flask Gmail APIVue + Flask Gmail API
【发布时间】：2020-12-29 04:12:00
【问题描述】：

我正在尝试使用 Vue 作为前端，使用 Flask 作为后端来构建一个 web 应用程序，用于读取用户的 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 快速入门指南中的代码。
我应该建立什么样的谷歌项目？我目前为“网络应用程序”配置了我的凭据
我应该把什么作为重定向 uri？我正在使用本地主机，但不确定放在这里的确切内容（我尝试过 http://localhost、http://localhost:5000、http://localhost:5000/、http://localhost:5000/emails [这个是我希望他们返回的网址]）。无论我放什么，我都会收到重定向 uri 不匹配，它说它正在寻找的 uri 是 http://localhost:[random port]/

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

【问题讨论】：

标签： vue.js flask google-oauth gmail-api

【解决方案1】：

解决方案

根据您要使用 Gmail API 的目的，您必须选择设备或类别。在您的情况下，由于它是一个网站，因此应将其设置为 Web Application。

此外，您应该使用以下重定向 URI：http://localhost/emails/。您不应该包含端口号，并且应该使用尾部斜杠（在末尾添加最后一个 /）。请注意，您在后端设置的redirect URI 必须与您在Credentials Page 中设置的Credentials Page 完全相同。另请注意，更新此 URI 可能需要几分钟时间。

此外，this is a guide 了解如何创建一个登录按钮，该按钮将授权您的用户，我相信这对您有用。

我希望这对您有所帮助。让我知道您是否需要其他任何内容或者您是否不理解某些内容。 :)

【讨论】：