sign in with google code example
Example 1: google sign in button
<div class='g-sign-in-button'>
<div class=content-wrapper>
<div class='logo-wrapper'>
<img src='https://developers.google.com/identity/images/g-logo.png'>
</div>
<span class='text-container'>
<span>Sign in with Google</span>
</span>
</div>
</div>
<style>
*, *:before, *:after {
box-sizing: border-box;
}
.g-sign-in-button {
margin: 10px;
display: inline-block;
width: 240px;
height: 50px;
background-color:
color:
border-radius: 1px;
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
transition: background-color .218s, border-color .218s, box-shadow .218s;
}
.g-sign-in-button:hover {
cursor: pointer;
-webkit-box-shadow: 0 0 3px 3px rgba(66, 133, 244, 0.3);
box-shadow: 0 0 3px 3px rgba(66, 133, 244, 0.3);
}
.g-sign-in-button:active {
background-color:
transition: background-color 0.2s;
}
.g-sign-in-button .content-wrapper {
height: 100%;
width: 100%;
border: 1px solid transparent;
}
.g-sign-in-button img {
width: 18px;
height: 18px;
}
.g-sign-in-button .logo-wrapper {
padding: 15px;
background:
width: 48px;
height: 100%;
border-radius: 1px;
display: inline-block;
}
.g-sign-in-button .text-container {
font-family: Roboto,arial,sans-serif;
font-weight: 500;
letter-spacing: .21px;
font-size: 16px;
line-height: 48px;
vertical-align: top;
border: none;
display: inline-block;
text-align: center;
width: 180px;
}
</style>
Example 2: google sign in pub
dependencies:
google_sign_in: ^4.5.6
Example 3: sign in with google
1. Open the Google API Console Credentials page.
https:
2. Click Select a project, then NEW PROJECT, and enter a name for the project,
and optionally, edit the provided project ID. Click Create.
3. On the Credentials page, select Create credentials, then OAuth client ID.
4. You may be prompted to set a product name on the Consent screen; if so,
click Configure consent screen, supply the requested information, and click
Save to return to the Credentials screen.
5. Select Desktop app for the Application type, and enter any additional
information required.
Click Create.
6. On the page that appears, copy the client ID and client secret to your
clipboard, as you will need them when you configure your client library.
reference:
https: