You might have heard about members only contents which is a great idea to monetize your website. But this post is not about having members or monetizing your contents. It is simply showing your contents only to Google sign-in users, perhaps a great way to provide your readers with some extra value or increase your reputation? Whatever... If you like this idea, please read on...

Although you can certainly give away access without the hurdle, some site owners like me find that it is a bit risky to allow feature access to everyone such as my support post form. Well, if you are interested, let's get into implementing it on your website.

What we'll do:

• Create the Google Signin button.
• Create conditional script for signin and not signin users.
• Finally, paste the final code on your website.

Any application that uses OAuth 2.0 to access Google APIs must have authorization credentials that identify the application to Google's OAuth 2.0 server. The following steps explain how to create credentials for your project. Your applications can then use the credentials to access APIs that you have enabled for that project.

1. Go to the Credentials page.
2. Click Create credentials > OAuth client ID.
3. Select the Web application application type.
4. Name your OAuth 2.0 client and click Create.

After configuration is complete, take note of the client ID that was created. You will need the client ID to complete the next steps. (A client secret is also created, but you need it only for server-side operations.)

Load the Google Platform Library

You must include the Google Platform Library on your web pages that integrate Google Sign-In. Paste the code given below before your </head> tag.

<meta name="google-signin-client_id" content="YOUR_CLIENT_ID.apps.googleusercontent.com">
<script src="https://apis.google.com/js/platform.js" async defer></script>

Add a Google Sign-In button

The easiest way to add a Google Sign-In button to your site is to use an automatically rendered sign-in button. With only a few lines of code, you can add a button that automatically configures itself to have the appropriate text, logo, and colors for the sign-in state of the user and the scopes you request.

To create a Google Sign-In button that uses the default settings, add a div element with the class g-signin2 to your sign-in page:

<div class="g-signin2" data-onsuccess="onSignIn"></div>

Load the JQuery script:

Place the JQuery script above your </body> tag.

  
<script type="text/javascript" src="/js/jquery-3.4.1.min.js"></script>

Place the code below inside your post area in your theme

  
<script type="text/javascript">

function show_login_status(network, status){

if(status == false){

$(".g-signin-block").show();

}

if(status == true){

$(".g-signin-content").show();

}

}

function onSignIn(googleUser) {

var profile = googleUser.getBasicProfile();

console.log('ID: ' + profile.getId());

console.log('Name: ' + profile.getName());

console.log('Image URL: ' + profile.getImageUrl());

console.log('Email: ' + profile.getEmail());

if (window.location.href.indexOf('reload')==-1) {

window.location.replace(window.location.href+'?reload');

}

}

</script>

<img style="display:none;"

onload="show_login_status('Google', true)"

onerror="show_login_status('Google', false)"

src="https://accounts.google.com/CheckCookie?continue=https%3A%2F%2Fwww.google.com%2Fintl%2Fen%2Fimages%2Flogos%2Faccounts_logo.png&amp;followup=https%3A%2F%2Fwww.google.com%2Fintl%2Fen%2Fimages%2Flogos%2Faccounts_logo.png&amp;chtml=LoginDoneHtml&amp;checkedDomains=youtube&amp;checkConnection=youtube%3A291%3A1"

/>

<div class="g-signin-block" style="display:none;">

<div class="alert alert-danger">You need to sign in with Google to read this content.</div>

<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>

</div> 

<div class="g-signin-content" style="display:none;">

<p>Your content...</p>

</div>

That's it! Lastly, if you find this post helpful, kindly consider sharing it on your social pages.