我做的是一个web网站,需要用到facebook和google登录,在经历头铁踩了好几个坑之后,终于找到了facebook和google的第三方登录方法,顺便总结一下问题

首先总结一下具体流程:（facebook和google的第三方登录都大差不差的一样）

1、首先引入对应的sdk
<script src="https://accounts.google.com/gsi/client" ></script>  //google的sdk
<script src="https://connect.facebook.net/en_US/sdk.js" ></script> //facebook的sdk
2、设置对应的Facebook和Google按钮及其样式

3、就是在js中调用登录方法和设置登录成功之后的回调函数

4、在回调函数里向后端传入accessToken或者其他后端所需要的数据

4、大体上，前端的部分就是这么一个流程，但是在这个过程中就很多坑了，主要我当时也没办法去看Facebook和Google的文档（这里要注意的是google最近更新了sdk和登录方法，所以之前的老方法不管用了，建议你们去看google的文档 ------： https://developers.google.com/identity/gsi/web）

好啦，那么接下来就开始说我践行成功的Facebook和google第三方登录的方法

Facebook第三方登录

首先要确保其他的准备工作要做好，先去Facebook开发者那里申请第三方登录所需要的appid和密钥以及配置允许的域名和重定向url，这里就不再详述了

对于我们前端来说，可能有vue、react、uniapp等多种框架去开发网站，有的vue、react可能都有一些插件去支持我更简单的实现第三方登录，但是这些插件对vue和react的版本都有一定的要求，我们回退版本起来又有很多问题，所以不太建议这种方式。

我接下来的方式是通用于vue、react和uniapp或者原生页面的

首先需要在index.html页面的头部引入sdk和初始化Facebook(注意一定得是.html ,尤其是vue和react和uniapp不能在组件里面引入)

但是我这里是用的引入sdk和初始化Facebook在一起的方式
<script type="text/javascript">//初始化Facebookwindow.fbAsyncInit = function () {console.log('s11111');FB.init({appId: '33-------------',//facebook申请的的appidcookie: true, // enable cookies to allow the server to access xfbml: true, // parse social plugins on this pageversion: 'v2.8' // use graph api version 2.8});};//引入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'));</script>
然后是在页面部分撰写按钮样式
//①react样式
<Button onClick={loginFackbook}><Imagepreview={false}src={require("../../assets/facebook.png")}/><span>Continue with Facebook</span></Button>//②vue和③uniapp样式<button @Click="loginFackbook"><imgsrc={require("../../assets/facebook.png")}/><span>Continue with Facebook</span></button>
Facebook登录方法及其回调函数
 //①react点击事件（调用Facebook的login方法，和声明回调函数和声明所需数据
const loginFackbook=()=> {FB.login((response) => {if (response.status === 'connected') {console.log(response)console.log('facebook'+response.authResponse.accessToken)buttonlogn('1',response.authResponse.accessToken)//传给后端数据} else{console.log(response)}},//Facebook登录成功之后的回调函数，可以在这里获取数据和将sccessToken返回后端{scope:'email,read_stream,publish_stream'}  //声明Facebook登录所需要返回的数据);//facebook的login方法}//②vue点击事件和@uniapp点击事件（调用Facebook的login方法，和声明回调函数和声明所需数据methods: {loginFackbook() {FB.login((response) => {if (response.status === 'connected') {console.log(response)console.log('facebook'+response.authResponse.accessToken)buttonlogn('1',response.authResponse.accessToken)//传给后端数据} else{console.log(response)}},//Facebook登录成功之后的回调函数，可以在这里获取数据和将sccessToken返回后端{scope:'email,read_stream,publish_stream'}  //声明Facebook登录所需要返回的数 据);}}
FB.login(回调函数，{scope：需要Facebook返回的数据，....}

其中回调函数里面response.status代表状态，response.status === 'connected'代表用户已登录，一般后端需要的只是回调里面的accessToken，到这里Facebook登录就差不多了，但是有一个问题就是第二次到登录页面会直接就是登录状态，然后直接登录，但是有时候我们用户可能需要切换登录账号，所以我们可以用FB.logout()方法

最好在将accessToken传给后端之后再调用，否则后台获取的accessToken容易失效
FB.logout(function(response) {console.log(response);})
之后就是后端处理数据，然后返回给我们自己项目的token了

Google第三方登录（新版）

首先要确保其他的准备工作要做好，和Facebook一样，去开发者平台申请第三方登录所需要的appid和密钥以及配置允许的域名和重定向url，这里就不再详述了

和之前说的一样，Google最好也采用和Facebook一样的方式，但是有一点需要强调，Google的第三方登录已经更新了，之前的老版本和登录方法已经不管用了，所以最好去看Google的文档

当然这里说的方法是新版的Google第三方登录

我接下来的方式是通用于vue、react和uniapp或者原生页面的

首先需要在index.html页面的头部引入google的sdk(注意一定得是.html ,尤其是vue和react和uniapp不能在组件里面引入)

<script src="https://accounts.google.com/gsi/client" ></script>
//其实官方的sdk是这样的
//<script src="https://accounts.google.com/gsi/client" async defer ></script>

我刚开始是直接引用的<script src="https://accounts.google.com/gsi/client" async defer ></script>

但是在我google登录之后,页面老是报错,我找了一下原因,

才发现原来是异步的问题,

导致我的google登录方法的调用在<script src="https://accounts.google.com/gsi/client" async defer ></script>之前执行了,

导致报错google is no defined,

所以我们需要将 anysc和defer去掉,这样就会按照顺序执行,不会报google方法未定义的错误

然后是在页面部分撰写按钮样式

//①react样式
<Button  id='customBtn'><Imagepreview={false}src={require("../../assets/google.png")}/><span>Continue with Google</span></Button>//②vue和③uniapp样式<button  id='customBtn' ><imgsrc={require("../../assets/Google.png")}/><span>Continue with Google</span></button>

google方法和绑定google登录按钮点击事件 (这里有vue和react和uniapp的对应方法)

 //①react 调用goole方法和绑定google登录按钮点击事件
useEffect(()=>{const client = google.accounts.oauth2.initTokenClient({client_id: '6097-------------------.apps.googleusercontent.com',  //google申请的appidscope:'profile email openid',     //需要google返回的数据callback: (response) => {console.log(response)buttonlogn('2',response.access_token)  //返回给后端access_token}, //回调函数});document.getElementById('customBtn').addEventListener('click', function () { client.requestAccessToken() }) //按钮绑定事件},[])//②vuemounted() {const client = google.accounts.oauth2.initTokenClient({client_id: '6097-------------------.apps.googleusercontent.com',  //google申 请的appidscope:'profile email openid',     //需要google返回的数据callback: (response) => {console.log(response)buttonlogn('2',response.access_token)  //返回给后端access_token}, //回调函数});document.getElementById('customBtn').addEventListener('click', function () { client.requestAccessToken() }) //按钮绑定事件}//uniapp
onLoad(){const client = google.accounts.oauth2.initTokenClient({client_id: '6097-------------------.apps.googleusercontent.com',  //google申 请的appidscope:'profile email openid',     //需要google返回的数据callback: (response) => {console.log(response)buttonlogn('2',response.access_token)  //返回给后端access_token}, //回调函数});document.getElementById('customBtn').addEventListener('click', function () { client.requestAccessToken() }) //按钮绑定事件}

google的这个方法有一个好处就是,每次点击google按钮相当于重新进入,之前的access_token已经无效

(这个方法获取的是google返回的access_token),

还有一种方法是可以直接获取用户的相关信息,但是不会返回access_token,

这个主要看需求,需要的话可以看看,Google新版第三方登录（Javascript SDK）_ZeHome吖的博客-CSDN博客_谷歌登录sdk,但是请注意我之前说的异步问题,最好去掉anysc和defer

我只在我这里保留一下代码部分就不详写内容了

<script src="https://accounts.google.com/gsi/client" ></script>
<div id="buttonDiv"></div>
useEffect(()=>{/*  fn :function 登录回调函数       */const google_init=(fn)=>{google.accounts.id.initialize({client_id: '6097------------t.com',//客户端ID(创建应用第三步中获得的id)callback: fn});google.accounts.id.renderButton(document.getElementById('buttonDiv'),//自定义按钮{});}//解析tokenconst decode_jwt = (token) => {var base64Url = token.split('.')[0];var base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/');var jsonPayload = decodeURIComponent(window.atob(base64).split('').map(function (c) {return '%' + ('00' + c.charCodeAt(0).toString(16)).slice(-2);}).join(''));return JSON.parse(jsonPayload);};const google_load = (response) => {console.log(response)buttonlogn('2',response.credential)const responsePayload = decode_jwt(response.credential);console.log(responsePayload)};google_init(google_load)},[])

Facebook和Google第三方登录相关推荐

Facebook、Google第三方登录（vue）
哎呀,好久没写blog啦,嘻嘻嘻.最近公司接触到了海外的项目所以在登录时除了用邮箱注册之后还能使用第三方登录.现在系统暂有的就是Facebook.Google和WeChat .今天主要是讲解faceb ...
Java实现Google第三方登录
其实所有的第三方登录都是基于OAuth协议的,大多数平台都支持OAuth2.0,只有Twitter的是基于OAuth1.0来做的.所以只要弄明白一个,其他的什么qq.微信.微博的第三方登录也都一样.上 ...
Google第三方登录的实现
谷歌第三方登录实现 Controller类的实现 import cn.stylefeng.guns.core.util.HttpClientUtil; import net.sf.json.JSONO ...
关于Facebook Web端第三方登录
1.集成并测试facebook 1.注册开发者账号 2.创建应用 2.代码块 3.测试结果 1.注册开发者账号登陆facebook开发者平台 (https://developers.facebook ...
Java实现Facebook第三方登录
第一次接触Facebook第三方登录,可能有些地方做的并不全面,只是尝试着做了一个小demo,因为国内接入Facebook的项目并不多,并且多数都是Android或IOS的实现,所以资料也特别少,在此 ...
Facebook第三方登录流程总结
Facebook第三方登录流程总结授权Facebook第三方登录流程开发步骤 Facebook应用配置前端授权后端校验授权Facebook第三方登录流程有时候为了迅速获客,会在注册登录页支 ...
用 Flask 来写个轻博客 (23) — 应用 OAuth 来实现 Facebook 第三方登录
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录目录前文列表扩展阅读第三方登录流程 OAuth 应用 OAuth 实现 Face ...
Google及Facebook第三方登录问题，“将你登入到此应用时出错，请稍后再试”
最近项目需求,需要加上Google及Facebook的第三方登录功能.在根据官方文档按步骤完成配置后,在真机上测试正常. Google登录官方指导文档:https://developers.googl ...
前端学习——第三方登录（Google登录、Facebook登录）
文章目录前言一.前端对接第三方登录有什么用? 二.使用环境三.FB第三方登录引入且封装成组件四.G第三方登录引入且封装成组件五.页面上使用总结前言本文介绍了作者本人学习前端Java ...

Facebook和Google第三方登录

首先总结一下具体流程:（facebook和google的第三方登录都大差不差的一样）

Facebook第三方登录

Google第三方登录（新版）

Facebook和Google第三方登录相关推荐

最新文章

热门文章