<button type="button" class="fb-btn" id="google"> <img src="google.jpg" class="images" alt="google"> </button> <button type="button" id="facebook" class="fb-btn"> <img src="facebook.jpg" class="images" alt="facebook"> </button> <!--google--> 引入Google sdk <script src="https://apis.google.com/js/api:client.js"></script> <script> //google第三方登录------------------------------------------------------------ var googleUser = {}; var startApp = function() { gapi.load('auth2', function(){ // Retrieve the singleton for the GoogleAuth library and set up the client. auth2 = gapi.auth2.init({ client_id: '*****************', //客户端ID cookiepolicy: 'single_host_origin', scope: 'profile' //可以请求除了默认的'profile' and 'email'之外的数据 }); attachSignin(document.getElementById('google')); }); }; function attachSignin(element) { auth2.attachClickHandler(element, {}, function(googleUser) { // document.getElementById('name').innerText = "Signed in: " + googleUser.getBasicProfile().getName(); <div id="name">显示姓名</div> var profile = auth2.currentUser.get().getBasicProfile(); console.log('ID: ' + profile.getId()); console.log('Full Name: ' + profile.getName()); console.log('Given Name: ' + profile.getGivenName()); console.log('Family Name: ' + profile.getFamilyName()); console.log('Image URL: ' + profile.getImageUrl()); console.log('Email: ' + profile.getEmail()); } startApp(); //注销 // function googleOut() { // var auth2 = gapi.auth2.getAuthInstance(); // auth2.signOut().then(function () { // alert('用户注销成功'); // }); // } </script> <script> //facebook第三方登录------------------------------------------------------------ (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')); window.fbAsyncInit = function() { FB.init({ appId: '*******', cookie: true, // 启用cookie xfbml: true, // 解析此页面上的社交插件 version: 'v2.8' // 使用图形api 2.8版本 }); // 点击按钮登录的代码 document.getElementById("facebook").onclick = function () { FB.login(function (response) { if (response.status === 'connected') { testAPI(); } else { console.log("该用户没有登录") } }, {scope: 'public_profile,email'}); return false; } function testAPI() { FB.api('/me', function (response) { FB.api('http://graph.facebook.com/' + response.id + '?fields=first_name,last_name,email', function (data) { //获取数据之后填充到对应的input上 document.getElementById("firstName").value = data.first_name; document.getElementById("lastName").value = data.last_name; document.getElementById("email").value = data.email; }); } } //退出 // document.getElementById('signout').onclick = function() { // FB.logout(function(response) { // console.log("用户已退出"); // }); // }; </script>
实现Google和facebook第三方登录
猜你喜欢
转载自www.cnblogs.com/dream-meng/p/12579850.html
今日推荐
周排行