Facebook JS SDK渐进式网页应用问题 [英] Facebook JS SDK Progressive web app issue

问题描述

我的问题是当从主屏幕应用程序使用Fb登录对话框时，它不会自动关闭。它在Chrome浏览器中打开时工作得很好，但是当我从安装的主屏幕应用程序使用它时，对话窗口会打开要求的权限，毕竟赋予权限后对话框变为空白，并且不会关闭或重定向回应用程序。

看起来如果我将manifest.json中的display更改为browser，它可以工作，但当display处于standalone时不起作用。

我搜遍了所有，但没有成功。

谢谢

解决方案

当您的应用程序作为渐进式网络应用程序安装时，Facebook登录弹出窗口和父窗口（您的应用程序）无法在桌面环境中进行通信。

您也会在其他情况下遇到此问题，例如当你的应用程序的URL从其他应用程序（Instagram，Facebook Messenger等）启动时，我不记得这涉及哪些特定的场景或设备，但有几个。

您可以按照其他答案的建议实施基于服务器的流程。您也可以在客户端实现自定义重定向流程。

如何创建自定义重定向流程在Facebook SDK文档中的手动构建登录流程：

https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow

想法如下：

您将用户引导至Facebook登录对话框（而不是由 FB.login（）），例如当他们点击一个按钮时：

  https://www.facebook.com/v2.11/dialog/oauth？ 
 client_id = {app-id} 
& redirect_uri = {redirect-uri} 
& response_type = token 
& state = {state-param} 
  

如果用户成功授予您的应用所需的权限，他/她将被重定向回您的应用（该位置已确定 $ {code> {redirect-url} ？code =< facebook-code>& state = {state}＃_ = _

然后你的应用程序需要确定登录是否成功。有两种方法可以做到这一点：a）读取当前URL的查询字符串（参见 code =< code> code>部分 - 这可以用来检索关于你的用户的附加信息，或者它可以发送到你的后端服务器）。

B）使用Facebook SDK使用 FB.getLoginStatus（yourCallback）检索登录状态

如果您已经在使用SDK和 FB.login（yourCallback），您可以将 yourCallback 添加到 FB.getLoginStatus 以及。您也可以支持弹出流程和重定向流程，具体取决于用户的设备。

我建议阅读我上面发布的文档条目以获取更多信息和选项。 / p>

I have a Progressive Web App built with Angular 4.

My Problem is the Fb login dialog does not close automatically when used from the home screen app. It works perfectly fine when opened in chrome browser but when i use it from installed home screen app the dialog window opens asks for permissions, after all permission is given the dialog goes blank and does not close or redirects back to the app.

It seems like if i change the "display" in manifest.json to "browser" it works but does not work when "display" is in "standalone".

I have searched all over but no success.

Thanks

解决方案

When your app is installed as a progressive web app, the Facebook login popup and the parent window (your app) can't communicate the way they do in a desktop environment.

You'll face this problem in other scenarios as well, e.g. when you app's URL is launched from other apps (Instagram, Facebook Messenger etc.) I can't remember which specific scenarios or devices this pertains to, but there are several.

You can implement a server-based flow as suggested by another answer. You can also implement a custom redirect flow on the client side.

How to create a custom redirect flow is described in the Facebook SDK documentation, under "Manually Building a Login Flow":

https://developers.facebook.com/docs/facebook-login/manually-build-a-login-flow

The idea is as follows:

You direct your users to the Facebook login dialog (not the popup launched by FB.login()), e.g. when they click a button:

https://www.facebook.com/v2.11/dialog/oauth?
  client_id={app-id}
  &redirect_uri={redirect-uri}
  &response_type=token
  &state={state-param}

If the user successfully grants your app the necessary permissions, he/she is redirected back to your app (the location is determined by {redirect-url}):

{redirect-uri}?code=<facebook-code>&state={state}#_=_

Then you app needs to figure out whether the login was successful or not. There are two ways to do this:

A) Read the query string of the current URL (see the code=<code> part -- this can be used to retrieve additional info about your user, or it can be sent to your backend server).

B) Use the Facebook SDK do retrieve the login status using FB.getLoginStatus(yourCallback)

If you're already using the SDK and FB.login(yourCallback), you can add yourCallback to FB.getLoginStatus as well. You can also support both a popup flow and a redirect flow depending on the user's device.

I suggest reading through the documentation entry I posted above for further information and options.

这篇关于Facebook JS SDK渐进式网页应用问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！