How to authenticate with Google via OAuth 2.0 in a popup?

后端未结

关注

 4  1522

梦谈多话

Sorry for a big edit. I am starting over as I am not stating my question correctly.

I am trying to write a client side app in HTML5. I do not want it to be hosted on

相关标签:

4条回答

逝去的感伤

2020-12-04 10:16

You should have some Redirect URL defined for Google to redirect to after the authentication is done. If you cant host your pages on any web site, you can very well host it in local host.

Regarding getting the access token from the popup to the main parent window, you can setup a timer in parent window which keeps on checking the document location of the popup. Once the document location matches the Redirect URL, u can parse the access token which will will be in the URL itself.

I wrote a tutorial on exactly the same problem (using local host) yesterday and here is the link: http://www.gethugames.in/2012/04/authentication-and-authorization-for-google-apis-in-javascript-popup-window-tutorial.html

Hope you will find it useful.

0 讨论(0)
发布评论:

提交评论
- 加载中...
自闭症患者

2020-12-04 10:18

I've written a mini JS library for the task, take it and see if it works for you.

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

I am recently developing another project that rely on the same script, so I am isolating this one into an independent library project ... check the progress follows (if there are).

0 讨论(0)
发布评论:

提交评论
- 加载中...

夕颜

2020-12-04 10:23

I believe you can use google api (gapi) for Oauth in Javascript. Here is the documentation: Authentication using the Google APIs Client Library for JavaScript

You will not require the user to copy/paste any codes and you will not require to provide a redirect uri

All you need to do is: Go to your project in Google Developers Console and generate the following: 1. Generate new Client Id and choose options 'Installed Application' and 'Other'. 2. Generate a Public API Key

Sample Code from the above documentation:

// 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);
    });
  });
}

0 讨论(0)

梦如初夏

2020-12-04 10:28

To avoid a potential click jacking, Google authentication forces you to go to a full page login. I don't think you can control that.

EDIT after comment, here is a code extracted from the Google OAuth2 page that does it:

<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>

0 讨论(0)