Authenticate Using Google Sign-In with JavaScript
–
Let’s start to authenticate with firebase using Google
Accounts. Before start to authentications follow the below steps.
1. Add
Firebase to your JavaScript project
2. Enable
Google Sign-In in the Firebase console
Add Firebase to your JavaScript project -
// Set the configuration for your app
<script
src="https://www.gstatic.com/firebasejs/4.4.0/firebase.js"></script>
<script>
// Initialize Firebase
var config
= {
apiKey: "AIza33ACyqBfafJ32Rtt5R12MVvXSBvHa6fD1Q4X",
authDomain: "fir-demo-63b26.firebaseapp.com",
databaseURL: "https://fir-demo-63b26.firebaseio.com",
projectId: "fir-demo-63b16",
storageBucket: "fir-demo-63b26.appspot.com",
messagingSenderId:
"44244534636121"
};
firebase.initializeApp(config);
</script>
Create
an instance of the Google Provider -
var
provider = new
firebase.auth.GoogleAuthProvider();
Specify
additional OAuth 2.0 scopes - Optional
provider.addScope('https://www.googleapis.com/auth/contacts.readonly');
To
localize the provider's OAuth flow - Optional
firebase.auth().languageCode
= 'pt';
// To apply the default browser
preference instead of explicitly setting it.
//
firebase.auth().useDeviceLanguage();
Specify
additional custom
OAuth provider
- Optional
provider.setCustomParameters({
'login_hint': 'user@code-sample.com'
});
Authenticate
with Firebase using the Google provider object-
firebase.auth().signInWithPopup(provider).then(function(result)
{
// This gives you a Google Access Token. You can
use it to access the Google API.
var token
= result.credential.accessToken;
// The signed-in user info.
var user
= result.user;
// ...
}).catch(function(error)
{
// Handle Errors here.
var errorCode
= error.code;
var
errorMessage = error.message;
// The email of the user's account used.
var email
= error.email;
// The firebase.auth.AuthCredential type that was
used.
var credential
= error.credential;
});
To
sign in by redirecting to the sign-in page, call signInWithRedirect
-
firebase.auth().signInWithRedirect(provider);
We
can also retrieve the Google provider's OAuth token by calling
getRedirectResult -
firebase.auth().getRedirectResult().then(function(result)
{
if (result.credential)
{
// This gives you a Google Access Token. You can
use it to access the Google API.
var token
= result.credential.accessToken;
// ...
}
// The signed-in user info.
var user
= result.user;
}).catch(function(error)
{
// Handle Errors here.
var errorCode
= error.code;
var errorMessage
= error.message;
// The email of the user's account used.
var email
= error.email;
// The firebase.auth.AuthCredential type that was
used.
var credential
= error.credential;
});
I hope you are enjoying with this post! Please share with you friends. Thank you so much!
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|