Facebook、Google第三方登录（vue）

哎呀，好久没写blog啦，嘻嘻嘻。最近公司接触到了海外的项目所以在登录时除了用邮箱注册之后还能使用第三方登录。现在系统暂有的就是Facebook、Google和WeChat 。今天主要是讲解facebook和google，WeChat 公司账号还没有申请下来第一次接触网页版的WeChat login之后也会把方法贴出来的。

Facebook

准备工作
进入facebook develop 页面facebook develop，点击进入我的应用页面facebook apps

添加新应用按着步骤填写就行了，填写完成后进入应用页面就能看到一个Facebook登录的产品点击设置按钮进去选择你开发的平台，我的是pc端所以选择的第三个网络。填写目标网站的url 注意：facebook登录只能在https环境中测试http不可以（测试登录功能时可以将页面放到GitHub上就是https啦撒花）

facebook开发平台的工作已经完成了接下来就是我们的项目中怎么使用的问题了：

<template><button @click="login">Facebook Login</button>
</template>
<script>export default {methods: {login(){// 如果登录状态不为connected时才调用FB.login，如果登录状态为connected时可通过FB.getLoginStatus直接获取登录信息FB.login(function(response){console.log(response)//拿到登录信息进行自己平台的登录})}},create(){// 防止重复if(!window.FB){window.fbAsyncInit = function() {FB.init({appId      : '{your-app-id}',cookie     : true,xfbml      : true,version    : '{api-version}' // 当前版本是： v7.0});FB.AppEvents.logPageView();FB.getLoginStatus(function(response){// 检查登录状态 response: status,authResponse// status 表示用户登录状态  connected:用户已经登录facebook和您的应用 not_authorized: 用户已经登录facebook，但未登录您的应用  unknown:用户未登录facebook，或无法连接至facebookconsole.log(response) })};(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'));}}}
</script>

至此facebook的登录就完成啦。

Google 登录

首先登录google API和服务创建凭据，选择”OAuth 客户端 ID“，选择web应用，设置目标url，生成客户端ID和客户端秘钥，我们需要的就是客户端ID

好啦接下啦就是vue中的使用啦，先安装 vue-google-signin-button-directive

npm install vue-google-signin-button-directive --save

<template><button v-google-signin-button="clientId" class="login-third-btn google" type="button">Google</button></div>
</template>
<script>
export default{data(){return{clientId: '客户端ID'}},methods: {OnGoogleAuthSuccess(idToken){//idToken google返回的token// 拿到token之后进行自己项目的login操作},OnGoogleAuthFail(err){}}
}
</script>

google登录就完啦，so easy ！！！！！！

Facebook、Google第三方登录（vue）相关推荐

Facebook和Google第三方登录
我做的是一个web网站,需要用到facebook和google登录,在经历头铁踩了好几个坑之后,终于找到了facebook和google的第三方登录方法,顺便总结一下问题首先总结一下具体流程:(fa ...
Java实现Google第三方登录
其实所有的第三方登录都是基于OAuth协议的,大多数平台都支持OAuth2.0,只有Twitter的是基于OAuth1.0来做的.所以只要弄明白一个,其他的什么qq.微信.微博的第三方登录也都一样.上 ...
Facebook android 第三方登录
Facebook android 第三方登录 android平台使用Facebook账号登录自己的app - 前期准备 - 注册Facebook开发者账号,添加自己的应用,按照官方文档的指引完成需要的 ...
Google第三方登录的实现
谷歌第三方登录实现 Controller类的实现 import cn.stylefeng.guns.core.util.HttpClientUtil; import net.sf.json.JSONO ...
SpringCloud-Gateway网关统一登录鉴权+QQ第三方登录+Vue前后分离解决方案
具体流程 * 网关鉴权流程:* 前端输入用户名密码去请求token,经过SecurityWeb配置,* 白名单不进入AuthorizationManager,直接进全局过滤器->没有token放 ...
前端学习——第三方登录（Google登录、Facebook登录）
文章目录前言一.前端对接第三方登录有什么用? 二.使用环境三.FB第三方登录引入且封装成组件四.G第三方登录引入且封装成组件五.页面上使用总结前言本文介绍了作者本人学习前端Java ...
Google及Facebook第三方登录问题，“将你登入到此应用时出错，请稍后再试”
最近项目需求,需要加上Google及Facebook的第三方登录功能.在根据官方文档按步骤完成配置后,在真机上测试正常. Google登录官方指导文档:https://developers.googl ...
Java实现Facebook第三方登录
第一次接触Facebook第三方登录,可能有些地方做的并不全面,只是尝试着做了一个小demo,因为国内接入Facebook的项目并不多,并且多数都是Android或IOS的实现,所以资料也特别少,在此 ...
Facebook第三方登录流程总结
Facebook第三方登录流程总结授权Facebook第三方登录流程开发步骤 Facebook应用配置前端授权后端校验授权Facebook第三方登录流程有时候为了迅速获客,会在注册登录页支 ...

Facebook、Google第三方登录（vue）

Facebook

Google 登录

Facebook、Google第三方登录（vue）相关推荐

最新文章

热门文章