我有一个工作的客户端 javascript OAuth 2.0 包处理通过谷歌的身份验证。但是，当我尝试使用它从 Instagram 或 Facebook WebView 中注册或登录我的网站时，我会看到一个无限加载圈和一条非常小的消息:“请稍等……”—
Screenshot of the tiny eternal loader
调查这个问题，我看到谷歌目前正在鼓励开发人员切换到网络浏览器身份验证流程，这似乎是我所拥有的 — https://www.zdnet.com/article/google-bans-logins-from-embedded-browser-frameworks-to-prevent-mitm-phishing/ - 但我无法真正判断是什么方面导致 Insta 在不抛出错误的情况下卡住。我应该提一下，该流程在 Twitter 的 WebView 中完美运行。好像只有FB旗下的平台。
我将包含一些前端代码(React，使用“gapi-client”包装器)，因为我认为这不是后端问题。我将 token 发送到我的 Django 服务器以最终对其进行转换，但我认为在此之前它已锁定在重定向上。
安装:
gapi.load("client:auth2", () => {
gapi.auth2.init({client_id: "<CLIENT ID KEY>"});
});
身份验证:
const authenticate = () => {
let gProfileObject = gapi.auth2.getAuthInstance();
let scope = "profile email";
return gProfileObject
.signIn({scope: scope})
.then((res) => {
let username, googleResponse;
if (res.w3) {
googleResponse = res;
username = res.w3.U3;
localStorage.setItem("goog_avatar_url", googleResponse.w3.Paa);
localStorage.setItem("goog_name", googleResponse.w3.ig);
localStorage.setItem("goog_email", googleResponse.w3.U3);
}
//MOVES ON TO THE NEXT STEP IN THE SIGNUP PROCESS, COLLECTING ADDITIONAL INFORMATION FROM THE USER
this.props.oAuthToggle(googleResponse.Zi.access_token);
this.props.handleSpecialSubmit();
}).catch(err => {
console.log(err)
)
};
自从宣布新更改以来，是否有人在 Insta 或 Facebook 上遇到与 Google OAuth 2.0 类似的问题？您在哪里寻求解决方案，您需要对 OAuth 包进行哪些更改才能修复它？谢谢!
最佳答案
Instagram 浏览器本身不支持弹出窗口，它会尝试切换窗口，但有时会崩溃。因此，您可以更改 google API 行为，在 gapi.auth2.init 过程中设置 {ux_mode: "redirect", redirect_uri: "http://yoursite/url-to-redirect-after-google-login"}。
但目前在 Safari 中“重定向流”失败了。最后，我通过使用此处描述的“低级”方法解决了这个问题: https://developers.google.com/identity/protocols/oauth2/javascript-implicit-flow#example (请参阅“OAuth 2.0 端点”选项卡)
关于javascript - 客户端 Google OAuth 2.0 在 Instagram 的 WebView 中停滞不前，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57795232/