Using Oauth2 to sign-in users with Google using Google Java Script Library

Leave a reply

Example project here:  Sign-in with Google using Google Java Script library

 

  • Main project
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<head>
<style>
#signIn {
width: 80%;
height: 50%;
display: none;
}
span {
border: 1px solid silver;
padding: 10px;
cursor: pointer;
font-size: 10px;
}
</style>
<script>
function userLoggedIn(userObject) {
document.getElementById('signIn').style.display = 'none';
document.getElementById('head').innerHTML = `Wellcome ${userObject.given_name} ${userObject.family_name} ! <hr/>email: ${userObject.email} `;
}
function showLogInPopup() {
document.getElementById('signIn').style.display = 'block';
}
</script>
</head>
<body>
<h1 id="head">Integrating Google Sign-in for Websites with Google library. <span onclick="showLogInPopup()">Log In</span></h1>
<iframe id="signIn" src="google-sign-in.html"></iframe>
</body>
<head> <style> #signIn { width: 80%; height: 50%; display: none; } span { border: 1px solid silver; padding: 10px; cursor: pointer; font-size: 10px; } </style> <script> function userLoggedIn(userObject) { document.getElementById('signIn').style.display = 'none'; document.getElementById('head').innerHTML = `Wellcome ${userObject.given_name} ${userObject.family_name} ! <hr/>email: ${userObject.email} `; } function showLogInPopup() { document.getElementById('signIn').style.display = 'block'; } </script> </head> <body> <h1 id="head">Integrating Google Sign-in for Websites with Google library. <span onclick="showLogInPopup()">Log In</span></h1> <iframe id="signIn" src="google-sign-in.html"></iframe> </body>
<head>
  <style>
    #signIn {
      width: 80%;
      height: 50%;
      display: none;
    }

    span {
      border: 1px solid silver;
      padding: 10px;
      cursor: pointer;
      font-size: 10px;
    }
  </style>
  <script>
    function userLoggedIn(userObject) {
      document.getElementById('signIn').style.display = 'none';
      document.getElementById('head').innerHTML = `Wellcome ${userObject.given_name} ${userObject.family_name} ! <hr/>email: ${userObject.email} `;
    }

    function showLogInPopup() {
      document.getElementById('signIn').style.display = 'block';
    }
  </script>  
</head>

<body>
  <h1 id="head">Integrating Google Sign-in for Websites with Google library. <span onclick="showLogInPopup()">Log In</span></h1>

  <iframe id="signIn" src="google-sign-in.html"></iframe>
</body>
  • create iFrame with the log in button
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<head>
<script src="https://accounts.google.com/gsi/client" async defer></script>
<script>
function userLoggedIn(credential) {
document.getElementById('log-in-iframe').style.display = 'none';
alert(credential);
}
</script>
</head>
<body>
Log in with Google
<div id="log-in-button">
<div id="g_id_onload"
data-client_id="989056576533-mtef8cl5is5ogjh3np580ireurns7l5k.apps.googleusercontent.com"
data-context="signin"
data-response-type="code"
data-ux_mode="popup"
data-login_uri="https://www.toni-develops.com/external-files/examples/oauth-with-google-with-popup/callback.php"
data-itp_support="true"
data-auto_prompt="false">
</div>
<div class="g_id_signin"
data-type="standard"
data-shape="rectangular"
data-theme="filled_blue"
data-text="signin_with"
data-size="large"
data-logo_alignment="left">
</div>
</div>
</body>
<head> <script src="https://accounts.google.com/gsi/client" async defer></script> <script> function userLoggedIn(credential) { document.getElementById('log-in-iframe').style.display = 'none'; alert(credential); } </script> </head> <body> Log in with Google <div id="log-in-button"> <div id="g_id_onload" data-client_id="989056576533-mtef8cl5is5ogjh3np580ireurns7l5k.apps.googleusercontent.com" data-context="signin" data-response-type="code" data-ux_mode="popup" data-login_uri="https://www.toni-develops.com/external-files/examples/oauth-with-google-with-popup/callback.php" data-itp_support="true" data-auto_prompt="false"> </div> <div class="g_id_signin" data-type="standard" data-shape="rectangular" data-theme="filled_blue" data-text="signin_with" data-size="large" data-logo_alignment="left"> </div> </div> </body>
<head>
    <script src="https://accounts.google.com/gsi/client" async defer></script>
    <script>
        function userLoggedIn(credential) {
            document.getElementById('log-in-iframe').style.display = 'none';
            alert(credential);
        }
    </script>
</head>

<body>
    Log in with Google
    <div id="log-in-button">
        <div id="g_id_onload"
            data-client_id="989056576533-mtef8cl5is5ogjh3np580ireurns7l5k.apps.googleusercontent.com"
            data-context="signin"
            data-response-type="code"
            data-ux_mode="popup"
            data-login_uri="https://www.toni-develops.com/external-files/examples/oauth-with-google-with-popup/callback.php"
            data-itp_support="true"
            data-auto_prompt="false">
        </div>

        <div class="g_id_signin"
            data-type="standard"
            data-shape="rectangular"
            data-theme="filled_blue"
            data-text="signin_with"
            data-size="large"
            data-logo_alignment="left">
        </div>   
    </div>
</body>
  • create callback
Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
<html>
<head>
</head>
<body>
<pre>
<?php
$token = $_POST['credential'];
$userObject = json_decode(base64_decode(str_replace('_', '/', str_replace('-','+',explode('.', $token)[1]))));
print_r($userObject);
?>
</pre>
<script>
var userObject = {
given_name : "<?php echo $userObject->given_name ?>",
family_name : "<?php echo $userObject->family_name ?>",
email : "<?php echo $userObject->email ?>"
}
function passUserObjectToParentDocument(userObject) {
parent.userLoggedIn(userObject);
}
</script>
<button onclick="passUserObjectToParentDocument(userObject)">continue</button>
</body>
</html>
<html> <head> </head> <body> <pre> <?php $token = $_POST['credential']; $userObject = json_decode(base64_decode(str_replace('_', '/', str_replace('-','+',explode('.', $token)[1])))); print_r($userObject); ?> </pre> <script> var userObject = { given_name : "<?php echo $userObject->given_name ?>", family_name : "<?php echo $userObject->family_name ?>", email : "<?php echo $userObject->email ?>" } function passUserObjectToParentDocument(userObject) { parent.userLoggedIn(userObject); } </script> <button onclick="passUserObjectToParentDocument(userObject)">continue</button> </body> </html>
<html>
<head>
</head>

<body>
  <pre>
  <?php
    $token = $_POST['credential'];
    $userObject = json_decode(base64_decode(str_replace('_', '/', str_replace('-','+',explode('.', $token)[1]))));
    print_r($userObject);
  ?>  
  </pre>
  <script>
  var userObject = {
    given_name : "<?php echo $userObject->given_name ?>",
    family_name : "<?php echo $userObject->family_name ?>",
    email : "<?php echo $userObject->email ?>"
  }

  function passUserObjectToParentDocument(userObject) {
    parent.userLoggedIn(userObject);
  }
  </script>
  <button onclick="passUserObjectToParentDocument(userObject)">continue</button>
</body>
</html>

 

Example project here:  Sign-in with Google using Google Java Script library

Leave a Reply