Facebook-H5授权登录步骤

第一种纯html的话

<script>// Load Facebook sdk 加载 Facebook sdk(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 = "https://connect.facebook.net/en_US/sdk.js";fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));function statusChangeCallback(response) {console.log(response);if (response.status === 'connected') { // connected 用户登录了 Facebook 和您的应用//已经授权登录过的操作      } else {  //没有授权登录过的操作 login()}}var login = function(){FB.login(function(response) { // 弹出让用户登录if (response.status === 'connected') { //如果登录了FB.api('/me', function(response) { // 获取用户信息console.log(response)FB.getLoginStatus(function(response) { // 这里可以看到状态console.log('status')console.log(response)console.log('status')});});}})}window.fbAsyncInit = function() {FB.init({appId            : '你自己的应用APPid',autoLogAppEvents : true,xfbml            : true,version          : 'v8.0' // 版本号});// 页面初始化 判断是否登录// getLoginStatus  检查登录状态 加载网页时应采取的第一步是检查用户是否已使用 Facebook 登录功能登录您的应用FB.getLoginStatus(function(response) {statusChangeCallback(response);});};</script>

第二种通过vue 脚架的方法的话

第一步在 index.html vue-cli更新后对应的index位置也不同这里看你们vue的版本是在public 还是根目录，引入JS文件，配置版本和APPID

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v8.0&appId=您的应用APPID&autoLogAppEvents=1"></script>

第二步 npm 引入 vue-facebook-signin-button 依赖，

npm install vue-facebook-signin-button

第三步在main,js 使用这组件

/* 引入Facebook登录 */
import FBSignInButton from 'vue-facebook-signin-button'
Vue.use(FBSignInButton)

第四步在需要的地方引入就可以了

<template><div class="loginModal" v-show="isShow"><div class="content"><fb-signin-button :params="fbSignInParams" @success="onSignInSuccess" @error="onSignInError">Facebook登录</fb-signin-button></div></div>
</template><script>export default {name: 'loginModal',data() {return {fbSignInParams: {scope: 'email,user_likes',return_scopes: true},};},methods: {onSignInSuccess(response) {FB.api('/me', dude => {console.log(dude);});console.log(response); //返回第三方的登录信息 tolen等},onSignInError(error) {},},mounted() {}
};
</script><style lang="scss" scoped></style>

Facebook-H5授权登录步骤相关推荐

微信h5登录php,vue实现微信授权登录步骤详解
这次给大家带来vue实现微信授权登录步骤详解,vue实现微信授权登录的注意事项有哪些,下面就是实战案例,一起来看一下. 背景 vue前后端分离开发微信授权场景 app将商品分享到微信朋友圈或者分享给 ...
redirect_uri 参数错误公众号H5授权登录原理
redirect_uri 参数错误,这个错误请检查网页授权,大部分是回调的授权域名配置问题公众号H5授权登录在微信公众号里获取微信用户信息分两种方式注意:以下所有操作,都需要再公众号配置网页授权 ...
【微信公众号H5授权登录】
微信公众号H5授权登录废话不多,直接上代码(这里只写代码的实现) 废话不多,直接上代码(这里只写代码的实现) 页面进来判断微信环境 onShow() {//设置初始值为false,微信环境下才能打开 ...
java微信H5授权登录
微信h5页面的授权登录,首先你要申请一个测试公众号微信公众平台在配置里的网页服务-网页账号输入自己的ip地址+端口,如127.0.0.1:8080 第一步:前端拉起授权,用户同意,获取code,前 ...
前后端分离后解决微信授权跨域、微信H5授权登录跨域的问题解决
前言: 我们之前做的微信授权登录流程是: 1.第一步:用同意授权,并获取code 2.第二步:通过code换取网页授权access_token 3.第三步:刷新access_token(如果需要) 4 ...
支付宝H5授权登录PHP版本
第一步需要将支付宝SDK下载放在vendor,并且重命名为"Alipay" 下一步直接上代码: /*** 获取协议* @return type*/public function g ...
微信H5授权登录PHP版本
直接上代码: public function weixinLogin(){$item = db('setting')->where('id',1)->find();$item = json ...
微信h5授权获取用户openId的方法和步骤，用于用户登录和注册
微信公众号的配置和专业名词就不介绍了,不懂的问度娘,我就直接上代码点击下载完整demo 先说一下我的demo放的位置: 微信H5授权登录分两种: ① 静默授权:snsapi_base,没有弹窗,只 ...
微信授权登录（H5为例）
导入依赖: com.auth0 java-jwt 3.4.0 登录类: package com.beagledata.gaea.securitydoc.controller; import com.a ...

Facebook-H5授权登录步骤

Facebook-H5授权登录步骤相关推荐

最新文章

热门文章