google-signin-vue
This Package can be used for both vue and nuxt. Both Documentation are given below.
Project setup
npm install google-signin-vue
Basic Setup
To use this package, we must get the client-id from google.
-
Go to Google developer Console
-
Create a Project or select an existing project
-
Then goto oath consent tab on the left sidebar
-
Choose the option internal if this can be used only by the organization. For example, if you registered the organization like myowndomain.com, then anyone who has mail id with @mydomain.com registered with Gmail only can log in.
-
Choose the option external if anyone registered with Gmail can log in.
-
Then You can fill all the details.
-
In case you are testing in localhost, you can just enter application name (mandatory) and enter logo(optional)
-
Save the Details
-
Goto Credentials tab on the left sidebar
-
Select Create Credential
-
Select application type as a web application, specify a name.
-
In the Authorized javascript origins section, enter the project domain name.
-
In Case of localhost just type localhost, If the project running on a specific port, enter the port like localhost:XXXX.
-
Now you’ll get the credentials, use only the client-id, keep your client- secret confidential. client- secret should be provided only to the backend.
For Vue Project
- In public/index.html add the below script in header
<script src="https://apis.google.com/js/platform.js"></script>
Inside Template
<googleSignIn
:clientId="'xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com'"
:successCallBack="getSuccessData"
:failureCallBack="getFailureData"
/>
On the script of the same template
import googleSignIn from 'google-signin-vue'
export default {
name: 'app',
components: {
googleSignIn
},
methods:{
getSuccessData:function (user) {
// The User variable contains id_token, id, name, image, email as objects.
// Send The id_token to the Backend for the verication.
},
getFailureData:function (errorData) {
// The errorData variable contains failure details
}
}
}
For Nuxt Project
- Create app.html in the root directory of the project and add
{{ HEAD }} {{ APP }} Nuxt Js App Template Documentation
Inside Template
<googleSignIn
:clientId="'xxxxxxxxxxxx-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com'"
:successCallBack="getSuccessData"
:failureCallBack="getFailureData"
/>
On the script of the same template
import googleSignIn from 'google-signin-vue/src/googleSignIn.vue'
export default {
name: 'app',
components: {
googleSignIn
},
methods:{
getSuccessData:function (user) {
// The User variable contains id_token, id, name, image, email as objects.
// Send The id_token to the Backend for the verication.
},
getFailureData:function (errorData) {
// The errorData variable contains failure details
}
}
}
Note: You must specify the callback function as props to get the data, The supported props are given below.
| Prop | Type | Required | Description |
|---|---|---|---|
clienId |
string | ✅ | Client Id Obtained from google. |
warning |
boolean | Warnings on console is displayed on true. Default is true | |
className |
string | Any classname if needed to append on the button | |
successCallBack |
function | Function to receive success data, must have one parameter | |
failureCallBack |
function | Function to receive failure data, must have one parameter | |
customButton |
boolean | True if gonna set the custom button. Set via <slot> Your Code Here</slot> . customButtonId is mandatory if it is set to True |
|
customButtonId |
string | Id of the custom button, so we can trigger the google on clicking the button | |
longTitle |
boolean | Google's Option to set long title. Default is false. | |
theme |
string | Google's Option to change the button's display. 'light' / 'dark' are the only value supported. | |
buttonWidth |
number | Specify the Button width to google. | |
buttonHeight |
number | Specify the Button width to google. |