Wie füge ich Google-Login oauth zu meiner Website hinzu?

Ich möchte Google-Anmeldung in meiner Website hinzufügen, ich erstellte meine Google Developer Console Client-ID und ich fand ein offizielles Tutorial hier https://developers.google.com/identity/sign-in/web/sign-in, die zeigt, wie es getan, ich habe die gleiche Weise tut Tutorials aber hier bekomme ich nichts, ich Das bedeutet, dass die Schaltfläche in meinem Browser nicht angezeigt wird, wenn ich den Code ausführe.Wie füge ich Google-Login oauth zu meiner Website hinzu?

hier ist der Code:

<!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>

Quelle

2016-08-29 jacky

Sofortiger von <div id="gSignIn"></div> versuchen Sie es <div class="g-signin2" data-onsuccess="onSignIn"></div> zu verwenden, um es gut funktionieren sollte.

Quelle

2016-08-29 11:01:09 ZearaeZ

Ich versuchte es zuerst, und dann dachte ich, es gäbe ein Problem mit g-signin2 und ich änderte es in gSignIn, und ich probierte g-signin2 erneut dasselbe Ergebnis keine Änderungen – jacky

ich denke http://StackOverflow.com/questions/15287669/google-signin-button-klasse-g-signin-link wird ihnen helfen, als ihre anforderung. – ZearaeZ

Hier ist, wie Sie Google's Sign-In button Vorlage verwenden, können die Login & Erteilung von Berechtigungen Prozess in einer etwas elegantere Weise zu initialisieren:

<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(); 
}

Quelle

2016-08-29 11:20:28

dasselbe ergebnis ich habe immer noch nicht den knopf, können sie es in ihrem eigenen browser – jacky

versuchen und durch befolgung des tutorials, das du mir gegeben hast, erhalte ich jetzt den knopf, aber es ist nicht klickbar – jacky

in Ordnung, fand ich meine Lösung, und dachte Hilfe andere es mit Blick auf . Ich griff auf meine Datei, auf die ich dieses Skript direkt durch einen Doppelklick hatte, aber dies wurde durch einen laufenden Webserver angefordert, fügte meine Datei zu meinem Servlet-Webcontent-Verzeichnis hinzu und darauf zugegriffen durch meinen Browser und es funktioniert einfach perfekt

Quelle

2016-08-29 18:38:10 jacky

Wie füge ich Google-Login oauth zu meiner Website hinzu?

Antwort

Verwandte Themen