Facebook的JS SDK進步的web應用程序的問題

我有一個漸進式Web應用程序內置有角4Facebook的JS SDK進步的web應用程序的問題

我的問題是在FB登錄對話框從主屏幕上的應用程序使用時不會自動關閉。它在Chrome瀏覽器中打開時工作得很好，但是當我從安裝的主屏幕應用程序中使用它時，對話框窗口會打開，要求提供權限，畢竟允許對話框變爲空白，並且不會關閉或重定向迴應用程序。

這似乎是如果我將manifest.json中的「display」更改爲「browser」，但它在「display」處於「standalone」時不起作用。

我已經搜遍了所有，但沒有成功。

謝謝

來源

2017-09-26 Abhijeet Bajracharya

這有什麼更新？我正在處理同樣的問題 –

@ GabrielC.Troia nope，我必須保持瀏覽器模式的應用程序。我認爲它是一個交叉來源的東西，鉻是封鎖它。所以試圖做一個自定義的登錄流程。 –

謝謝。保持它在瀏覽器模式中違背了成爲PWA的目的不是嗎？ –

我有點想出了一個方法來做到這一點的FB。使用FB PHP SDK生成登錄URL並在子窗口上打開url，並在整個登錄對話框中輸入&權限，並重定向到我的redirect_url，在那裏我使用window.opener.postMessage將必要的數據傳遞給父窗口。

我REDIRECT_URL頁面設置這樣的：

<?php 
if (! session_id()) { 
session_start(); 
} 

require_once "vendor/autoload.php"; 

$_SESSION['FBRLH_state'] = $_GET['state']; 
$fb = new Facebook\Facebook([ 
'app_id'    => 'FBID', // Replace {app-id} with your app id 
'app_secret'   => 'FBSECRET', 
'default_graph_version' => 'v2.2', 
]); 

$helper = $fb->getRedirectLoginHelper(); 

try { 
$accessToken = $helper->getAccessToken(); 
} catch (Facebook\Exceptions\FacebookResponseException $e) { 
echo 'Graph returned an error: ' . $e->getMessage(); 
exit; 
} catch (Facebook\Exceptions\FacebookSDKException $e) { 
echo 'Facebook SDK returned an error: ' . $e->getMessage(); 
exit; 
} 

if (! isset($accessToken)) { 
if ($helper->getError()) { 
    header('HTTP/1.0 401 Unauthorized'); 
    echo "Error: " . $helper->getError() . "\n"; 
    echo "Error Code: " . $helper->getErrorCode() . "\n"; 
    echo "Error Reason: " . $helper->getErrorReason() . "\n"; 
    echo "Error Description: " . $helper->getErrorDescription() . "\n"; 
} else { 
    header('HTTP/1.0 400 Bad Request'); 
    echo 'Bad request'; 
} 
exit; 
} 

$oAuth2Client = $fb->getOAuth2Client(); 

$tokenMetadata = $oAuth2Client->debugToken($accessToken); 
$tokenMetadata->validateAppId('FBID'); // Replace {app-id} with your app id 
$tokenMetadata->validateExpiration(); 

if (! $accessToken->isLongLived()) { 
try { 
    $accessToken = $oAuth2Client->getLongLivedAccessToken($accessToken); 
} catch (Facebook\Exceptions\FacebookSDKException $e) { 
    echo "<p>Error getting long-lived access token: " . $helper->getMessage() . "</p>\n\n"; 
    exit; 
}} 

$_SESSION['fb_access_token'] = (string)$accessToken; 
$tk = $_SESSION['fb_access_token']; 
?> 

<?= $tk;?> 
<script type="text/javascript"> 
window.opener.postMessage({token: '<?= $tk;?>'}, '*'); 
window.close(); 
</script>

在父窗口中我有使用window.addEventListener("message", receiveMessage, false);聽的postMessage的事件監聽和需要receiveMessage函數處理的所有數據。因此，任何使用獨立模式的Web應用程序都應能夠從子窗口獲取數據。

窗口postmessage可以用來跨越來源之間傳遞數據。有關postMessage的更多詳細信息，請訪問：https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

來源

2017-11-07 05:35:12

當您的應用程序作爲漸進式Web應用程序安裝時，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}

如果用戶成功授予您的應用程序所需的權限，他/她重新回到您的應用程序（該位置由{redirect-url}確定）：

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

然後你的應用程序需要確定登錄是否成功。有兩種方法可以做到這一點：

A）讀取當前URL的查詢字符串（見code=<code>部分 - 這可以用來檢索有關用戶其他信息，也可以發送到後臺服務器）。

B）使用Facebook SDK不檢索如果您已經使用SDK和FB.login(yourCallback)使用FB.getLoginStatus(yourCallback)

登錄狀態，您可以添加到yourCallbackFB.getLoginStatus爲好。您也可以支持彈出流程和重定向流程，具體取決於用戶的設備。

我建議通過我在上面發佈的文檔條目閱讀更多信息和選項。

來源

2018-01-16 16:07:50 nicoqh

Facebook的JS SDK進步的web應用程序的問題

回答

相關問題