web-dev-qa-db-ja.com

ポップアップをトリガーせずにJavascriptAPIを使用してGoogleサインイン

ユーザーがJavascriptAPIを介してGoogleアカウントを使用してログインできるように、次のコードを使用しています。

[〜＃〜] 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ログインリンクがあったページにリダイレクトされ、プロファイルデータが保存され、ユーザーがログインします。

javascriptjquerygoogle-apigoogle-plusgoogle-oauth
9
terriblecoder45

このような機能はGoogleAPIでは提供されません。あなたはgapi.auth.signInに固執する必要があります。私はそれを機能させる方法を1つだけ知っていますが、それは非常にハッキーです。

gapi.auth.signInは認証ウィンドウを開きます。アプリに認証ウィンドウのURLを保存します1。 gapi.auth.signInを呼び出す代わりに、ユーザーをそのURLにリダイレクトします。

成功した認証をWebサイトにリダイレクトするには、URLにredirect_urlパラメーターを追加/変更します。2。 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＆redirect_uri = http://example.com

このようにして、グーグルはユーザーをあなたのウェブサイトにリダイレクトします。 access_tokenは、GETパラメーターを介して提供されます。

1GoogleがAPIを変更すると、これが機能しなくなる可能性があります（このメソッドは、JS APIをバイパスし、URL内のすべてのパラメーターが永久にサポートされると想定しているため）。

2Redirect_urlは オフラインアクセスフローのドキュメント で導入されています。このパラメータは他の場合に機能することを意図したものではないと思います。

このアイデアは使用しないことを強くお勧めします（JS APIをバイパスし、文書化されていない機能を使用するため）。 gapi.auth.signInに固執します。

5
Jarosław Gomułka

x_modeパラメータを使用できます（オプションは 'リダイレクト'または 'ポップアップ'です）別のページにリダイレクトする場合は、redirect_uriを設定します。

また、GoogleプロジェクトページでOAuthクライアントのURLを承認する必要があります。

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