[英]Sign-in with google account on website
I just started using google API, so i feel like i am walking in the dark.我刚开始使用 google API,所以我觉得我在黑暗中行走。
What i want to do:我想做的事:
It is a very common feature.这是一个非常常见的功能。 I want my site to have a Google account Sign-In Button using javascipt, and make sure that a given gmail is valid and maybe extract some basic information from the account.
我希望我的网站有一个使用 javascipt 的 Google 帐户登录按钮,并确保给定的 gmail 有效并且可能从帐户中提取一些基本信息。
What do i found:我发现了什么:
I have followed the instructions from here:我已按照此处的说明进行操作:
https://developers.google.com/+/web/signin/javascript-flow . https://developers.google.com/+/web/signin/javascript-flow 。
and copied the code in the last steps of the instructions.并复制了说明的最后一步中的代码。 I have entered my CLIENT_ID that i got when i followed the instructions in the 'tutorial' but my button just doesn't work.
我已经输入了我按照“教程”中的说明获得的 CLIENT_ID,但我的按钮不起作用。 I also searched for some examples and are quite different from the code i found in the google site.
我还搜索了一些示例,并且与我在 google 站点中找到的代码大不相同。 I feel that i am missing something (actually i think that i am doing something stupid :) ).
我觉得我错过了一些东西(实际上我认为我在做一些愚蠢的事情:))。
And Here is my code这是我的代码
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<meta name="google-signin-clientid" content="'MY_CLIENT_ID'.apps.googleusercontent.com" />
<meta name="google-signin-scope" content="https://www.googleapis.com/auth/plus.login" />
<meta name="google-signin-requestvisibleactions" content="http://schema.org/AddAction" />
<meta name="google-signin-cookiepolicy" content="single_host_origin" />
<script src="https://apis.google.com/js/client:platform.js" async defer></script>
<script type="text/javascript">
function signinCallback(authResult) {
if (authResult['status']['signed_in']) {
// Update the app to reflect a signed in user
// Hide the sign-in button now that the user is authorized, for example:
document.getElementById('signinButton').setAttribute('style', 'display: none');
} else {
// Update the app to reflect a signed out user
// Possible error values:
// "user_signed_out" - User is signed-out
// "access_denied" - User denied access to your app
// "immediate_failed" - Could not automatically log in the user
console.log('Sign-in state: ' + authResult['error']);
}
}
function render() {
alert("1");
// Additional params including the callback, the rest of the params will
// come from the page-level configuration.
var additionalParams = {
'callback': signinCallback
};
alert("2");
// Attach a click listener to a button to trigger the flow.
var signinButton = document.getElementById('signinButton');
signinButton.addEventListener('click', function() {
gapi.auth.signIn(additionalParams); // Will use page level configuration
alert("3");
});
}
</script>
</head>
<body>
<button id="signinButton">Sign in with Google</button>
</body>
</html>
I have added some alerts, but nothing pops-up and did not used anywhere the 'client secret' password or the JavaScript origins.我添加了一些警报,但没有弹出任何内容,也没有在任何地方使用“客户端机密”密码或 JavaScript 来源。 Also, in the place of 'MY_CLIENT_ID' is actually my client ID.
此外,代替“MY_CLIENT_ID”的实际上是我的客户 ID。
I don't know if this makes any difference, but my site is not yet on a server.我不知道这是否有什么不同,但我的网站还没有在服务器上。 Just working locally (with internet of course!)
只是在本地工作(当然有互联网!)
Do you know what i got wrong?你知道我做错了什么吗?
Check your console, maybe there are some errors.检查您的控制台,也许有一些错误。
Try this example from https://google-developers.appspot.com/+/demos/signin_demo_trigger :从https://google-developers.appspot.com/+/demos/signin_demo_trigger试试这个例子:
<html>
<head>
<title>Google+ Sign-in button demo: JavaScript flow</title>
<style type="text/css">
html, body { margin: 0; padding:0;}
#signin-button {
padding: 5px;
}
#oauth2-results pre { margin: 0; padding:0; width: 600px;}
.hide { display: none;}
.show { display: block;}
</style>
<script type="text/javascript">
var loginFinished = function(authResult) {
if (authResult) {
console.log(authResult);
var el = document.getElementById('oauth2-results');
var label = '';
toggleDiv('oauth2-results');
if (authResult['status']['signed_in']) {
label = 'User granted access:';
gapi.auth.setToken(authResult);
} else {
label = 'Access denied: ' + authResult['error'];
}
el.innerHTML =
label + '<pre class="prettyprint"><code>' +
// JSON.stringify doesn't work in IE8.
'{<br />' +
' "id_token" : "' + authResult['id_token'] +'",<br />' +
' "access_token" : "' + authResult['access_token'] + '",<br />' +
' "state" : "' + authResult['state'] + '",<br />' +
' "expires_in" : "' + authResult['expires_in'] + '",<br />' +
' "error" : "' + authResult['error'] + '",<br />' +
' "error_description" : "' + authResult['error_description'] + '",<br />' +
' "authUser" : "' + authResult['authuser'] + '",<br />' +
' "status" : {"' + '<br />' +
' "google_logged_in" : "' + authResult['status']['google_logged_in'] + '",<br />' +
' "method" : "' + authResult['status']['method'] + '",<br />' +
' "signed_in" : "' + authResult['status']['signed_in'] + '"<br />' +
' }<br />' +
'}</code></pre>';
} else {
document.getElementById('oauth2-results').innerHTML =
'Empty authResult';
}
};
function toggleDiv(id) {
var div = document.getElementById(id);
if (div.getAttribute('class') == 'hide') {
div.setAttribute('class', 'show');
} else {
div.setAttribute('class', 'hide');
}
}
var options = {
'callback' : loginFinished,
'approvalprompt' : 'force',
'clientid' : '841077041629.apps.googleusercontent.com',
'requestvisibleactions' : 'http://schema.org/CommentAction http://schema.org/ReviewAction',
'cookiepolicy' : 'single_host_origin'
};
function startFlow(){
toggleDiv('startFlow');
gapi.auth.signIn(options);
}
</script>
<script src="https://apis.google.com/js/client:platform.js" type="text/javascript"></script>
</head>
<body>
<div id="startFlow">
<a class="button button-blue" href="javascript:startFlow();">Click me</a>
to trigger the sign-in flow with
<a href="/+/web/signin/reference#gapi.auth.signIn"
target="_parent"><code>gapi.auth.signIn()</code></a>
</div>
<div id="oauth2-results" class="hide"></div>
<div style="font: 12px sans-serif, Arial; margin-left: 0.5em; margin-top: 0.5em"><a href="javascript:document.location.reload();">Reload the example</a> or <a
href="/+/demos/signin_demo_trigger" target="_blank">open in a new window</a></div>
</body>
</html>
<!-- Sign in with Google+ only work on working website --> <html lang="en"> <head> <script src="https://apis.google.com/js/platform.js?onload=renderApp" async defer></script> </head> <body> <div class="g-signin2" id="customBtn">Sign in with Google+</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> <script> var renderApp = function() { // GOOGLE_CLIENT_ID should be create from https://developers.google.com/identity/sign-in/web/devconsole-project gapi.load('auth2', function(){ auth2 = gapi.auth2.init({ client_id: 'GOOGLE_CLIENT_ID.apps.googleusercontent.com', cookiepolicy: 'single_host_origin', }); attachSignin('customBtn'); //Function called for click }); }; function attachSignin(customBtn) { auth2.attachClickHandler(customBtn, {}, onSignIn, function(error) { console.log(JSON.stringify(error, undefined, 2)); }); } </script> </body> </html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.