Skip to main content

How To Show Your Contents Only to Google Sign-In Users

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.

Turn Your Website
into a Lead-Generating Machine

Webcopy, Designs and SEO are King, Queen, and Knight respectively. And how well you use them together creates a user experience that either drives people away or makes them click the "buy" button.

Copywriting

Want to make your offers irresistible? We write conversion-optimized copy for small and medium brands, digital agencies and online stores.

Custom Web Design

Creating a branded website can be the best thing you do for your business. Branding can help you figure out what and how to communicate your company's story.

Skyrocket Your Traffic

For more than 20 years, we've been providing SEO solutions for businesses wanting to expand their online presence, increase leads and grow their revenue.

Contact

Contact Us

About us

Archie Webmaker is a digital branding agency with a magical touch on brand identity, brand strategy, and marketing to drive business success.

Call Us

Email Us

archie@archiewebmaker.com
archiewebmaker@gmail.com

Working Hours

Mon - Fri: 9AM to 5PM
Saturday: 9AM to 1PM