Signup with Facebook / Google using Vue
Handling SignUp or SignIn with Google and Facebook using Pure VueJS applications without any external package.
Project setup
npm install
Google Setup Client ID
import GoogleAuth from '@/config/google.js'
const gauthOption = {
clientId: 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com',
scope: 'profile email',
prompt: 'select_account'
}
Vue.use(GoogleAuth, gauthOption)
Options
| 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. |
Methods
| 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 |
Usage
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)
})
}
Facebook App ID Setup
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>
Usage
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)
}
Compiles and hot-reloads for development
npm run serve
Demo Link
Login Screen
SignUp Screen
Facebook with SignUp/SignIn
Google with SignUp/SignIn
Compiles and minifies for production
npm run build
Run your tests
npm run test
Lints and fixes files
npm run lint
Run your unit tests
npm run test:unit