Google sign in button not working

I've got a very basic problem. I'm trying to integrate google sign in to my website from this link: https://developers.google.com/identity/sign-in/web/sign-in

And so I just set up a new html file, with exactly this code

<!doctype html>
<html>
<head>
  <meta name="google-signin-client_id" content="917979196053-718dnj8g6c71jkcim2pvqo17mo0b1819.apps.googleusercontent.com">
</head>
<body>
  <div id="my-signin2"></div>
  <script>
    function onSuccess(googleUser) {
      console.log('Logged in as: ' + googleUser.getBasicProfile().getName());
    }
    function onFailure(error) {
      console.log(error);
    }
    function renderButton() {
      gapi.signin2.render('my-signin2', {
        'scope': 'profile email',
        'width': 240,
        'height': 50,
        'longtitle': true,
        'theme': 'dark',
        'onsuccess': onSuccess,
        'onfailure': onFailure
      });
    }
  </script>

  <script src="https://apis.google.com/js/platform.js?onload=renderButton" async defer></script>
</body>
</html>

The code is from here: https://developers.google.com/identity/sign-in/web/build-button

Now the issue is, its simply not working. NOTHING is showing up on the screen, and I have no clue why. On the other hand, when I try it here https://jsfiddle.net/wbzax22e/ it somehow works.

This is really absurd. Could someone please help me out here?

Thanks!

Solution

You have to run this code on a web server. You can't just access the file locally or else the code will error out because of a cookie policy. If you want a local dev server look into something like XAMPP or find a free host online.