Google Sign-In manages the OAuth 2.0 flow and token lifecycle, simplifying your integration with Google APIs. A user always has the option to revoke access to an application at any time.
This document describes how to complete a basic Google Sign-In integration.
Create authorization credentials
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.
- Go to the Credentials page .
- Click Create credentials > OAuth client ID.
- Select the Web applicationapplication type.
- 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.
<script src="https://apis.google.com/js/platform.js" async defer></script>
Specify your app's client ID
Specify the client ID you created for your app in the Google Developers Console
with the google-signin-client_id
meta element.
<meta name="google-signin-client_id" content=" YOUR_CLIENT_ID.apps.googleusercontent.com ">
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>
Get profile information
After you have signed in a user with Google using the default scopes, you can access the user's Google ID, name, profile URL, and email address.
To retrieve profile information for a user, use the getBasicProfile()
method.
function
onSignIn
(
googleUser
)
{
var
profile
=
googleUser
.
getBasicProfile
();
console
.
log
(
' ID
:
'
+
profile
.
getId
());
//
Do
not
send
to
your
backend
!
Use
an
ID
token
instead
.
console
.
log
(
' Name
:
'
+
profile
.
getName
());
console
.
log
(
' Image
URL
:
'
+
profile
.
getImageUrl
());
console
.
log
(
' Email
:
'
+
profile
.
getEmail
());
//
This
is
null
if
the
' email
'
scope
is
not
present
.
}
Sign out a user
You can enable users to sign out of your app without signing out of Google by
adding a sign-out button or link to your site. To create a sign-out link, attach
a function that calls the GoogleAuth.signOut()
method to the link's onclick
event.
< a
href
=
" #" onclick="signOut();">Sign out</a>
< script
>
function
signOut
()
{
var
auth2
=
gapi
.
auth2
.
getAuthInstance
();
auth2
.
signOut
()
.
then
(
function
()
{
console
.
log
(
' User
signed
out
.
' );
});
}
< /
script
>
