web-dev-qa-db-fra.com

Comment s'authentifier auprès de Google via OAuth 2.0 dans une popup?

Désolé pour un gros montage. Je recommence car je ne pose pas ma question correctement.

J'essaie d'écrire une application côté client en HTML5. Je ne veux pas qu'il soit hébergé sur un site Web. Je ne suis même pas sûr que cela soit possible, je suis relativement nouveau dans ce type d'application.

Quoi qu'il en soit, je souhaite accéder aux services Google, qui nécessitent une authentification telle que OAuth. Étant donné que c'est du javascript, il semble que OAuth2 soit ce dont j'ai besoin.

J'essaie d'ouvrir l'authentification Google dans une fenêtre contextuelle (j'ai cette partie), de laisser l'utilisateur autoriser l'accès, puis de renvoyer le flux à mon application qui peut ensuite interroger les services Google. Le problème est soit 1. il demande à l'utilisateur de copier/coller un jeton dans l'application chaque fois que j'utilise response_type=code, mais si j'utilise response_type=token il faut que je redirige vers une URL valide qui, comme elle n'est pas hébergée sur un serveur web, il n'y en a pas.

Alors, comment puis-je utiliser OAuth et laisser l'utilisateur accorder l'accès en toute transparence?

javascriptoauth
39
esac

Vous devez définir une URL de redirection pour que Google redirige vers une fois l'authentification terminée. Si vous ne pouvez pas héberger vos pages sur un site Web, vous pouvez très bien l'héberger dans un hôte local.

En ce qui concerne l'obtention du jeton d'accès de la fenêtre contextuelle à la fenêtre parent principale, vous pouvez configurer un minuteur dans la fenêtre parent qui continue de vérifier l'emplacement du document de la fenêtre contextuelle. Une fois que l'emplacement du document correspond à l'URL de redirection, vous pouvez analyser le jeton d'accès qui se trouvera dans l'URL elle-même.

J'ai écrit un tutoriel sur exactement le même problème (en utilisant l'hôte local) hier et voici le lien: http://www.gethugames.in/2012/04/authentication-and-authorization-for-google-apis -in-javascript-popup-window-tutorial.html

J'espère que vous le trouverez utile.

58
saiy2k

Pour éviter un potentiel cliquez sur jacking , l'authentification Google vous oblige à vous connecter à une page complète. Je ne pense pas que vous puissiez contrôler cela.

[~ # ~] éditez [~ # ~] après commentaire, voici un code extrait de la page Google OAuth2 qui le fait:

<body>
    <a href="javascript:poptastic('https://accounts.google.com/o/oauth2/auth?scope=https://www.google.com/m8/feeds&client_id=21302922996.apps.googleusercontent.com&redirect_uri=https://www.example.com/back&response_type=token');">Try
    out that example URL now</a>
<script>
    function poptastic(url) {
      var newWindow = window.open(url, 'name', 'height=600,width=450');
      if (window.focus) {
        newWindow.focus();
      }
    }

</script>
</body>
12
Mic

Je pense que vous pouvez utiliser google api (gapi) pour Oauth en Javascript. Voici la documentation: Authentification à l'aide de la bibliothèque cliente des API Google pour JavaScript

Vous ne demanderez pas à l'utilisateur de copier/coller des codes et vous n'aurez pas besoin de fournir un uri de redirection

Tout ce que vous devez faire est: Accédez à votre projet dans Google Developers Console et générez ce qui suit: 1. Générez un nouvel ID client et choisissez les options 'Application installée' et 'Autre'. 2. Générez une clé API publique

Exemple de code de la documentation ci-dessus:

// Set the required information
var clientId = 'YOUR CLIENT ID';
var apiKey = 'YOUR API KEY';
var scopes = 'https://www.googleapis.com/auth/plus.me';

// call the checkAuth method to begin authorization
function handleClientLoad() {
  gapi.client.setApiKey(apiKey); // api key goes here
  window.setTimeout(checkAuth,1);
}

// checkAuth calls the gapi authorize method with required parameters
function checkAuth() {
  gapi.auth.authorize({client_id: clientId, scope: scopes, immediate: true}, handleAuthResult); // scope and client id go here
}

// check that there is no error and makeApi call
function handleAuthResult(authResult) {
  var authorizeButton = document.getElementById('authorize-button');
  if (authResult && !authResult.error) {
    makeApiCall();
  }
}

// API call can be made like this:
function makeApiCall() {
  gapi.client.load('plus', 'v1', function() {
    var request = gapi.client.plus.people.get({
      'userId': 'me'
    });
    request.execute(function(resp) {
      var heading = document.createElement('h4');
      var image = document.createElement('img');
      image.src = resp.image.url;
      heading.appendChild(image);
      heading.appendChild(document.createTextNode(resp.displayName));

      document.getElementById('content').appendChild(heading);
    });
  });
}
3
mlfan

J'ai écrit une mini bibliothèque JS pour la tâche, prenez-la et voyez si cela fonctionne pour vous.

https://github.com/timdream/wordcloud/blob/6d483cd91378e35b54e54efbc6f46ad2dd634113/go2.js

Je développe récemment un autre projet qui s'appuie sur le même script, donc j'isole celui-ci dans n projet de bibliothèque indépendant ... vérifiez la progression qui suit (s'il y en a).

2
timdream