私のウェブサイトにGoogleのサインインoauthを追加するには？

私のウェブサイトにGoogleログインを追加するには、私は自分のGoogle開発者コンソールのクライアントIDを作成して公式のチュートリアルを見つけましたhttps://developers.google.com/identity/sign-in/web/sign-inこれはどのように行われたのかを示しています。コードを実行すると、ブラウザにボタンが表示されないことを意味します。ここ私のウェブサイトにGoogleのサインインoauthを追加するには？

はコードです：<div id="gSignIn"></div>の

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<title>Login with Google Account using JavaScript by CodexWorld</title> 
    <meta name="google-signin-client_id" content="921258372597-t5jrb0e9p4ivstp9mfi972lhcvfcuo59.apps.googleusercontent.com"> 
<script src="jquery.min.js"></script> 
<script src="https://apis.google.com/js/client:platform.js?onload=renderButton"  async defer></script> 
<style> 
.profile{ 
border: 3px solid #B7B7B7; 
padding: 10px; 
margin-top: 10px; 
width: 350px; 
background-color: #F7F7F7; 
height: 160px; 
    } 
.profile p{margin: 0px 0px 10px 0px;} 
.head{margin-bottom: 10px;} 
.head a{float: right;} 
.profile img{width: 100px;float: left;margin: 0px 10px 10px 0px;} 
.proDetails{float: left;} 
</style> 
<script> 
function onSuccess(googleUser) { 
var profile = googleUser.getBasicProfile(); 
gapi.client.load('plus', 'v1', function() { 
var request = gapi.client.plus.people.get({ 
    'userId': 'me' 
}); 
//Display the user details 
request.execute(function (resp) { 
    var profileHTML = '<div class="profile"><div class="head">Welcome '+resp.name.givenName+'! <a href="javascript:void(0);" onclick="signOut();">Sign out</a></div>'; 
    profileHTML += '<img src="'+resp.image.url+'"/><div class="proDetails"><p>'+resp.displayName+'</p><p>'+resp.emails[0].value+'</p><p>'+resp.gender+'</p><p>'+resp.id+'</p><p><a href="'+resp.url+'">View Google+ Profile</a></p></div></div>'; 
    $('.userContent').html(profileHTML); 
    $('#gSignIn').slideUp('slow'); 
}); 
}); 
} 
    function onFailure(error) { 
alert(error); 
} 
function renderButton() { 
gapi.signin2.render('gSignIn', { 
'scope': 'profile email', 
'width': 240, 
'height': 50, 
'longtitle': true, 
'theme': 'dark', 
'onsuccess': onSuccess, 
'onfailure': onFailure 
}); 
} 
function signOut() { 
var auth2 = gapi.auth2.getAuthInstance(); 
auth2.signOut().then(function() { 
$('.userContent').html(''); 
$('#gSignIn').slideDown('slow'); 
}); 
} 
</script> 
</head> 
<body> 
<div id="gSignIn"></div> 
<div class="userContent"></div> 
<div class="divid" style="background:#ddd;height:30px;width:30px;">    </div> 
</body> 
</html>

出典

2016-08-29 jacky

インスタントそれがうまく動作するはず<div class="g-signin2" data-onsuccess="onSignIn"></div>使用してみてください。ここで

出典

2016-08-29 11:01:09 ZearaeZ

私は最初にこの方法を試してみたところ、g-signin2に何らかの問題があり、gSignInに変更したと思っていましたが、g-signin2をやり直してみましたが、同じ結果に変更はありません – jacky

私はhttp://stackoverflow.com/questions/15287669/google-signin-button-class-g-signinのリンクをクリックすると、要件を満たすのに役立ちます。 – ZearaeZ

はあなたが少しよりエレガントな方法で、許可プロセスのログイン&助成金を初期化するためにGoogle's Sign-In buttonテンプレートを使用することができます方法は次のとおりです。

<meta name="google-signin-client_id" content="{{ OAUTH2_CLIENT_ID }}"> 

<script src="https://apis.google.com/js/platform.js?onload=onLoad" async defer></script> 

<div id="google-signin-button" 
    class="g-signin2" 
    data-width="170" 
    data-height="30" 
    data-onsuccess="onSignIn" 
    data-onfailure="onSignInFailure"> 
</div>

function onSignIn(googleUser) { 
    var profile = googleUser.getBasicProfile(); 
    var idToken = googleUser.getAuthResponse().id_token; 
} 

function onSignOut(){ 
    var auth2 = gapi.auth2.getAuthInstance(); 
    auth2.signOut(); 
}

出典

2016-08-29 11:20:28

同じ結果私はまだボタンを手に入れませんでした。自分のブラウザでそれを試すことができます – jacky

そしてチュートリアルに従えば私は今ボタンを手に入れますがクリックできません – jacky

大丈夫、私は私の解決策を見つけて、それが直面している他の助けと思いました。私はこのスクリプトをダブルクリックするだけで直接アクセスしていたファイルにアクセスしていましたが、これは実行中のWebサーバーから要求され、私のファイルをサーブレットWebcontentディレクトリに追加してブラウザからアクセスし、完璧に機能します。

出典

2016-08-29 18:38:10 jacky

私のウェブサイトにGoogleのサインインoauthを追加するには？

答えて

関連する問題