如果应用程序处于独立状态，则Facebook登录名不能在PWA应用程序中使用 [英] Facebook Login not working in PWA app if app is in stand alone state
问题描述
我正在建立PWA网站.我正在使用Angular JS，并且在我的网站中使用了javascript facebook登录.但是，如果我在浏览器中查看我的应用，则Facebook登录正常.但是，当我向主屏幕添加快捷方式并从主屏幕启动应用程序时，FB登录无法正常工作. Facebook页面正在加载.但是输入凭据后，它将显示空白页.有人可以帮忙吗?
I am building a PWA webiste. I am using Angular JS and I used javascript facebook login in my website. But if I view my app in browser, facebook login is working. But when I add shortcut to homescreen and launch the app from the homescreen, FB login is not working. Facebook page is loading. But after entering credentials it shows blank page. Can anyone help ?
这是我的FB登录代码
var doBrowserLogin = function(){
var deferred = $q.defer();
FB.login(
function(response){
if (response.authResponse) {
deferred.resolve(response);
}else{
deferred.reject(response);
}
},
{scope:'email,public_profile'}
);
return deferred.promise;
}
它正在打开Facebook登录屏幕，输入凭据后，它显示为空白.不回到应用程序. 在我的manifest.json文件中，显示属性设置为独立. 请帮忙.
It is opening the facebook login screen and after entering the credentials, it is showing blank. Not coming back to app. In my manifest.json file, the display property is set to standalone. Please help.
推荐答案
不要使用facebook javascript插件，请编写您自己的流程:
Don't use facebook javascript plugin, write your own flow:
1)创建一个将接收fb登录响应的静态html(例如:/fb-login-receiver.html) 它将使用postMessage将登录结果发送回应用程序.
1) Create a static html that will receive fb login response (ex: /fb-login-receiver.html) It will send back login result to the application with postMessage.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
Facebook login completed.
<script type="text/javascript">
window.opener.postMessage(window.location.toString(), window.location.href);
window.close();
</script>
</body>
</html>
2)在您的应用程序中编写一个函数，该函数将在弹出窗口中打开fb登录页面
2) In your application write a function that will open fb login page in a popup window
此打字稿示例返回对访问令牌的承诺，并检查用户是否允许电子邮件访问:
this typescript example returns a promise for the access token and check if the user has allowed email access:
async loginFacebook(): Promise<string> {
let popup = window.open("https://www.facebook.com/v3.1/dialog/oauth?client_id=**<YOUR_CLIENT_ID>**&display=popup&scope=email&response_type=token,granted_scopes&auth_type=rerequest&redirect_uri=" + window.location.origin + "/fb-login-receiver.html", 'Facebook Login', 'width=500,height=500');
var promise = new Promise<string>((resolve, reject) => {
let finished = false;
let listener = (e: MessageEvent) => {
finished = true;
let url = new URL(e.data);
let hash = url.hash.substring(1);
let splitted = hash.split('&');
let dct: { [key: string]: string } = {};
for (let s of splitted) {
var spltd = s.split('=');
dct[spltd[0]] = spltd[1];
}
if (dct['granted_scopes'].indexOf('email') < 0) {
reject("Email required");
return;
}
resolve(dct['access_token']);
};
addEventListener('message', listener);
let intervalChecker = setInterval(() => {
if (popup.closed) {
clearInterval(intervalChecker);
removeEventListener('message', listener);
if (!finished) {
reject('Login canceled');
}
}
}, 10);
});
return promise;
}
这篇关于如果应用程序处于独立状态，则Facebook登录名不能在PWA应用程序中使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
