앱이 독립 실행형 상태인 경우 PWA 앱에서 Facebook 로그인이 작동하지 않음
저는 PWA 웨비스트를 만들고 있습니다.저는 Angular JS를 사용하고 있고 웹사이트에서 javascript facebook 로그인을 사용했습니다.하지만 브라우저에서 내 앱을 보면 페이스북 로그인이 됩니다.그런데 홈스크린에 바로가기를 추가하고 홈스크린에서 앱을 실행하면 FB 로그인이 되지 않습니다.Facebook 페이지를 로드하고 있습니다.하지만 자격 증명을 입력하면 빈 페이지가 나타납니다.누가 도와줄 수 있습니까?
여기 제 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;
}페이스북 로그인 화면을 열고 자격 증명 입력 후 공백으로 표시됩니다.앱으로 돌아오지 않습니다.
manifest.json 파일에서 display property가 독립 실행형으로 설정되어 있습니다.제발 도와주세요.
페이스북 자바스크립트 플러그인을 사용하지 말고, 자신만의 흐름을 적으세요:
1) fb 로그인 응답(ex: /fb-login-receiver.html)을 받을 정적 html을 만듭니다. 로그인 결과를 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로그인 페이지를 여는 기능을 작성합니다.
다음 타이프스크립트 예제는 액세스 토큰에 대한 약속을 반환하고 사용자가 전자 메일 액세스를 허용했는지 확인합니다.
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 API to login 사용자가 로그인 양식으로 새 탭을 열기 때문에 올바른 동작입니다.Facebook은 OAuth2 솔루션을 구현하고 사용자가 API를 사용하여 인증할 수 있도록 OAuth2 Implicit Flow를 활성화합니다.동일한 창에서 로그인할 경우 인증 코드를 사용해야 하지만 클라이언트 측 응용프로그램의 경우 사용자가 사용할 수 없는 비밀 코드가 필요하므로 보안이 되지 않습니다.
새 탭을 여는 대신 페이스북 로그인 양식으로 iframe을 만들 수 있고 사용자가 로그인하면 닫기 후 리디렉션할 수 있습니다.
언급URL : https://stackoverflow.com/questions/48112300/facebook-login-not-working-in-pwa-app-if-app-is-in-stand-alone-state
'programing' 카테고리의 다른 글
| 하위 쿼리 결과에서 ID 삭제 (0) | 2023.11.02 |
|---|---|
| 클래스가 같은 원소의 개수는 어떻게 셀 수 있습니까? (0) | 2023.11.02 |
| node.js 앱에 대한 코딩 스타일 가이드? (0) | 2023.11.02 |
| 텍스트를 태그로 래핑 (0) | 2023.11.02 |
| 사전 키가 열 레이블인 다중 인덱스 데이터 프레임에 중첩된 사전 (0) | 2023.11.02 |