The last article talked about the implementation of Line’s third party login, this article notes

Facebook

The implementation of the

Roughly the same, but different!

The demo address please mercilessly poke download.lllomh.com/cliect/#/pr here…

One: Developer platform configuration

Go to developers.facebook.com/

Create an application (I already have one here)

​

Dynamic operation demonstration:

​

So all we need here is the appID, which is the app number

​

Facebook is a little more convenient, no need to set the callback address, the window login success directly closed. Returns the result.

2: the code

1. Add the SDK to index.html and replace the appID with your app number:

<! --> <script async defer crossorigin="anonymous" SRC = "https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v3.3&appId=3356227040432352&autoLogAppEvents=1" > < / script >Copy the code

2. Register the component in main.js and install NPM install vue-facebook-signin-button

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

3,. Then it is used in the component, can be collected in the login component:

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

Where the onSignInSuccess callback is used to retrieve the result:

methods: { onSignInSuccess (response) { // FB.api('/me', dude => { // console.log(`Good to see you, ${dude.name}. ') //}) console.log(response) // Returns third party login information tolen etc.}, onSignInError (error) {}}Copy the code

Complete use part:

<template> <fb-signin-button :params="fbSignInParams" @success="onSignInSuccess" @error="onSignInError"> Sign in with Facebook </fb-signin-button> </template> <script> export default { name:'facebook', 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}. ') //}) console.log(response) // Returns third party login information tolen etc}, onSignInError (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>Copy the code

The running results are as follows:

​

Actual use:

/***********Facebook***************/
import FBSignInButton from 'vue-facebook-signin-button'
Vue.use(FBSignInButton)
/***********Facebook***************/
Copy the code