phanan / vue-facebook-signin-button Goto Github PK

View Code? Open in Web Editor NEW

137.0 5.0 30.0 167 KB

A simple plugin to include a custom Facebook sign-in button into your web app.

JavaScript 100.00%

vue javascript plugin

vue-facebook-signin-button's Introduction

vue-facebook-signin-button

A simple Vue plugin to include a custom Facebook sign-in button into your web app.

Install

This plugin can be installed as a module

$ npm install vue-facebook-signin-button

or, if you're not in a modular environment, just include it as a <script>.

Usage

Important: The Facebook SDK must first be loaded asynchronously for the plugin to work. Something like this will do:

  window.fbAsyncInit = function() {
    FB.init({
      appId      : '{your-app-id}',
      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'));

Step 1: import and use the plugin if you're in a modular environment (you don't need this step otherwise, as the plugin will register itself).

import FBSignInButton from 'vue-facebook-signin-button'
Vue.use(FBSignInButton)

Step 2: Now you have a fb-signin-button global component, ready for use. It's best to demonstrate the usage with an example:

<template>
  <fb-signin-button
    :params="fbSignInParams"
    @success="onSignInSuccess"
    @error="onSignInError">
    Sign in with Facebook
  </fb-signin-button>
</template>

<script>
export default {
  data () {
    return {
      fbSignInParams: {
        scope: 'email,user_likes',
        return_scopes: true
      }
    }
  },
  methods: {
    onSignInSuccess (response) {
      FB.api('/me', dude => {
        console.log(`Good to see you, ${dude.name}.`)
      })
    },
    onSignInError (error) {
      console.log('OH NOES', error)
    }
  }
}
</script>

<style>
.fb-signin-button {
  /* This is where you control how the button looks. Be creative! */
  display: inline-block;
  padding: 4px 8px;
  border-radius: 3px;
  background-color: #4267b2;
  color: #fff;
}
</style>

That's it!

Looking for the Google counterpart?

License

MIT © Phan An

vue-facebook-signin-button's People

Contributors

Stargazers

Watchers

vue-facebook-signin-button's Issues

Uncaught TypeError: Cannot read property 'login' of undefined at HTMLDivElement.eval

Kept getting this error any idea why?

<fb-signin-button class="btn btn-default btn-big btn-big--facebook btn-big--with-logo" :class="{ 'is-loading': isLoading }" :params="fbPluginParams" @success="fbLoginSuccess" @error="fbLoginError">  <bouncing-loader v-if="isLoading"></bouncing-loader> <span class="span-fb" v-else> {{ facebookLogText }} </span> </fb-signin-button>

Vue TS Cannot find name 'FB'.

Hey
Great plugin. I have used it on an older project!
I have a issue when doing a 'build' my Vue project.

I get "ERROR in /Users/Zac/.../RegisterUser.vue Cannot find name 'FB'. "

The thing is the plugin actually works, even though I get this error on my console & this ERROR is what is stopping my from compile/build.

The FB.Init on my index.html works fine with no errors, but when inside 'RegisterUser.vue', it says FB cant be found.

Do you have any suggestions on how I could get rid of this error?
This is a Vue typescript 3.1.3 project.

Thanks in advance!

pwa problem

I know it is not the problem with phanan plugin, but it is happening when I am
using nuxt pwa module, manifest display standalone mode
ios seems like not redirect when user success to login facebook, and occurs empty confirm page.
otherwise, it works in safari browser and google chrome browser
Found lots of problems, it was broken with pwa:(
please do not close this issues. and hope everyone see it if they have same problem.
wait for help

If it's open source, where's the code?

Adding manage_pages makes it keep asking for permissions everytime it's clicked

When I add { scope: 'email, manage_pages' } it keeps asking for pages permissions, even if I accepted them.

Would you add a state parameter?

Hi @phanan ,

According to facebook security doc, we make strong our security if we use state parameter. Do you have any plan to add that speciality to the lib? We can generate a random string to pass your lib and when there is an answer from FB, we can check that if we really send that request.

Or, do you have any advise to put state parameter to the request link?

https://developers.facebook.com/docs/facebook-login/security#stateparam

Really dumb question - where does the window.fbAsyncInit goes

Does this script goes to the vue's index.js file? is it loaded in index.html
window.fbAsyncInit = function() {
FB.init({
appId : '{your-app-id}',
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'));

message: "init not called with valid version", innerError: undefined

Facebook login not working within Facebook/Instagram for in-app browser

I have implemented Facebook login using the vue-facebook-signin-button. It works fine everywhere except from within the Facebook/Instagram app's built-in browser. There, it seems to just fail, and also this problem occurs randomly on some devices, not all devices.

Cannot read property 'init' of undefined at window.fbAsyncInit

was including in created hook for asynchronous flow

when included error occurs Cannot read property 'init' of undefined
at window.fbAsyncInit