vue/nuxt/uniapp - google账号登录报错：error: ‘popup_closed_by_user‘详细解决方法，网页前端调用登录时抛出popup_closed_by_user错误

已于 2024-09-12 16:41:51 修改
阅读量3.1k 收藏 3
点赞数 7
分类专栏： 前端常见问题解决 前端组件与功能(开箱即用) 文章标签： google 谷歌 chrome谷歌浏览器 popup_closed_by 账号登录回调报错 谷歌google登录api报错 vue详细解决谷歌登录问题
于 2024-04-03 11:05:13 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/137335946
版权
在使用vue、nuxt、uni-app等前端框架开发时，遇到google登录api返回error: 'popup_closed_by_user'的错误。本文提供了详细的问题说明和正确解决方案，指出常见教程无效的原因，并给出了在登录按钮处加入特定代码的解决方法。
摘要由CSDN通过智能技术生成

问题说明

在前端框架（vue、nuxt、uni-app、react等）开发中，网站接入谷歌google登录调用api时，出现错误回调：error: 'popup_closed_by_user’问题，本文完美处理。

只要我们的报错差不多，就可以完美解决。

在这里插入图片描述

解决方法

这个问题很多教程都无效，是因为

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
专栏目录
订阅专栏
Vue3 - 最新详细实现网站接入Google谷歌授权登录配置流程及示例代码教程，手机移动端、pc电脑网站调用谷歌登陆获取用户头像及邮箱用户信息数据，vue项目国内web站点集成google账号登录！
王佳斌
07-27 4209
vue3，nuxt3，google，谷歌，授权登录，OAuth2.0，网页，详细教程，进不去官网，使用gmail邮箱登录，已获授权的重定向URI，接口报错403，手机网站接入谷歌账号登录，重定向地址，不跳转，出错，网路无法连接，无法访问此网站，vue3谷歌登录，vue3对接谷歌第三方登录，网站接入第三方谷歌登陆，最新谷歌快捷登录，前端，Google账户登录功能，可以不用后端吗，vue3实现Google Apple三方登录，登录报错，重定向不生效，vue3项目本地调试，网站打不开，进不去，纯前端做登录，对接谷
uniapp - 最新详细实现Google谷歌授权登录配置流程及示例代码教程，前端H5第三方网站调用谷歌登陆获取用户头像及邮箱用户信息数据，国内web站点接入google开发者平台账号登录（详细代码）
最新发布
王佳斌
07-26 4034
uni-app，h5，网页，移动端页面，网站，google，谷歌，授权登录，OAuth2.0，详细教程，进不去官网，使用gmail邮箱登录，已获授权的重定向URI，接口报错403，重定向地址，不跳转，出错，网路无法连接，无法访问此网站，uniapp谷歌登录，uniapp 对接谷歌第三方登录，网站接入第三方谷歌登陆，最新谷歌快捷登录，前端，Google账户登录功能，手机网站接入谷歌账号登录，登录报错，重定向不生效，UniApp项目H5本地调试，网站打不开，进不去，uniapp纯前端做登录，对接谷歌第三方登录，
web网站集成Google登录接口之前端要做什么(nuxt.js的做法)
BYYDMNZ的博客
08-08 2796
在自己的网站集成google登录的方法(nuxt.js)：  官方文档：https://developers.google.com/identity/sign-in/web/sign-in 1.根据官方文档的步骤先为自己的网站创建谷歌API控制台和客户端ID。如图：                           配置项目时，选择Web浏览器客户端类型并指定应用程序的原始URI。   ...
uniapp安卓使用第三方谷歌登录
shanhai111111的博客
11-21 1523
uniapp安卓app使用谷歌登录流程
uniapp 对接谷歌第三方登录
weixin_59685936的博客
04-28 880
uniapp 对接谷歌第三方登录
要在UniApp中实现Google登录
小马总的博客
02-22 2394
实现UniApp中的Google登录需要你遵循OAuth 2.0协议，与Google的身份验证服务进行交互，并正确地处理令牌和用户信息。这个过程需要一定的编程知识和对OAuth 2.0流程的理解。务必确保你的实现是安全的，并符合所有相关的法规和标准。
uniapp - 报错Failed fetching remote preset dcloudio/uni-preset-vue | RequestError: connect ETIMEDOUT x
高级前端工程师
02-28 1503
uniapp，vue-cli，创建项目报错，uniapp微信小程序，uniapp网页开发，uniapp移动端h5平台，uniapp安卓苹果app，uniapp创建项目报错，uniapp命令行新建项目，dcloudio/uni-preset-vue，uniapp使用模板创建项目一直卡着报错，uniapp使用vue-cli方式创建项目报错，报错怎么办，如何解决报错，无法连接到模板，创建项目失败，vue-cli无法创建uniapp怎么做，uniapp 如何解决Failed fetching remote pres
uniapp - 使用echarts报错: [Vue warn]: Error in data(): “ReferenceError: echarts is not defined“ 详细解决方法
高级前端工程师
02-01 2347
uniapp，echarts，图表库，ecarts图表报错，解决报错，如何解决控制台终端报错echarts不存在，uniapp小程序，uniappH5平台，uniapp安卓苹果ios系统开发，解决[Vue warn]: Error in data(): “ReferenceError: echarts is not defined“，uni-app的Vue项目中Echarts的报错提示，uniapp出现报错怎么解决。uniapp - 使用echarts报错: [Vue warn]: Error in dat
vue - marked 解析插件报错：marked__WEBPACK_IMPORTED_MODULE_5___default(...) is not a function（完美解决marked报错）
高级前端工程师
12-18 4550
vue，marked，marked插件报错，markdown解析插件，vue项目，vue网页网站报错，浏览器控制台报错，import marked from 'marked'引入报错，如何解决marked插件报错，vue使用marked解析markdown文件文档内容时报错，TypeError: marked__WEBPACK_IMPORTED_MODULE_5___default(...) is not a function，vue怎么解决marked引入报错，vue3报错解决办法，详细解决方案，Vue
vue2/3 - 报错Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a funct
高级前端工程师
07-02 1413
vue2，vue3，router，路由，报错，vue-router，vue报错Uncaught TypeError: (0 , vue__WEBPACK_IMPORTED_MODULE_0__.defineComponent) is not a function，解决vue错误，vue3 router报错Uncaught TypeError，如何解决这个报错，vue报错，vue运行报错，vue编译，vue项目启动时报错，页面白屏，解决vue引入模块时的报错，vue路由报错，vue-router引入失败且页面
vue2实现谷歌登录解决方案
weixin_47322393的博客
03-04 2230
Vue2实现谷歌登录的解决方案，以及Firebase如何显示自定义域名
关于Facebook和Google+授权登录
weixin_33887443的博客
03-21 915
实际中遇到需要Facebook和Google+等第三方授权登录自己的Web应用(可能还有Android和IOS的手机应用)，本质上都是JS SDK的官方应用。这时候不得不去他们官方查看文档。 注：一下所有连接如果无法打开，请自行翻Q.......... 参考文档： 1、facebook：https://developers.facebook.com/docs/facebook-login...
网站使用谷歌登录 oauth java nuxt auth
愤怒的苹果ext的博客
08-11 938
最近做谷歌快捷登录，走了比较多弯路，这里做个记录，希望对后面的人有所帮助。
vue-nuxt-ssr 做谷歌，百度统计以及google,facebook埋点总结
郝峰vip的博客
07-15 3629
vue-nuxt-ssr 做google,百度埋点详细教程
谷歌登录细节12500
bluedingdingd的博客
03-18 4499
谷歌三方登录的坑（未经测试 手机不支持Google服务框架 只是些细节 希望有所帮助） 1 手机需要支持谷歌服务框架 2 requestIdToken（getString(R.string.server_client_id)） 此处的ID需要时web应用ID， https://console.developers.google.com/projectselector2/apis/credent...
HbuilderX打包uniapp项目到google play需要注意的几点坑
mk黑足的博客
10-23 3901
1.谷歌目前要求API级别最低为29，所以打包以前要检查此处配置，"targetSdkVersion" : 29 ，manifest.json文件源码视图里。 2.版本检查提示框，如果打包后手机端运行时出现弹窗，提示：Hbuilder版本是多少多少，手机端SDK是多少多少，manifest.json文件源码视图加入以下代码 3.谷歌商店需要支持64位ARM处理器，配置模拟只勾选armeabi-v7a，需要勾选上arm64-v8a，路径为manifest.json里APP常用其它设置 4.证
uniapp引入谷歌登录原生插件——保姆式教程
qq_45626867的博客
04-12 2696
1. 需要准备的资料 证书、sha1密钥 2.注册谷歌后台应用 软件包名称为uniapp打包默认的 创建sha1：keytool -genkey -v -keystore test.keystore -alias androiddebugkey -keyalg RSA -validity 10000 查看sha1密钥：keytool -list -v -keystore debug.keystore 3.创建成功后填写客户端id到插件内容 4.自定义基座 5.最后一步打包信息填写，注意，特别重要 包
​"user" is not exported by "../../../../uniapp-FRD_v1.0/common/mysql_q.js", imported by "../../../../uniapp-FRD_v1.0/pages/login.vue".​
11-17
这个错误提示表明在文件"../../../../uniapp-FRD_v1.0/pages/login.vue"中导入的"../../../../uniapp-FRD_v1.0/common/mysql_q.js"模块中的"user"未被导出，因此无法在"../../../../uniapp-FRD_v1.0/pages/login.vue"中使用。解决这个问题的方法是在"../../../../uniapp-FRD_v1.0/common/mysql_q.js"中将"user"导出。可以使用以下代码将"user"导出： ```javascript export const user = { // your code here }; ``` 如果"../../../../uniapp-FRD_v1.0/common/mysql_q.js"中已经导出了"user"，则可能是导入的方式不正确。可以尝试使用以下代码导入"user"： ```javascript import { user } from "../../../../uniapp-FRD_v1.0/common/mysql_q.js"; ```
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值