Frage Google-Anmeldung mit JavaScript-API ohne Auslösen eines Popups


Ich verwende folgenden Code, damit sich Nutzer über ihr JavaScript-API mit ihrem Google-Konto anmelden können.

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)
})()

Dieser Code funktioniert einwandfrei. Ich möchte den oben genannten Code verwenden (mit Javascript), um Benutzer von ihrem Google-Konto anzumelden ohne ein Popup-Fenster auszulösen. Der Nutzer klickt zum Beispiel auf den Login-Link, fragt im gleichen Fenster / Tab nach App-Berechtigungen, der Nutzer gewährt die Erlaubnis, der Nutzer wird auf die Seite weitergeleitet, auf der sich der Google-Login-Link befindet, Profildaten werden gespeichert und der Nutzer ist eingeloggt.


8
2018-01-12 15:49


Ursprung


Antworten:


Diese Funktionalität wird nicht über Google API bereitgestellt. Du solltest bei gapi.auth.signIn bleiben. Ich weiß nur einen Weg, um es zum Laufen zu bringen, aber es ist sehr hacky.

gapi.auth.signIn öffnet das Authentifizierungsfenster. Speichern Sie die Authentifizierungsfenster-URL in Ihrer App1. Rufen Sie statt gapi.auth.signIn den Benutzer auf diese URL um.

Um die erfolgreiche Authentifizierung auf Ihre Website umzuleiten, fügen Sie in der URL redirect_url param hinzu2. Denken Sie daran, dass redirect_uri in der Entwicklerkonsole registriert sein muss.

Beispiel: 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& redirect_uri =http://example.com

Auf diese Weise leitet Google den Nutzer zurück auf Ihre Website. access_token wird über GET-Parameter bereitgestellt.

1Wenn Google seine API ändert, kann dies brechen (da diese Methode JS API umgeht und davon ausgeht, dass alle diese Parameter in der URL für immer unterstützt werden).

2Redirect_url wird in eingeführt Offline-Zugriffsflussdokumentation. Ich denke nicht, dass dieser Parameter in anderen Fällen funktionieren sollte.

Ich rate dringend, diese Idee nicht zu verwenden (da JS API umgangen wird und nicht dokumentierte Funktionalität verwendet wird). Bleiben Sie bei gapi.auth.signIn.


5
2018-01-13 21:12



Du kannst es benutzen ux_mode Parameter (Optionen sind 'umleiten' oder 'Pop-up') und setze a redirect_uri wenn Sie auf eine andere Seite umleiten möchten.

Außerdem müssen Sie die URL für den OAuth-Client auf Ihrer Google-Projektseite autorisieren.

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

6
2017-12-07 19:24