2014-11-09 4 views
0

Google API를 사용하기 시작한 순간 어둠 속에서 걷고있는 것처럼 느껴집니다.웹 사이트에서 Google 계정으로 로그인

그것은 매우 일반적인 기능입니다 :

은 내가 뭘 원하는지. 내 사이트에 javascipt를 사용하여 Google 계정 로그인 버튼이 있고 주어진 Gmail이 유효하고 계정에서 일부 기본 정보를 추출 할 수 있도록하고 싶습니다.


는 무엇을 내가 발견

https://developers.google.com/+/web/signin/javascript-flow : 여기에서 지침을 따랐다

.

그리고 지침의 마지막 단계에서 코드를 복사했습니다. '튜토리얼'의 지침을 따랐지만 내 버튼이 작동하지 않는 CLIENT_ID를 입력했습니다. 또한 몇 가지 예를 찾고 Google 사이트에서 찾은 코드와 많이 다릅니다. 나는 내가 뭔가를 놓치고 있다고 느낀다. (실제로 나는 내가 바보 같은 짓을한다고 생각한다.)).


그리고 여기에 내가 몇 가지 경고를 추가 한 내 코드

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

,하지만 아무것도 - 팝 없습니다까지 어디서나 '고객의 비밀'암호 나 자바 스크립트 기원을 사용하지 않았다. 또한 'MY_CLIENT_ID'대신 실제로 내 고객 ID입니다.


이것이 어떤 차이가 있는지는 잘 모르겠지만 내 사이트는 아직 서버에 없습니다. 그냥 로컬에서 일하는 것 (당연히 인터넷으로!)

내가 뭘 잘못했는지 알아?

답변

2

콘솔을 확인하십시오. 오류가있을 수 있습니다.

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> 
+0

불행하게도, 난 이미를했고, 나는 그것이 빈했다 .. – Mario

0

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

관련 문제