• vue2 调用facebook登录和分享

    发表于 2020-12-12 14:46浏览12 • 评论0条 • 0人点赞 • 0人收藏

    12月

    12

    技术分享

    1、facebook->进入开发者 https://developers.facebook.com/b

    2、public/index.html 增加以下代码

     
    <-- 引入sdk, appid换成 你的应用编号 -->
    <script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v3.3&appId=xxxxxxxxxxx&autoLogAppEvents=1"></script>
     
    

    3、在main.js中注册该组件

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

    4、在组件中使用 。官网手册

     
    <template>
      <div class="wrap">
          <!--  Facebook 登录  -->
          <button class="login-btn">
               <fb-signin-button
                       :params="fbSignInParams"
                       @success="onSignInSuccess"
                       @error="onSignInError">
                    Facebook 登录
               </fb-signin-button>
          </button>
    
          <!-- 分享 -->
          <div class="share">
            <div class="fb-share-button" data-href="https://test.wonderent.net/home/XmasMsl/main#/home" data-layout="button_count" data-size="large" data-mobile-iframe="true" >
                          <a target="_blank"
                             href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&src=sdkpreparse"
                             class="fb-xfbml-parse-ignore">分享
                          </a>
              </div>
          </div>
      </div>
    </template>
    
    <script type="text/ecmascript-6">
      export default {
          name:'facebook',
          data () {
              return {
                  fbSignInParams: {
                      scope: 'email,user_likes',
                      return_scopes: true
                  }
              }
          },
          methods: {
              onSignInSuccess (response) {
                  console.log(response) //返回第三方的登录信息
              },
              onSignInError (error) {
                  /* 错误 */
                console.log(error)
              }
          }
      }
    </script>
     
    

评论列表(有0条评论)

  • cpsblog
  • Do you like me?

  • 热门文章
  • 推荐文章
  • 最新文章