<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
ここで関数を呼び出し、ユーザーデータをHTMLに割り当てます。今すぐあなたの<body>
NOTE: You may call it from another file, but i am not going to mention it here.
<script>
function onSignIn(googleUser) {
var profile = googleUser.getBasicProfile();
var data = '';
data += '<ul>';
data += '<li><img src="' + profile.getImageUrl() + '"/></li>';
data += '<li>ID: ' + profile.getId() + '</li>';
data += '<li>Full Name: ' + profile.getName() + '</li>';
data += '<li>Given Name: ' + profile.getGivenName() + '</li>';
data += '<li>Family Name: ' + profile.getFamilyName() + '</li>';
data += '<li>Email: ' + profile.getEmail() + '</li>';
data += '</ul>';
document.getElementsByClassName("aClassOfYourOwn")[0].innerHTML =data;
};
</script>
NOTE 2: This is only one way of handling this, as you may assign new variables, and call them anywhere you like, but this is only for starter.
内<script></script>タグ内のこれらの行を追加し、新しいdiv要素を作成するための時間です。あなたがGoogleから得たものを使うことができるように。ですので、これを行うには、<body>タグ内にこの行を追加してください。それはあなた次第です多分右
<div class="g-signin2" data-onsuccess="onSignIn" data-theme="dark"></div>
後
<div class="aClassOfYourOwn"></div>
。 最後に、サインアウトオプションを追加する場合は、<body>タグ内にこの行を追加します。
<a href="#" onclick="signOut();">Sign out</a>
そしてもちろん、あなたが見ているかもしれませんが、我々はsignOut()という関数を宣言していません。だからそれを宣言しましょう。
<script>
function signOut() {
var auth2 = gapi.auth2.getAuthInstance();
auth2.signOut().then(function() {
console.log('User signed out.');
var data = 'There is no user signed in';
document.getElementsByClassName("g-signin3")[0].innerHTML =data;
});
}
</script>
これはデモ用です。もちろんを表示するユーザーデータは意味がありません。しかし、それで何ができるかは無限です。 たとえば、IDを取得してユーザーをそれぞれのページに誘導することができます。
私はちょうどこのソリューションを実装しようとしましたが、動作していないようです –
"Uncaught ReferenceError：$が定義されていません"というエラーが表示されます –
HTMLにJqueryがありますか？そうでない場合は、ダウンロードするか、 '