web-dev-qa-db-fra.com

La connexion Facebook ne fonctionne pas dans l'application PWA si celle-ci est autonome

Je construis un site Web PWA. J'utilise Angular JS et j'ai utilisé la connexion javascript à Facebook sur mon site Web. Mais si je visualise mon application dans un navigateur, la connexion à Facebook fonctionne. Mais lorsque j'ajoute un raccourci à l'écran d'accueil et lance l'application à partir de l'écran d'accueil, la connexion au FB ne fonctionne pas. La page Facebook est en cours de chargement. Mais après avoir entré les informations d'identification, la page est vierge. Quelqu'un peut-il aider?

Voici mon code de connexion 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;
}

Il ouvre l'écran de connexion facebook et après avoir saisi les informations d'identification, il affiche vide. Ne pas revenir à l'application .  Blank page Dans mon fichier manifest.json, la propriété display est définie sur standalone . Please help.

angularjsfacebook-loginprogressive-web-apps
15
SANGEETH KUMAR S G

Ce comportement est correct car l'API Facebook permettant de se connecter ouvre un nouvel onglet avec un formulaire de connexion. Facebook implémente la solution OAuth2 et pour authentifier l'utilisateur à l'aide de son API, activer le flux implicite OAuth2. Pour vous connecter dans la même fenêtre, vous devez utiliser un code d'autorisation, mais pour les applications côté client non sécurisées, vous aurez besoin d'un code secret non disponible pour les utilisateurs.

Au lieu d'ouvrir un nouvel onglet, vous pouvez créer un iframe avec un formulaire de connexion facebook. Lorsque l'utilisateur est connecté, fermez-le et redirigez-le.

2
kklimczak

N'utilisez pas le plugin facebook javascript, écrivez votre propre flux:

1) Créez un code HTML statique qui recevra la réponse de connexion fb (ex: /fb-login-receiver.html ) Il renverra le résultat de la connexion à l’application avec 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) Dans votre application, écrivez une fonction qui ouvrira la page de connexion fb dans une fenêtre contextuelle.

cet exemple TypeScript renvoie une promesse pour le jeton d'accès et vérifie si l'utilisateur a autorisé l'accès par courrier électronique:

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;
}
1
Guilherme Meinlschmiedt Abdo