iOS WebApp 的 FB.login 中断流程

Posted 2023-02-23

【中文标题】iOS WebApp 的 FB.login 中断流程

【英文标题】：FB.login broken flow for iOS WebApp

【发布时间】：2012-06-27 04:48:35

【问题描述】：

我正在制作一个 ios Web 应用程序（即在独立模式下运行的 html 页面 - 没有 Safari 浏览器 - 当页面的书签添加到主屏幕时）。

我有一个 onclick 调用 FB.login() 的按钮。在独立模式下，webapp 重定向到 facebook 登录页面（如预期的那样），但是之后，我卡在白屏上（我没有被要求进行身份验证，因为我已经有了，但我想身份验证屏幕会发生在白屏之前）并且不要放回网络应用程序中。

Safari 应用程序中的相同流程按预期工作。单击登录会调用 FB.login()，它会打开一个新页面，要求您登录 Facebook，一旦您登录并验证应用程序，该页面就会关闭，您将返回原始页面。

似乎在独立模式下，“第二页”出现问题，FB 登录关闭并重定向回应用程序（它没有）。并且流程中断了。

有什么解决方法吗？

谢谢， -Esa

【问题讨论】：

只是为了分享我的经验，如果有人再次来到这里：我只需用简单的html链接替换按钮即可解决：https://www.facebook.com/dialog/oauth/?client_id=[MY_APP_ID]&redirect_uri=[URL_TO_REDIRECT_AFTER_PERMISSIONS]&scope=[COMMA_SEPARATED_SCOPES]

【参考方案1】：

您可以尝试以下解决方法。它对我有用。在移动设备中，它重定向到客户端身份验证 url。

var isMobile = false;
try 
    isMobile = (window.location.href == top.location.href && window.location.href.indexOf("/mobile/") != -1);
 catch (e) 
if (!isMobile) 
    FB.login();
 else 
    var permissionUrl = "https://m.facebook.com/dialog/oauth?client_id=" + appId + "&response_type=code&redirect_uri=" + redirectPage + "&scope=" + permissions;
    window.location = permissionUrl;
    return;

【讨论】：

谢谢！我实际上做了类似的事情，受此启发：FB.login(function(response) /*stuff*/ , redirect_uri: redirect, scope: permissions); 它让我回到应用程序。唯一的问题是它不会保存我的应用程序的状态，并且让用户重新开始，但它可以正常工作。我还用我自己的逻辑替换了 isMobile 逻辑（检查用户代理，这是一个仅限移动设备的网站，所以我不需要任何桌面后备）

我也在独立模式下使用了未记录的 redirect_uri 选项，但它最近停止为我工作，让我再次遇到空白白屏问题。我现在正在使用上述方法，将 window.location 切换到 facebook 的 oauth 端点。尽管 Web 应用程序从头开始重新加载，但重定向仍然有效。我可以忍受。

这对我有用，谢谢，在我找到这个之前我很沮丧！

我更喜欢@Max_Carlson 解决方案。不需要复杂的逻辑。 FB.Login() 在桌面或移动设备上运行良好。在独立模式旁边。在他的答案中查看他的代码。简单甜美。

在独立浏览器上重定向后如何获取响应对象？

【参考方案2】：

我使用以下方法来检测我是否处于主屏幕模式并相应地做正确的事情：

if ("standalone" in navigator && navigator.standalone) 
  var permissionUrl = "https://m.facebook.com/dialog/oauth?client_id=" + appId + "&response_type=code&redirect_uri=" + window.location + "&scope=" + app_permissions;
  window.location = permissionUrl;
 else 
  FB.login(
    function(response) 
      ...
    ,
    scope: app_permissions
  );

【讨论】：

太棒了！非常感谢@Max 提供这段代码 :)

这个解决方案不起作用，它现在在哪里？还有其他步骤吗？