META 태그를 사용하지 않고 기본 Google 로그인 버튼을 표시하는 방법은 무엇입니까?

다음 문서에서는 다음 코드를 사용하여 버튼의 기본 구글 기호 ... https://developers.google.com/identity/sign-in/web/sign-in META 태그를 사용하지 않고 기본 Google 로그인 버튼을 표시하는 방법은 무엇입니까?

를 표시하는 방법을 보여줍니다의 로그인 절차 버튼을 잘 보여줍니다.

에

<!DOCTYPE html> 
<html> 
<head> 
    <meta name="google-signin-client_id" content="MYCLIENTID.apps.googleusercontent.com"> 
</head> 
<body> 
    <div class="g-signin2" data-onsuccess="onSignIn"></div> 

    <script src="https://apis.google.com/js/platform.js" async defer 
      onload="this.onload = handleClientLoad()" 
      onreadystatechange="if (this.readyState === 'complete') this.onload()"> 
    </script> 
</body> 
</html>

결과 ...

물품도 CLIENT_ID가 gapi.auth2.init() 메소드에서 지정할 수 언급

. CLIENT_ID가이 방식으로 전달되면 메타 태그가 필요 없다는 의미입니다. 다음 코드로

그래서 ...

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
    <div class="g-signin2" data-onsuccess="onSignIn"></div> 

    <script type="text/javascript"> 
     function handleClientLoad() { 
      gapi.load('client:auth2', initClient); 
     } 

     function initClient() { 
      // Client ID and API key from the Developer Console 
      var CLIENT_ID = 'MY_CLIENT_ID.apps.googleusercontent.com'; 

      // Array of API discovery doc URLs for APIs used by the quickstart 
      var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/calendar/v3/rest"]; 

      // Authorization scopes required by the API; multiple scopes can be 
      // included, separated by spaces. 
      var SCOPES = "https://www.googleapis.com/auth/calendar"; 

      gapi.client.init({ 
       apiKey: 'MY_API_KEY', 
       discoveryDocs: DISCOVERY_DOCS, 
       clientId: CLIENT_ID, 
       scope: SCOPES 
      }).then(function() { 
      }); 
     } 

    </script> 
    <script src="https://apis.google.com/js/platform.js" async defer 
      onload="this.onload = handleClientLoad()" 
      onreadystatechange="if (this.readyState === 'complete') this.onload()"> 
    </script> 
</body> 
</html>

버튼은 표시되지 않습니다.

헤더에 CLIENT_ID가있는 메타 태그를 사용하지 않고 기본 Google 로그인 버튼을 표시하려면 어떻게해야하나요? 또한 CLIENT_ID 및 API_KEY를 웹 페이지에 공개하는 것이 보안 위험입니까? Oauth Restrictions 및 API Key Restrictions가 위험을 완화한다고 생각하십니까?

출처

2017-09-21 John Livermore

대신 OAuth 메서드를 사용하는 것이 좋습니다.

을이 Calendar Quickstart에서 볼 수 있듯이 다음의 OAuth를 구현 : 그냥 버튼에 구글 로그인의 이미지를 얻을.

비공개 웹에 어떤 것도 공개하지 않도록하십시오. 어쩌면 그 로그인 샘플은 테스트 용일 수도 있습니다.

으로는 here 언급 :

우리는 당신의 응용 프로그램이 페이지에 다른 자원에 인증 코드를 노출하지 않도록 앱의 인증 엔드 포인트를 설계하는 것이 좋습니다.

출처

2017-09-22 06:01:21 noogui

Hello noogui, [여기] (https://www.w3schools.com/tags/tag_meta.asp)에 따르면 meta 태그는 현재 웹 페이지에 대한 정보를 제공하는 데 사용됩니다. 그런데 버튼이 나타나야하는 이유는 무엇입니까? 나는 상세히 알고 싶다. 설명해 주시겠습니까? – learner

META 태그를 사용하지 않고 기본 Google 로그인 버튼을 표시하는 방법은 무엇입니까?

답변

관련 문제