竹磬网-邵珠庆の日记 生命只有一次,你可以用它来做些更多伟大的事情–Make the world a little better and easier


94月/150

GooglePlus登录添加修改操作记录

发布在 邵珠庆

使用官方定义按钮页面自动刷新登录: 
 <div id="gConnect">
    <button class="g−signin"
        data−scope="https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email"
        data−requestvisibleactions="http://schemas.google.com/AddActivity"
        data−clientId="申请ClientID"
        data−callback="onSignInCallback"
        data−theme="dark"
        data−cookiepolicy="single_host_origin">
    </button>
 </div>

<script type="text/javascript">
var  kx_google_host_config = "配置登录成功后跳转域名";
</script>

<script type="text/javascript" src="https://apis.google.com/js/client:platform.js" async defer></script>
<script type="text/javascript" src="http://简单封装/clientgoogle.so.js" ></script>

使用自己定义按钮页面不自动刷新登录:

<div id="gConnect">    
<button type="button" onclick="window.render();return false;" class="btnLarge">使用Google帐号登录</button>
</div>
<script type="text/javascript">
var kx_google_host_config = "配置登录成功后跳转域名";
    window.___gcfg = {
        parsetags: 'explicit'
    };
    var render = function(){
        gapi.signin.render('gConnect', {
            'scope': 'https://www.googleapis.com/auth/plus.login https://www.googleapis.com/auth/userinfo.email',
            'requestvisibleactions': 'http://schemas.google.com/AddActivity',
            'clientId': '申请ClientID',
            'callback': 'onSignInCallback',
            'theme': 'dark',
            'cookiepolicy': 'single_host_origin'
        });
    };
</script>
<script type="text/javascript" src="https://apis.google.com/js/client:platform.js" async defer></script>
<script type="text/javascript" src="http://简单封装/clientgoogle.so.js"></script>
 
clientgoogle.so.js文件封装内容:
var helper = (function() {
  var BASE_API_PATH = 'plus/v1/';
  return {
    onSignInCallback: function(authResult) {
      gapi.client.load('plus','v1').then(function() {
        if (authResult['access_token']) {
          helper.profile();
        }
      });
    },

    /**
     * Gets and renders the currently signed in user's profile data.
     */
    profile: function(){
      gapi.client.plus.people.get({
        'userId': 'me'
      }).then(function(res) {
        var urlmark = '?';
        var profile = res.result;
      var kx_google_host = kx_google_host_config;
      var openid_response_nonce = profile.etag;
      var openid_return_to = kx_google_host;
      var openid_sig = randomString(28);
      var openid_identity = "http://shaozhuqing.com/openid?id="+profile.id;
      var openid_claimed_id = openid_identity;
      var openid_ext1_value_first = profile.name.familyName;
      var openid_ext1_value_last = profile.name.givenName;
      var openid_ext1_value_email = profile.emails[0].value;
        if(kx_google_host.indexOf('?') != −1){
            var urlmark = '&';
}
      var kx_google_url = kx_google_host+urlmark+"openid.response.nonce="+openid_response_nonce+"&openid.return.to="+
openid_return_to+"&openid.sig="+openid_sig+"&openid.identity="+openid_identity+"&openid.claimed.id="+openid_claimed_id+"&openid.    
ext1.value.first="+openid_ext1_value_first+"&openid.ext1.value.last="+openid_ext1_value_last+"&openid.ext1.value.email="+
openid_ext1_value_email;
    location.href =kx_google_url;
      });
    }
  };
})();

function onSignInCallback(authResult) {
  helper.onSignInCallback(authResult);
}
function randomString(len) {
len = len || 32;
var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
var maxPos = $chars.length;
var pwd = '';
for (i = 0; i < len; i++) {
pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
}
return pwd;
}
 

按钮自定义参数:

  1. data-theme:light | dark

  2. data-width :iconOnly | standard | wide

  3. data-height:short | standard | tall

google开发文档:https://developers.google.com/+/web/signin/