HTML을 사용하여 Google 로그인 버튼을 표시하는 방법

<html> 
    <head>  
     <meta name="google-signin-scope" content="profile email"> 
     <meta name="google-signin-client_id" content="MY_CLIENT_ID_ON_GOOGLE_DEV.apps.googleusercontent.com"> 
     <!-- To integrate Google Sign-in --> 
     <script src="https://apis.google.com/js/api.js"></script> 
     <script src="https://apis.google.com/js/platform.js" async defer></script> 
    </head> 
    <body> 
     <div class="g-signin2" data-onsuccess="onSignIn"></div> 
    </body> 
</html>

표시되지 않습니다. 이 HTML 코드 단편의 문제점은 무엇입니까? Google 로그인 버튼을 표시하려면 다른 작업을해야합니까?HTML을 사용하여 Google 로그인 버튼을 표시하는 방법

출처

2017-10-09 Daniele Cappuccio

CHECK : https://developers.google.com/identity/sign-in/web/build-button

<html> 
<head> 
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet" type="text/css"> 
    <script src="https://apis.google.com/js/api:client.js"></script> 
    <script> 
    var googleUser = {}; 
    var startApp = function() { 
    gapi.load('auth2', function(){ 
     // Retrieve the singleton for the GoogleAuth library and set up the client. 
     auth2 = gapi.auth2.init({ 
     client_id: 'YOUR_CLIENT_ID.apps.googleusercontent.com', 
     cookiepolicy: 'single_host_origin', 
     // Request scopes in addition to 'profile' and 'email' 
     //scope: 'additional_scope' 
     }); 
     attachSignin(document.getElementById('customBtn')); 
    }); 
    }; 

    function attachSignin(element) { 
    console.log(element.id); 
    auth2.attachClickHandler(element, {}, 
     function(googleUser) { 
      document.getElementById('name').innerText = "Signed in: " + 
       googleUser.getBasicProfile().getName(); 
     }, function(error) { 
      alert(JSON.stringify(error, undefined, 2)); 
     }); 
    } 
    </script> 
    <style type="text/css"> 
    #customBtn { 
     display: inline-block; 
     background: white; 
     color: #444; 
     width: 190px; 
     border-radius: 5px; 
     border: thin solid #888; 
     box-shadow: 1px 1px 1px grey; 
     white-space: nowrap; 
    } 
    #customBtn:hover { 
     cursor: pointer; 
    } 
    span.label { 
     font-family: serif; 
     font-weight: normal; 
    } 
    span.icon { 
     background: url('/identity/sign-in/g-normal.png') transparent 5px 50% no-repeat; 
     display: inline-block; 
     vertical-align: middle; 
     width: 42px; 
     height: 42px; 
    } 
    span.buttonText { 
     display: inline-block; 
     vertical-align: middle; 
     padding-left: 42px; 
     padding-right: 42px; 
     font-size: 14px; 
     font-weight: bold; 
     /* Use the Roboto font that is loaded in the <head> */ 
     font-family: 'Roboto', sans-serif; 
    } 
    </style> 
    </head> 
    <body> 
    <!-- In the callback, you would hide the gSignInWrapper element on a 
    successful sign in --> 
    <div id="gSignInWrapper"> 
    <span class="label">Sign in with:</span> 
    <div id="customBtn" class="customGPlusSignIn"> 
     <span class="icon"></span> 
     <span class="buttonText">Google</span> 
    </div> 
    </div> 
    <div id="name"></div> 
    <script>startApp();</script> 
</body> 
</html>

출처

2017-10-10 13:01:37

HTML을 사용하여 Google 로그인 버튼을 표시하는 방법

답변

관련 문제