我做的是一个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的sdk2、 设置对应的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"> //初始化Facebook window.fbAsyncInit = function () { console.log('s11111'); FB.init({ appId: '33-------------',//facebook申请的的appid cookie: true, // enable cookies to allow the server to access xfbml: true, // parse social plugins on this page version: '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}> <Image preview={false} src={require("../../assets/facebook.png")} /> <span>Continue with Facebook</span> </Button> //②vue和③uniapp样式 <button @Click="loginFackbook"> <img src={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'>
<Image
preview={false}
src={require("../../assets/google.png")}
/>
<span>Continue with Google</span>
</Button>
//②vue和③uniapp样式
<button id='customBtn' >
<img
src={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申请的appid
scope:'profile email openid', //需要google返回的数据
callback: (response) => {
console.log(response)
buttonlogn('2',response.access_token) //返回给后端access_token
}, //回调函数
});
document.getElementById('customBtn').addEventListener('click',
function () { client.requestAccessToken() }
) //按钮绑定事件
},[])
//②vue
mounted() {
const client = google.accounts.oauth2.initTokenClient({
client_id: '6097-------------------.apps.googleusercontent.com', //google申 请的appid
scope:'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申 请的appid
scope:'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'),//自定义按钮 {} ); } //解析token const 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) },[])
1434
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
