Handling SignUp or SignIn with Google and Facebook using Pure VueJS applications without any external package.
npm install import GoogleAuth from '@/config/google.js' const gauthOption = { clientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com', scope: 'profile email', prompt: 'select_account' } Vue.use(GoogleAuth, gauthOption) | Property | Type | Required | Description |
|---|---|---|---|
| clientId | String | Required. | The app's client ID, found and created in the Google Developers Console. |
| scope | String | Optional. | Default value is profile email. Full list of scopes. |
| prompt | String | Optional. | This value using for authCode. The possible values are select_account or consent. Default value is select_account. To get refresh token from auth code, use consent. |
| fetch_basic_profile | Boolean | Optional. | If set to true, email profile openid will be automatically added as scope. Default value is true. |
| Property | Description | Type |
|---|---|---|
| GoogleAuth | return of gapi.auth2.getAuthInstance() | Object |
| isAuthorized | Whether or not you have auth | Boolean |
| isInit | Whether or not api init | Boolean |
| isLoaded | Whether or not api init. will be deprecated. | Function |
| signIn | function for sign-in | Function |
| getAuthCode | function for getting authCode | Function |
| signOut | function for sign-out | Function |
We already initalized GoogleAuth and directly we can add click event for the login button as below,
loginWithGoogle () { this.$gAuth .signIn() .then(GoogleUser => { // on success do something console.log('GoogleUser', GoogleUser) console.log('getId', GoogleUser.getId()) console.log('getBasicProfile', GoogleUser.getBasicProfile()) console.log('getAuthResponse', GoogleUser.getAuthResponse()) }) .catch(error => { console.log('error', error) }) } Important: The Facebook SDK must first be loaded asynchronously for the plugin to work. Something like this will do:
export const initFbsdk = () => { return new Promise(resolve => { window.fbAsyncInit = function() { FB.init({ appId : 'xxxxxxxxxxxxxxxxxxx', cookie : true, // enable cookies to allow the server to access the session xfbml : true, // parse social plugins on this page version : 'v2.8' // use graph api version 2.8 }); }; (function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/en_US/sdk.js"; fjs.parentNode.insertBefore(js, fjs); }(document, 'script', 'facebook-jssdk')); }) } If you're not in a modular environment, just include it as a <script>.
<script type="text/javascript" src="https://connect.facebook.net/en_US/sdk.js"></script> Step 1: import and use the plugin if you're in a modular environment otherwise plugin will register itself.
import { initFbsdk } from '@/config/facebook_oAuth.js' Step 2: Initialize the Facebook instance with the app id
mounted () { initFbsdk() } Step 3: Add the button click event
loginWithFacebook () { window.FB.login(response => { console.log('fb response', response) }, this.params) } npm run serve 
npm run build npm run test npm run lint npm run test:unit