如何通过Google身份工具包修改登录按钮？（Node.js）

Question

Having a lot of issues trying to modify the sign-in button to have the standard google sign-in button. 尝试将登录按钮修改为标准的Google登录按钮时遇到很多问题。 I looked at the documentation ( https://developers.google.com/identity/toolkit/web/setup-frontend#customizing_the_ui ) but still don't quite understand it. 我查看了文档（ https://developers.google.com/identity/toolkit/web/setup-frontend#customizing_the_ui ），但仍然不太了解。

The below code just shows me the img of google button(doesn't work) and another sign-in button (works). 以下代码仅向我显示了Google按钮（无效）和另一个登录按钮（有效）的img。 How do I properly modify the script so the google button is the one being used for sign-in? 如何正确修改脚本，以便Google按钮是用于登录的按钮？

<!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <!-- Copy and paste here the Client configuration from Developer Console into the config variable -->

    <!-- goole toolkit API (pete) -->
      <script type="text/javascript" src="//www.gstatic.com/authtoolkit/js/gitkit.js"></script>
      <link type="text/css" rel="stylesheet" href="//www.gstatic.com/authtoolkit/css/gitkit.css" />
      <script type="text/javascript">
        var config =
          {
            // change gitkit to whatever page needs it (i.e.- index)
            widgetUrl: "http://localhost:8000/widget.html",
            signInSuccessUrl: "/dashboard",
            signOutUrl: "/",
            oobActionUrl: "/sendemail",
            apiKey: "random-random",
            siteName: "CodingDojo On Tap",
            signInOptions: ["password","google"],
            accountChooserEnabled: true,
            displayMode: "providerFirst"
          };

        window.google.identitytoolkit.signInButton(
            '#signIn', // accepts any CSS selector
            {
              widgetUrl: "https://localhost:8000/widget.html",
              signOutUrl: "/",
              signInSuccessUrl: "/dashboard",
              signInOptions: ["password","google"]
              // Optional - Begin the sign-in flow in a popup window
              //popupMode: true,

              // Optional - Cookie name (default: gtoken)
              //            NOTE: Also needs to be added to config of ‘widget
              //                  page’. See below
              //cookieName: ‘example_cookie’,
            }
          );

        // The HTTP POST body should be escaped by the server to prevent XSS
        window.google.identitytoolkit.start(
            '#gitkitWidgetDiv', // accepts any CSS selector
            config,
            decodeURIComponent('%%postBody%%'));
      </script><!-- END google toolkit -->

      <script>
        // This is called with the results from from FB.getLoginStatus().
      function statusChangeCallback(response) {
        console.log('statusChangeCallback');
        console.log(response);
        // The response object is returned with a status field that lets the
        // app know the current login status of the person.
        // Full docs on the response object can be found in the documentation
        // for FB.getLoginStatus().
        if (response.status === 'connected') {
          // Logged into your app and Facebook.
          testAPI();
        } else if (response.status === 'not_authorized') {
          // The person is logged into Facebook, but not your app.
          document.getElementById('status').innerHTML = 'Please log ' +
            'into this app.';
        } else {
          // The person is not logged into Facebook, so we're not sure if
          // they are logged into this app or not.
          document.getElementById('status').innerHTML = 'Please log ' +
            'into Facebook.';
        }
      }

      // This function is called when someone finishes with the Login
      // Button.  See the onlogin handler attached to it in the sample
      // code below.
      function checkLoginState() {
        FB.getLoginStatus(function(response) {
          statusChangeCallback(response);
        });
      }

      window.fbAsyncInit = function() {
      FB.init({
        appId      : 'random',
        // cookie     : true,  // enable cookies to allow the server to access 
                            // the session
        xfbml      : true,  // parse social plugins on this page
        version    : 'v2.6' // use graph api version 2.5
      });

      // Now that we've initialized the JavaScript SDK, we call 
      // FB.getLoginStatus().  This function gets the state of the
      // person visiting this page and can return one of three states to
      // the callback you provide.  They can be:
      //
      // 1. Logged into your app ('connected')
      // 2. Logged into Facebook, but not your app ('not_authorized')
      // 3. Not logged into Facebook and can't tell if they are logged into
      //    your app or not.
      //
      // These three cases are handled in the callback function.

      FB.getLoginStatus(function(response) {
        statusChangeCallback(response);
      });

      };

      // Load the SDK asynchronously
      (function(d, s, id) {
        var js, fjs = d.getElementsByTagName(s)[0];
        if (d.getElementById(id)) return;
        js = d.createElement(s); js.id = id;
        js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6&appId=random";
        fjs.parentNode.insertBefore(js, fjs);
      }(document, 'script', 'facebook-jssdk'));

      // Here we run a very simple test of the Graph API after login is
      // successful.  See statusChangeCallback() for when this call is made.
      // function testAPI() {
      //   console.log('Welcome!  Fetching your information.... ');
      //   FB.api('/me', function(response) {
      //     console.log('Successful login for: ' + response.name);
      //     document.getElementById('status').innerHTML =
      //       'Thanks for logging in, ' + response.name + '!';
      //   });
      // }
      </script>

    </head>
    <body ng-app="alumniApp">
    <!-- FB like and share buttons -->
    <!-- <div
      class="fb-like"
      data-share="true"
      data-width="450"
      data-show-faces="true">
    </div> -->
    <!-- END fb like and share button -->

    <!-- facebook.id login -->

    <!-- END FB -->

    <!-- FB sign-in button -->
      <div class="fb-login-button" data-max-rows="1" data-size="xlarge" data-show-faces="false" data-auto-logout-link="false"></div>
    <!-- END fb sign-in button --> 

      <!-- Include the sign in page widget with the matching 'gitkitWidgetDiv' id -->
      <div id="gitkitWidgetDiv">
        <div id="fb-root"></div>
            <!-- google+ sign-in -->
             <div id="signIn"><img src="/static/images/google_btn.png" style="display:block;height:auto;width:auto;margin:auto" /></div>
    <!--         <p style="font-size:14px;opacity:.54;margin-top:20px;text-align:center">
            </p> -->
          </div>
      </div>
      <!-- End identity toolkit widget -->

      <hr/>

        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
        <script>window.jQuery || document.write('<script src="../../assets/js/vendor/jquery.min.js"><\/script>')</script>
        <script src="/static/js/bootstrap.min.js"></script>
        <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
        <script src="/static/js/ie10-viewport-bug-workaround.js"></script>
    </body>
    </html>

Answer 1

What you are doing will only render the sign in button which when clicked will launch the identity toolkit for sign in process. 您所做的只是渲染登录按钮，单击该按钮将启动身份工具包进行登录过程。

window.google.identitytoolkit.signInButton

signInOptions: ["password","google"] is used only for the sign in widget: signInOptions：[“ password”，“ google”]仅用于登录小部件：

window.google.identitytoolkit.start

That will show the buttons as configured in sign in options. 这将显示登录选项中配置的按钮。

If you wish to modify the original sign in button, you can use css to do so or you can set up your own button and run the following on click: 如果您希望修改原始的登录按钮，则可以使用css进行修改，或者可以设置自己的按钮并在单击时运行以下命令：

window.google.identitytoolkit.signIn()

如何通过Google身份工具包修改登录按钮？（Node.js）

问题描述

1 个解决方案

解决方案1
1 已采纳 2016-04-26 03:21:08

如何通过Google身份工具包修改登录按钮？ （Node.js）

问题描述

1 个解决方案

解决方案1 1 已采纳 2016-04-26 03:21:08

如何通过Google身份工具包修改登录按钮？（Node.js）

解决方案1
1 已采纳 2016-04-26 03:21:08