vue.js - Vue + Flask Gmail API

Question

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

所需功能：

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

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

我认为我在做一些根本错误的事情，或者没有以正确的方式使用 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.jsflaskgoogle-oauthgmail-api

Answer 1

解决方案

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

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

此外，这是有关如何创建一个登录按钮的指南，该按钮将授权您的用户，我相信这对您很有用。

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