Вход в Google с использованием API Javascript без вызова всплывающего окна

Question

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

HTML

<a id="gp_login" href="javascript:void(0)" onclick="javascript:googleAuth()">Login using Google</a>

Javascript

function gPOnLoad(){
     // G+ api loaded
     document.getElementById('gp_login').style.display = 'block';
}
function googleAuth() {
    gapi.auth.signIn({
        callback: gPSignInCallback,
        clientid: googleKey,
        cookiepolicy: "single_host_origin",
        requestvisibleactions: "http://schema.org/AddAction",
        scope: "https://www.googleapis.com/auth/plus.login email"
    })
}

function gPSignInCallback(e) {
    if (e["status"]["signed_in"]) {
        gapi.client.load("plus", "v1", function() {
            if (e["access_token"]) {
                getProfile()
            } else if (e["error"]) {
                console.log("There was an error: " + e["error"])
            }
        })
    } else {
        console.log("Sign-in state: " + e["error"])
    }
}

function getProfile() {
    var e = gapi.client.plus.people.get({
        userId: "me"
    });
    e.execute(function(e) {
        if (e.error) {
            console.log(e.message);
            return
        } else if (e.id) {
            // save profile data
        }
    })
}(function() {
    var e = document.createElement("script");
    e.type = "text/javascript";
    e.async = true;
    e.src = "https://apis.google.com/js/client:platform.js?onload=gPOnLoad";
    var t = document.getElementsByTagName("script")[0];
    t.parentNode.insertBefore(e, t)
})()

Этот код работает нормально. Я хочу использовать приведенный выше код (используя Javascript), чтобы войти в систему пользователя из его учетной записи Google, не вызывая всплывающее окно. Например, пользователь щелкает ссылку для входа в систему, запрашивает разрешения приложения в том же окне / вкладке, пользователь предоставляет разрешение, пользователь перенаправляется обратно на страницу, где была ссылка для входа в Google, данные профиля сохраняются и пользователь входит в систему.

Answer 1

Такая функциональность не предоставляется через Google API. Вы должны придерживаться gapi.auth.signIn. Я знаю только один способ заставить его работать, но он очень хакерский.

gapi.auth.signIn открывает окно аутентификации. Сохраните URL окна аутентификации в вашем приложении ¹. Вместо вызова gapi.auth.signIn перенаправьте пользователя на этот URL-адрес.

Чтобы перенаправить успешную аутентификацию обратно на ваш сайт, добавьте / измените параметр redirect_url в URL ². Имейте в виду, что redirect_uri должен быть зарегистрирован в консоли разработчика.

Пример: https://accounts.google.com/o/oauth2/auth?client_id=1234567890.apps.googleusercontent.com&scope=https%3A%2F%2Fwww.googleapis.com%2Fauth%2Fplus.login&immediate=false&response_type=token & red = http://example.com/

Таким образом, Google перенаправит пользователя обратно на ваш сайт. access_token предоставляется через GET params.

¹ Если Google меняет свой API, это может сломаться (поскольку этот метод обходит JS API и предполагает, что все эти параметры в URL будут поддерживаться всегда).

² Redirect_url введен в документацию потока автономного доступа. Я не думаю, что этот параметр предназначен для работы в любых других случаях.

Я настоятельно советую не использовать эту идею (поскольку она обходит JS API и использует недокументированную функциональность). Палка с gapi.auth.signIn.

Answer 2

Вы можете использовать параметр ux_mode (опции 'redirect' или 'popup') и установить redirect_uri, если вы хотите перенаправить на другую страницу.

Также необходимо авторизовать URL для клиента OAuth на странице вашего проекта Google.

  function initClient() {
    gapi.client.init({
      apiKey: API_KEY,
      clientId: CLIENT_ID,
      discoveryDocs: DISCOVERY_DOCS,
      scope: SCOPES,
      ux_mode: 'redirect',
      //redirect_uri: custom url to redirect'
    }).then(function () {
      // Listen for sign-in state changes.
      gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

      // Handle the initial sign-in state.
      updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
      authorizeButton.onclick = handleAuthClick;
      signoutButton.onclick = handleSignoutClick;
    });
  }