-
-
Save ilhamsabir/7134cb026b26f1d6e175d2d542d78a32 to your computer and use it in GitHub Desktop.
A Facebook Login button Single File Component done in VueJS
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <template> | |
| <div> | |
| <button class="button" @click="logInWithFacebook"> Login with Facebook</button> | |
| </div> | |
| </template> | |
| <script> | |
| export default { | |
| name:"facebookLogin", | |
| methods: { | |
| async logInWithFacebook() { | |
| await this.loadFacebookSDK(document, "script", "facebook-jssdk"); | |
| await this.initFacebook(); | |
| window.FB.login(function(response) { | |
| if (response.authResponse) { | |
| alert("You are logged in & cookie set!"); | |
| // Now you can redirect the user or do an AJAX request to | |
| // a PHP script that grabs the signed request from the cookie. | |
| } else { | |
| alert("User cancelled login or did not fully authorize."); | |
| } | |
| }); | |
| return false; | |
| }, | |
| async initFacebook() { | |
| window.fbAsyncInit = function() { | |
| window.FB.init({ | |
| appId: "8220179XXXXXXXXX", //You will need to change this | |
| cookie: true, // This is important, it's not enabled by default | |
| version: "v13.0" | |
| }); | |
| }; | |
| }, | |
| async loadFacebookSDK(d, s, id) { | |
| var js, | |
| fjs = d.getElementsByTagName(s)[0]; | |
| if (d.getElementById(id)) { | |
| return; | |
| } | |
| js = d.createElement(s); | |
| js.id = id; | |
| js.src = "https://connect.facebook.net/en_US/sdk.js"; | |
| fjs.parentNode.insertBefore(js, fjs); | |
| } | |
| } | |
| }; | |
| </script> | |
| <style> | |
| .button{ | |
| color:white; | |
| min-width: 150px; | |
| background-color: #000000a1; | |
| height: 2.5rem; | |
| border-radius: 2rem; | |
| font-weight: 400; | |
| font-size: 0.8rem; | |
| } | |
| </style> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment