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>