Je développe un flux d'authentification OAuth purement en JavaScript et je souhaite montrer à l'utilisateur la fenêtre "Accorder l'accès" dans une fenêtre contextuelle, mais elle est bloquée.

Comment puis-je empêcher les fenêtres pop-up créées par l'un window.openou l' autre ou window.showModalDialogd'être bloquées par les bloqueurs de fenêtres pop-up des différents navigateurs?

La règle générale est que les bloqueurs de popups s'engageront si window.openou similaire est invoqué à partir de javascript qui n'est pas invoqué par une action directe de l'utilisateur . Autrement dit, vous pouvez appeler window.openen réponse à un clic sur un bouton sans être touché par le bloqueur de fenêtres contextuelles, mais si vous mettez le même code dans un événement de minuterie, il sera bloqué. La profondeur de la chaîne d'appels est également un facteur - certains navigateurs plus anciens ne regardent que l'appelant immédiat, les nouveaux navigateurs peuvent revenir un peu en arrière pour voir si l'appelant de l'appelant était un clic de souris, etc.

Sur la base de Jason Sebring est astuce très utile , et sur les choses couvertes ici et là , je trouve une solution parfaite pour mon cas:

Pseudo code avec des extraits de code Javascript:

1. créer immédiatement une fenêtre contextuelle vide sur l'action de l'utilisateur

   var importantStuff = window.open('', '_blank');

   Facultatif: ajoutez un message d'information "en attente". Exemples:

   a) Une page HTML externe: remplacez la ligne ci-dessus par

   var importantStuff = window.open('http://example.com/waiting.html', '_blank');

   b) Texte: ajoutez la ligne suivante sous celle ci-dessus:

   importantStuff.document.write('Loading preview...');

2. le remplir de contenu lorsque vous êtes prêt (lorsque l'appel AJAX est renvoyé, par exemple)

   importantStuff.location.href = 'http://shrib.com';

Enrichissez l'appel à window.open avec toutes les options supplémentaires dont vous avez besoin.

J'utilise en fait cette solution pour une redirection mailto, et cela fonctionne sur tous mes navigateurs (windows 7, Android). le_blank bit permet à la redirection mailto de fonctionner sur mobile, btw.

Ton expérience? Un moyen d'améliorer cela?

De plus Swiss Mister post, dans mon cas, le window.open a été lancé à l'intérieur d'une promesse, ce qui a activé le bloqueur de popup, ma solution était: en angulaire:

$scope.gotClick = function(){

  var myNewTab = browserService.openNewTab();
  someService.getUrl().then(
    function(res){
        browserService.updateTabLocation(res.url, myNewTab);

    }
  );
};

browserService:

this.openNewTab = function(){
     var newTabWindow = $window.open();
     return newTabWindow;
}

this.updateTabLocation = function(tabLocation, tab) {
     if(!tabLocation){
       tab.close();
     }
     tab.location.href = tabLocation;
}

c'est ainsi que vous pouvez ouvrir un nouvel onglet en utilisant la réponse de promesse et sans invoquer le bloqueur de popup.

En tant que bonne pratique, je pense que c'est une bonne idée de tester si une fenêtre contextuelle a été bloquée et de prendre des mesures au cas où. Vous devez savoir que window.open a une valeur de retour et que cette valeur peut être nulle si l'action échoue. Par exemple, dans le code suivant:

function pop(url,w,h) {
    n=window.open(url,'_blank','toolbar=0,location=0,directories=0,status=1,menubar=0,titlebar=0,scrollbars=1,resizable=1,width='+w+',height='+h);
    if(n==null) {
        return true;
    }
    return false;
}

si le popup est bloqué, window.open renverra null. La fonction retournera donc false.

A titre d'exemple, imaginez appeler cette fonction directement depuis n'importe quel lien avec target="_blank": si le popup est ouvert avec succès, le retour falsebloquera l'action du lien, sinon si le popup est bloqué, le retour truelaissera le comportement par défaut (ouvrir une nouvelle fenêtre _blank) et continuer .

<a href="http://whatever.com" target="_blank" onclick='return pop("http://whatever.com",300,200);' >

De cette façon, vous aurez une fenêtre contextuelle si cela fonctionne, et une fenêtre _blank sinon.

Si la fenêtre contextuelle ne s'ouvre pas, vous pouvez:

• ouvrez une fenêtre vide comme dans l'exemple et continuez
• ouvrir une fausse popup (une iframe à l'intérieur de la page)
• informer l'utilisateur ("veuillez autoriser les popups pour ce site")
• ouvrez une fenêtre vide puis informez l'utilisateur etc.

de l'API JavaScript oauth de Google:

http://code.google.com/p/google-api-javascript-client/wiki/Authentication

Voir la zone où il se lit:

Configuration de l'authentification

L'implémentation d'OAuth 2.0 par le client utilise une fenêtre contextuelle pour inviter l'utilisateur à se connecter et à approuver l'application. Le premier appel à gapi.auth.authorize peut déclencher des bloqueurs de popup, car il ouvre indirectement la fenêtre popup. Pour empêcher le bloqueur de popup de se déclencher sur les appels d'authentification, appelez gapi.auth.init (rappel) lorsque le client se charge. Le rappel fourni sera exécuté lorsque la bibliothèque sera prête à effectuer des appels d'authentification.

Je suppose que c'est lié à la vraie réponse ci-dessus dans la façon dont il explique s'il y a une réponse immédiate, il ne déclenchera pas l'alarme contextuelle. Le "gapi.auth.init" fait en sorte que l'API se produise immédiatement.

Application pratique

J'ai créé un microservice d'authentification open source en utilisant le passeport de nœud sur npm et les différents packages de passeport pour chaque fournisseur. J'ai utilisé une approche de redirection standard vers le tiers en lui donnant une URL de redirection vers laquelle revenir. C'était programmatique, donc je pouvais avoir différents endroits vers lesquels rediriger en cas de connexion / inscription et sur des pages particulières.

github.com/sebringj/athu

passeportjs.org

J'ai essayé plusieurs solutions, mais c'est la seule qui a fonctionné pour moi dans tous les navigateurs

let newTab = window.open(); newTab.location.href = url;

Je ne voulais pas créer la nouvelle page à moins que le rappel ne soit retourné avec succès, j'ai donc fait ceci pour simuler le clic de l'utilisateur:

function submitAndRedirect {
  apiCall.then(({ redirect }) => {
      const a = document.createElement('a');
      a.href = redirect;
      a.target = '_blank';
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
  });
}

Le moyen le plus simple de s'en débarrasser est de:

1. N'utilisez pas document.open ().
2. Utilisez plutôt this.document.location.href = location; où location est l'url à charger

Ex:

<script>
function loadUrl(location)
{
this.document.location.href = location;
}</script>

<div onclick="loadUrl('company_page.jsp')">Abc</div>

Cela a très bien fonctionné pour moi. À votre santé