*Check out the video to see me follow along with the code.
Gotten stuck in a rabbit hole figuring out how to add "Log In with Google" to your web app? In this series, I'll cover:
- why you might want to use the Sign-In for Website JS library, and getting started with it
- Adding the library via javascript
- adding it to an existing project (angular & react)
Their docs give you a decent place to start if you know what you're looking for, but there's a few areas where their docs and other guides online can be confusing. There's also minimal guidance as to how to use it within existing projects.
- Am I supposed to be following the Google Identity docs or do I need Google Sign-in for Web??
- Wait, why are those 2 guides so different? They even load different libraries!
- This should be simple! I'm just trying to load a users avatar!!
The answer to "How do I add Log in with Google?" boils down to 1 question you need to be able to answer: What exactly are you trying to do?
- Do you just want to be able to see the users name and picture, maybe their email? Use the Sign-In for Websites library (full walkthrough below).
- Do you have your own user database and want to offer Google login as an extra option? This is Federated Login and you'd want to use their OpenID Connect protocol. This is used by platforms like auth0, firebase, oneidentity.
- Do you want to be able to interact with the users Google account and do things like see their calendar, or create a Google doc? You'll need to use their OAuth workflow.
For the purposes of this series, I'm going to explore when you should use the Sign-In for Websites library which uses the OpenID Connect protocol (also used by Federated Login systems) - this library can be easily misunderstood, but is still incredibly useful. The goal of this authentication library is to let you identify a user with their Google account. Thats it.
So when should I use it?
Good reasons to use it:
- you have some content stored on a backend service that you deliver via an API only after the user has signed in
- you only have to support Google/G-Suite users
- you dont need to authorize users (e.g. allow some users to be admins)
- your site is public
- you have a single-page app
Use cases where it's worth considering federated login:
- you have pre-existing user content stored on a backend service
- you have an internal site that you want to restrict to users from a specific domain. (e.g. only users from @example.com should see it)
- you want to prevent people from seeing your page unless they've logged in. The best you can do with this library is show/hide elements on the page if the user logged in, but thats enough if you only load data from an API after a user has logged in.
The library is designed to be used with HTML/JS and only interacts with your page via the "Sign in with Google" button. You can integrate this with other frameworks like Angular/React which I'll be covering in the next part of this series.
Adding Google Sign-in step-by-step
1. Hello World HTML
To start with, all you need is an index.html file.
<!DOCTYPE html>
<html>
<head>
<title>Google Auth Demo</title>
</head>
<body>
<h1>Welcome to the Demo</h1>
</body>
</html>
2. Add the Google Sign-In Button
Before adding in the button, you first need to create a client ID/secret which is a way of identifying that you, the developer, are allowing users to get the identity information from Google and delivered to your website.
Creating credentials for Sign-In
- Go to the Google API Console - https://console.developers.google.com/apis/dashboard
- Create a new project, or use an existing project if you already have one set up.
- Then click on Credentials -> Create Credentials -> OAuth Client ID
Here's what I put in for this demo:
Name: google-auth-demo
Authorized Javascript Origins: http://localhost:8080
Authorized Redirect URIs: empty
*A note about the Javascript origins: if you have a plain HTML file that you load in your browser using a file path like /home/dperez/index.html, this won't work. You'll need to "serve" your website on your computer so that you have a URL, even if its just localhost. You can use python -m SimpleHTTPServer 8080
(which is commonly available) to serve up your current directory or you can use an npm package like http-server.
You'll then get a Client ID & Client Secret. These are 2 identifiers for your Oauth Client. At this point, you have authorized that Client ID to accept logins and return you the users information. Copy them down. If you accidentally click out of the screen, you can always copy them again later.
Add the library + credentials + button to your HTML
In your index.html page, add the following to your HTML page:
...
<head>
...
<meta name="google-signin-client_id" content="your-client-id-goes-here">
<script src="https://apis.google.com/js/platform.js" async defer></script>
</head>
<body>
<h1>Welcome to the Demo</h1>
<div class="g-signin2"></div>
</body>
The script tag grabs the library from Google that reads your <meta>
tag to use as the Client ID, and then automatically re-styles the button with the CSS class .g-signin2
.
At this point, if you refresh your page, you should see a pretty Sign-In button. If you click it, you'll go through your Google Login flow in a popup, and you'll finally land back on your site, and the button will say, "Signed In".
Great, we're most of the way there! But in its current form, this is still useless.
3. Identify the user
- Update the g-signin2 div to include the
data-onsuccess
attribute:
<div class="g-signin2" data-onsuccess="onSignIn"></div>
That attribute contains the name of the function that will be called once a user has successfully logged in with Google.
- Create a function called "onSignIn".
<body>
...
<script>
function onSignIn(googleUser) {
// get user profile information
console.log(googleUser.getBasicProfile())
}
</script>
</body>
Your onSignIn
function will be called with an argument containing the information provided by Google. If you refresh the page, you'll notice that
- You're automatically signed in
- The button gets updated very shortly after refresh (1s delay)
If you open up your javascript console, you'll see the users information printed:
{
Eea: "108716981921401766503"
Paa: "https://lh3.googleusercontent.com/-y_ba58pC4us/AAAAAAAAAAI/AAAAAAAAAYE/wMGKOxlWR90/s96-c/photo.jpg"
U3: "perez.dp@gmail.com"
ig: "danny perez"
ofa: "danny"
wea: "perez"
}
This is the basic profile containing a series of values that identify me as a user. Under any normal circumstances, this object would have fields like name
or email
, but for some unknown reason (I wish I had the answer but they havent given an answer either), its gibberish - but at least its consistent and hasn't changed.
You can either get the data directly by doing googleUser.getBasicProfile()['U3']
or use the more human-readable approach by using the functions like googleUser.getBasicProfile().getName()
or googleUser.getBasicProfile().getEmail()
. (See here for the javascript client api reference docs)
4. Sign out
Add a sign out button after the user has signed in by adding a button in your index.html and the click handler in your javascript.
index.html
<body>
...
<button onclick="signOut()">Sign out</button>
</body>
function signOut() {
gapi.auth2.getAuthInstance().signOut().then(function() {
console.log('user signed out')
})
}
Great! At this point, we've added a Sign-In with Google button and we can identify the user by name/email. Also, thats it. Thats all this library can help you do.
...but what about basic things like saving users data to the backend? or showing an admin page?! Why isn't this in the docs?! That'll be covered on the next post coming 7/22 - using the js library to add it to your site without HTML.
Update: Here's the link for part 2 of the series - Using the js library
79 Comments. Leave new
[…] 11. adding google sign-in to your webapp – hello world – intricate … […]
[…] 5. adding google sign-in to your webapp – hello world – intricate … […]
Hi
When a website is opened in facebook inapp browser, Google signin doesn’t work. Any suggestion ?
[…] 6. adding google sign-in to your webapp – hello world – intricate … […]
[…] 7. adding google sign-in to your webapp – hello world – intricate … […]
[…] 6. adding google sign-in to your webapp – hello world – intricate … […]
[…] […]
[…] hook it into your React app. If you’ve used the Google Sign-In for Websites library before (see here for my guide on setting it up), there’s an API to let you get at the user’s info. But with the One Tap Sign-In for […]
[…] 5. adding google sign-in to your webapp – hello world – intricate … […]
[…] 5. adding google sign-in to your webapp – hello world – intricate … […]
[…] 5. adding google sign-in to your webapp – hello world – intricate … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] 5. adding google sign-in to your webapp ?? hello world ?? intricate ?? […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – intricate cloud […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] 9. adding google sign-in to your webapp – hello world – intricate … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world … […]
[…] adding google sign-in to your webapp – hello world – intricate … […]
[…] adding google sign-in to your webapp – hello world – intricate … […]
[…] 11. adding google sign-in to your webapp – hello world – intricate … […]
[…] 9. adding google sign-in to your webapp – hello world – intricate … […]
I truly appreciate your technique of writing a blog. I added it to my bookmark site list and will
[…] 9. adding google sign-in to your webapp – hello world – intricate … […]
I followed your instructions early last year, and was able to use the Google Sign In utilities and access the email address of the user. However, Google has updated their Sign In utilities and deprecated most all of the information that you described in the video I followed. I have followed the upgrade steps but cannot seem to access the email account as I had previously done. Can you update your video? Thanks, Scott.
[…] 5. adding google sign-in to your webapp – hello world – intricate … […]
[…] adding google sign-in to your webapp – hello world […]
[…] 11. adding google sign-in to your webapp – hello world – intricate … […]
[…] adding google sign-in to your webapp – hello world […]
Pretty! This has been a really wonderful post. Many thanks for providing these details.
[…] 9. adding google sign-in to your webapp – hello world – intricate … […]
[…] adding google sign-in to your webapp – hello world – intricate cloud […]
[…] adding google sign-in to your webapp – hello world – intricate cloud […]
[…] https://www.intricatecloud.io/2019/07/adding-google-sign-in-to-your-webapp-pt-1/ […]
Great website. Lots of useful information here. I look forward to the continuation. vox live stream kostenlos ansehen
It s awesome to pay a quick visit this website and reading the views of all mates regarding this piece of writing while I am also zealous of getting familiarity. stinchfield newsmax
I just like the helpful information you provide in your articles
I truly appreciate your technique of writing a blog. I added it to my bookmark site list and will
This is really interesting, You’re a very skilled blogger. I’ve joined your feed and look forward to seeking more of your magnificent post. Also, I’ve shared your site in my social networks!
I really like reading through a post that can make men and women think. Also, thank you for allowing me to comment!
very informative articles or reviews at this time.
naturally like your web site however you need to take a look at the spelling on several of your posts. A number of them are rife with spelling problems and I find it very bothersome to tell the truth on the other hand I will surely come again again.
I am truly thankful to the owner of this web site who has shared this fantastic piece of writing at at this place.
[…] 9. adding google sign-in to your webapp – hello world – intricate … […]