Google和facebook登录

准备工作是你要在官网创建应用，获取它们给你的id

Google 登录

1，在google开发者后台创建应用
2，通过后台进行申请获取id

最近在试着用google登录，当然这只是简单的登录，直接用的它的官方文档给出的代码。上线以后才能实现，还要用https链接才行，不然会认为你的链接不安全。有可能会被阻止。

1.先引入官方的js文件

<meta name="google-signin-client_id" content="Client ID">
 <script src="https://apis.google.com/js/platform.js" async defer></script>

2.再放入代码

 <div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
 <script>
      function onSignIn(googleUser) {
        // Useful data for your client-side scripts:
        var profile = googleUser.getBasicProfile();
        console.log("ID: " + profile.getId()); // Don't send this directly to your server!
        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());

        // The ID token you need to pass to your backend:
        var id_token = googleUser.getAuthResponse().id_token;
        console.log("ID Token: " + id_token);
      }
</script>

Facebook 登录

准备工作

1，https://developers.facebook.com/?no_redirect=1
登录你的账号

2.要把它打开
3，在这里可以设置一些东西

和google差不多，它也是在上线环境下，也必须是https才行，它比google更严格。它不在https下就会被阻止，而google有时是会登陆上的。

1，这里在js代码里加入了js文件。

function statusChangeCallback(response) {  // Called with the results from FB.getLoginStatus().
        console.log('statusChangeCallback');
        console.log(response);                   // The current login status of the person.
        if (response.status === 'connected') {   // Logged into your webpage and Facebook.
          testAPI();  
        } else {                                 // Not logged into your webpage or we are unable to tell.
          document.getElementById('status').innerHTML = 'Please log ' +
            'into this webpage.';
        }
      }


      function checkLoginState() {               // Called when a person is finished with the Login Button.
        FB.getLoginStatus(function(response) {   // See the onlogin handler
          statusChangeCallback(response);
        });
      }


      window.fbAsyncInit = function() {
        FB.init({
          appId      : 'APP ID',
          cookie     : true,                     // Enable cookies to allow the server to access the session.
          xfbml      : true,                     // Parse social plugins on this webpage.
          version    : '版本号，我填的是v5.0'           // Use this Graph API version for this call.
        });


        FB.getLoginStatus(function(response) {   // Called after the JS SDK has been initialized.
          statusChangeCallback(response);        // Returns the login status.
        });
      };
      (function(d, s, id) {                      // Load the SDK asynchronously
        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 testAPI() {                      // Testing Graph API after login.  See statusChangeCallback() for when this call is made.
        console.log('Welcome!  Fetching your information.... ');
        FB.api('/me', function(response) {
          console.log('Successful login for: ' + response.name);
          console.log(response,'====================1')
          document.getElementById('status').innerHTML =
            'Thanks for logging in, ' + response.name + '!';
        });
      }
  </script>
  <fb:login-button scope="public_profile,email" onlogin="checkLoginState();">
  </fb:login-button>
  <div id="status">
  </div>