Как выполнить аутентификацию с помощью Google через OAuth 2.0 во всплывающем окне?

Извините за большое редактирование. Я начинаю с того, что правильно не задаю вопрос.

Я пытаюсь написать клиентское приложение в HTML5. Я не хочу, чтобы он размещался на веб-сайте. Я даже не уверен, что это возможно, я довольно новичок в этом типе приложений.

В любом случае, я хочу получить доступ к сервисам Google, для чего требуется аутентификация, такая как OAuth. Будучи тем, что это javascript, похоже, что OAuth2 - это то, что мне нужно.

Я пытаюсь открыть проверку подлинности Google во всплывающем окне (у меня есть эта часть), разрешить пользователю разрешать доступ, а затем передавать поток обратно в мое приложение, которое затем может запрашивать сервисы Google. Проблема заключается в том, что 1. он просит пользователя скопировать/вставить токен в приложение, когда я использую response_type=code, но если я использую response_type=token, он требует перенаправления обратно на действительный URL, который, поскольку он не размещен на веб-сервер, его нет.

Итак, как я могу использовать OAuth и позволить пользователю беспрепятственно предоставлять доступ?

Ответ 1

У вас должен быть URL-адрес перенаправления, определенный для перенаправления Google после завершения проверки подлинности. Если вы не можете размещать свои страницы на любом веб-сайте, вы можете очень хорошо разместить его на локальном хосте.

Что касается получения токена доступа из всплывающего окна в основное родительское окно, вы можете настроить таймер в родительском окне, который продолжает проверять местоположение документа всплывающего окна. Когда местоположение документа совпадает с URL-адресом переадресации, вы можете проанализировать токен доступа, который будет находиться в самом URL-адресе.

Я написал учебное пособие по той же самой проблеме (используя локальный хост) вчера, и вот ссылка: http://www.gethugames.in/2012/04/authentication-and-authorization-for-google-apis-in-javascript-popup-window-tutorial.html

Надеюсь, вы сочтете это полезным.

Ответ 2

Чтобы избежать потенциального clicking, аутентификация Google заставит вас перейти на полноэкранный вход. Я не думаю, что вы можете это контролировать.

EDIT после комментария, вот код, извлеченный из страницы Google OAuth2, который делает это:

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

Ответ 3

Я считаю, что вы можете использовать google api (gapi) для Oauth в Javascript. Вот документация: Аутентификация с использованием клиентской библиотеки API Google для JavaScript

Вы не будете требовать от пользователя копирования/вставки каких-либо кодов, и вам не потребуется предоставлять перенаправление uri

Все, что вам нужно сделать, это перейти к вашему проекту в Google Developers Console и создать следующее: 1. Создайте новый идентификатор клиента и выберите "Установленное приложение" и "Другое". 2. Создать открытый ключ API.

Пример кода из приведенной выше документации:

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

Ответ 4

Я написал мини-JS-библиотеку для этой задачи, возьму ее и посмотрю, работает ли она для вас.

https://github.com/timdream/wordcloud/blob/master/go2.js

Недавно я разрабатываю еще один проект, который полагается на тот же script, поэтому я изолирую его в проекте независимой библиотеки. проверьте ход выполнения (если есть).