如何将 ngrok 与 Google Oauth 结合使用？

Posted 2023-04-18

【中文标题】如何将 ngrok 与 Google Oauth 结合使用？

【英文标题】：How do use ngrok in conjunction with Google Oauth?

【发布时间】：2017-02-13 01:59:43

【问题描述】：

我最近安装了 Ngrok，以便在我的手机上测试我的 localhost 流星应用程序。 我通过 ngrok 的隧道成功访问了流星应用程序。 但是，当我尝试使用登录时，我收到此错误消息：

登录过程显示以下错误信息：

400. That’s an error.

Error: redirect_uri_mismatch

Application: AppName

You can email the developer of this application at: [e-mail]

The redirect URI in the request, http://localhost:7123/_oauth/google, 
does not match the ones authorized for the OAuth client.

更新授权的 javascript 来源并将 URI 重定向到 Ngrok 转发地址，没有效果。

任何帮助将不胜感激

【问题讨论】：

您是否尝试过同时使用 http/https？您是否确保重定向 uri 是完整的，即 http://localhost:7123/_oauth/google（最后没有正斜杠）？

@ Max G。是的，我都试过了。让我知道他们是否适合您...

这是我在重定向中设置的，它对我有用。出于好奇，您为什么将端口设置为 7123 而不是默认的 3000？使用ngrok的时候，有没有让sur放xxx.ngrok.io:7123？

@MaxG。哇！？很惊讶这对你有用！请帮帮我！为了回答您的问题，我曾经通过我的路由器在端口 3000 进行端口转发（不久前）。我知道这不是最安全的方法，但为了限制对我的应用程序的访问，我通过像这样启动我的流星应用程序将端口更改为 7123：meteor --port 7123。以这种方式启动我的应用程序从此成为一种习惯。是的，我将 XXX.ngrok.io:7123 放在 ngrok 中，此外，我还可以使用 Ngrok 生成的链接从外部访问该应用程序。很高兴您为您完成了这项工作。迫不及待地想让它为我工作！

【参考方案1】：

使用 ngrok 并将根 URL 更改为 ngrok 提供的 URL。

ROOT_URL=http:XXXXXXXX.ngrok.io meteor 启动流星。

【讨论】：

感谢 Ankit！根据您的建议，我使用 ngrok 生成的链接更新我的 Google 凭据，我使用相同的链接在终端中成功启动流星，如下所示：ROOT_URL="http://xxxxxxxx.ngrok.io" meteor 我说成功，因为我看到了App running at: http://xxxxxxxx.ngrok.io

我认为根 url 值应该不带引号。顺便说一句，它起作用了。我昨天也做了同样的事情，它奏效了。

感谢 Ankit！根据您的建议，我使用 ngrok 生成的链接更新我的 Google 凭据，我使用相同的链接通过键入以下内容在终端中成功启动流星：ROOT_URL="http://xxxxxxxx.ngrok.io" meteor 我说成功，因为我在终端中看到了App running at: http://xxxxxxxx.ngrok.io。但是，当我浏览链接 xxxxxxxx.ngrok.io` 时，我看到 The connection to http://xxxxxxxxx.ngrok.io was successfully tunneled to your ngrok client, but the client failed to establish a connection to the local address localhost:7123. 我通过...修复此问题...

通过meteor --port 7123在另一个终端启动应用程序

我收到此错误消息：W20161020-11:29:02.475(3) (oauth_server.js:398) Error in OAuth Server: Failed to complete OAuth handshake with Google. failed [400] "error" : "redirect_uri_mismatch" I20161020-11:29:04.653(3)? Exception while invoking method 'login' Error: Failed to complete OAuth handshake with Google. failed [400] "error" : "redirect_uri_mismatch" ....

【参考方案2】：

它正在尝试使用http://localhost:7123/_oauth/google，而不是更像ngrok 的url，例如：https://fd4fdbbb.ngrok.io/_oauth/google

您也可以检查您用于运行应用程序的参数和环境变量。

例如，我通常使用

ServiceConfiguration.configurations.upsert(
     service: 'facebook' ,
     
        $set: 
            appId: process.env.facebookConsumerKey,
            secret: process.env.facebookConsumerSecret,
            loginStyle: 'popup'
        
    
);

然后使用如下所示的 bash 脚本运行流星：

#!/bin/bash

export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && . "$NVM_DIR/nvm.sh" # This loads nvm

nvm install 4.4.7

IP_ADDRESS=`ifconfig | grep -Eo 'inet (addr:)?([0-9]*\.)3[0-9]*' | grep -Eo '([0-9]*\.)3[0-9]*' | grep -v '127.0.0.1' | grep -v '10.0.0.1'` echo "Starting app on: $IP_ADDRESS:3000"

# NODE_DEBUG=request \
# facebookOAuthRedirectURL=http://$IP_ADDRESS:3000/_oauth/facebook \

facebookAppName="BlahApp - local dev" \ 
facebookConsumerKey=12345 \     
facebookConsumerSecret=xxxxxx \
facebookOAuthRedirectURL=http://$IP_ADDRESS:3000/_oauth/facebook \
MONGO_URL=mongodb://$IP_ADDRESS:27017/staging-blah-app \
ROOT_URL=http://$IP_ADDRESS:3000 \ 
BIND_IP=$IP_ADDRESS \
MOBILE_DDP_URL=http://$IP_ADDRESS \    
MOBILE_ROOT_URL=http://$IP_ADDRESS \ 
meteor --port $IP_ADDRESS:3000 --settings development-settings.json

所以你可以，而不是使用googleOAuthRedirectURL=http://$IP_ADDRESS:3000/_oauth/google 可以使用https://fd4fdbbb.ngrok.io/_oauth/google

【讨论】：

谢谢！实际上，在我的 Meteor 客户端启动中，我运行：Meteor.startup(function () // Client startup method. Meteor.absoluteUrl.defaultOptions.rootUrl = 'http://xxxxxxxx.ngrok.io'; ); 随后，当我“配置 Google”时，系统提示我将授权 Javascript 来源设置为：http://xxxxxxxx.ngrok.io，并将授权重定向 URI 设置为：http://xxxxxxxx.ngrok.io/_oauth/google。

你能邀请我聊天吗？

@SirBT 当然，你会在codementor.io/sebastianconcept找到我

【参考方案3】：

问题是流星没有读取环境变量，即使它在客户端被覆盖，服务器以错误的回调 url 连接到谷歌。

现在是解决方案...我首先确保通过在终止应用程序后在终端中运行它来重置 google 服务配置中的设置：

meteor reset

在一个单独的终端，然后我启动ngrok来生成一个隧道链接：

./ngrok http 7123

让出隧道链接：

http://adba9b9f.ngrok.io/ 

在一个单独的终端中，我通过将其分配给“端口 7123”并将“http://adba9b9f.ngrok.io”设置为 absoluteUrl 来启动我的应用程序，如下所示：

ROOT_URL=http://adba9b9f.ngrok.io meteor --port 7123

为了确认这个命令已经执行，我在浏览器控制台中输入了这个

Meteor.absoluteUrl() 

回复：

"http://adba9b9f.ngrok.io" 

表示 Meteor.absoluteUrl() 命令成功。

接下来，我通过“http://adba9b9f.ngrok.io”隧道访问了我的应用程序并点击了“配置 google 按钮”，很高兴看到授权的 JavaScript 来源预设为： http://adba9b9f.ngrok.io 和 授权重定向 URI 预设为：http://adba9b9f.ngrok.io/_oauth/google

然后，我使用 google 凭据中的详细信息填写了 Client ID 和 Client Secret 部分，并使用配置 google 按钮详细信息中的详细信息更新了 google 凭据并保存。

很高兴地说...现在一切正常。