angularjs - 앱이 독립형 상태 인 경우 PWA 앱에서 Facebook 로그인이 작동하지 않음




facebook-login progressive-web-apps (2)

facebook 자바 스크립트 플러그인을 사용하지 말고 직접 작성하십시오.

1) fb 로그인 응답 (예 : /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;
}

PWA 웹 사이트를 구축 중입니다. Angular JS를 사용하고 있으며 내 웹 사이트에서 자바 스크립트 페이스 북 로그인을 사용했습니다. 하지만 브라우저에서 내 앱을 볼 경우 페이스 북 로그인이 작동합니다. 그러나 홈 화면에 바로 가기를 추가하고 홈 화면에서 앱을 시작하면 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;
}

Facebook 로그인 화면이 열리고 자격증 명을 입력하면 공백으로 표시됩니다. 앱으로 돌아 가지 않습니다. 내 manifest.json 파일에서 display 속성은 독립형으로 설정됩니다. 도와주세요.


이것은 Facebook API가 로그인 사용자로 로그인 양식을 사용하여 새 탭을 열었 기 때문에 올바른 동작입니다. Facebook은 OAuth2 솔루션을 구현하고 API를 사용하여 사용자를 인증하기 위해 OAuth2 Implicit Flow를 활성화합니다. 동일한 창에서 로그인하려면 인증 코드를 사용해야하지만 사용자가 사용할 수없는 비밀 코드가 필요하기 때문에 클라이언트 측 응용 프로그램은 안전하지 않습니다.

새 탭을 열지 않고 페이스 북 로그인 양식으로 iframe을 만들 수 있으며 사용자가 로그인하여 리디렉션 할 수 있습니다.





progressive-web-apps