Google 버튼과 통합 사용을 통한 드라이브 도입

adminG Suite 개발정보
  • 구글과 통합 버튼을 방문자가 G 스위트와 웹의 아무 곳에서 공개적으로 볼 응용 프로그램을 통합 할 수 있습니다.
  • 관리자는 도메인에 앱을 설치하기 위해 버튼을 클릭하기만 하면됩니다.

시작하기

일반적으로 Google과 통합 단추를 렌더링하려면 버튼을 렌더링하는 데 필요한 JavaScript 리소스를 포함시킨 다음 사이트의 HTML에서 단추를 원하는 위치를 지정하십시오. 버튼을 G Suite Marketplace 목록에 연결하는 매개 변수도 제공합니다.

이 섹션에서 설명하는 버튼을 렌더링하는 데는 여러 가지 방법이 있습니다.

  • 태그 마크 업
  • HTML5 마크 업
  • 자바 스크립트

가장 간단한 경우는 태그를 태그 로 렌더링하는 것 입니다.

태그 마크 업과 함께 렌더링

태그 마크 업을 사용하여 렌더링하려면 platform.js스크립트를 포함시키고 Google과 통합 버튼을 렌더링 <g:additnow>할 위치에 태그 를 놓습니다. 이 태그 의 속성은 통합 할 응용 프로그램을 지정합니다. 이 속성에 대한 자세한 내용은 Google 버튼 태그 속성과 통합을 참조하십시오 .applicationid

다음 예제에서는 태그 마크 업을 사용하여 버튼을 렌더링하는 간단한 예제를 보여줍니다.

<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<g:additnow applicationid="your-app-id"></g:additnow>

스크립트는 https로 제공되어야하며 페이지의 어느 지점 에나 포함될 수 있습니다.

HTML5 마크 업과 함께 렌더링

태그 마크 업의 대안으로 표준 HTML5 마크 업을 사용하여 Google과 통합 버튼을 지정할 수 있습니다 . HTML5 마크 업을 사용하려면 platform.jsHTML 요소에 사용 된 클래스를 포함 하고 설정하십시오 g-additnow.

다음 예제는 HTML5 마크 업을 사용하여 Google과 통합 버튼 을 렌더링하는 간단한 경우를 보여줍니다 .

<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>
<div class="g-additnow" data-applicationid="your-app-id"></div>

자바 스크립트로 렌더링

(가) 렌더링에 의해 구글과 통합 자바 스크립트와 버튼, 당신은 당신의 페이지에있는 모든 요소를 대상으로하고 프로그래밍이 Google 버튼과 통합 렌더링 할 수 있습니다.

JavaScript로 Integrate with Google 단추 를 렌더링하려면 먼저 JavaScript 파일을 포함하십시오.

<script type="text/javascript" src="https://apis.google.com/js/platform.js"></script>

JavaScript 파일을 포함시킨 후에는 HTML 컨테이너를 지정하여 Google과 통합 버튼 처럼 렌더링해야합니다 . 예를 들면 다음과 같습니다.

<div id="placeholder-div"></div>

마지막으로 gapi.additnow.render()다음 을 사용하여 버튼을 렌더링합니다 .

<script>gapi.additnow.render('placeholder-div', { 'applicationid': 'your-app-id' });</script>

gapi.additnow.render메소드에 전달 된 첫 번째 매개 변수는 Google과 통합 버튼 을 호스팅하는 데 사용되는 대상 HTML 컨테이너를 허용 합니다. 두 번째 매개 변수는 시작할 앱, 모드 및 기타 정보를 나타내는 매개 변수가 들어있는 객체입니다. 자세한 내용 은 Google과 통합 버튼 속성을 참조하십시오 .

스크립트를 비동기적으로로드하기

향상된 페이지로드 시간을 위해 JavaScript를 비동기 적으로로드해야합니다. 이 방법을 사용하면 브라우저가 페이지와 JavaScript 파일을 동시에로드 할 수 있습니다. 최고의 성능을 얻으려면 \</body>태그 앞에 다음 JavaScript를 추가하십시오 .

<script type="text/javascript">
  (function(w) {
    if (!(w.gapi && w.gapi._pl)) {
      var d = w.document;
      var po = d.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/platform.js?onload=onLoadCallback';
      var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    }
  })(window);
</script>

모든 종속성이 로드된 후 비동기 로딩을 사용하여 코드 실행을 시작할 때 onload 콜백을 사용할 수 있습니다.

JavaScript를 비동기 적으로로드 할 때 스크립트 태그 매개 변수를 다르게 지정해야합니다. 다음 구문을 대신 사용하십시오.

<script type="text/javascript">
  window.___gcfg = {
    parsetags: 'onload'
  };
  (function(w) {
    if (!(w.gapi && w.gapi._pl)) {
      var d = w.document;
      var po = d.createElement('script'); po.type = 'text/javascript'; po.async = true;
      po.src = 'https://apis.google.com/js/platform.js?onload=onLoadCallback';
      var s = d.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
    }
  })(window);
</script>

Google 버튼 매개 변수 및 속성과 통합

(가) 구글과 통합 사용자가 버튼을 클릭하면 버튼이 버튼을 구성하는 속성을 포함, 콜백에서 반환되는 버튼과 관련된 응용 프로그램 및 속성은 트리거.

스크립트 태그 매개 변수

이 매개 변수는 <script />요소 내에 정의됩니다 . 매개 변수는 전체 웹 페이지에서 사용되는 버튼로드 메커니즘을 제어합니다.

키 값 태만 기술
parsetags explicit,onload onload 사용할 로딩 메커니즘을 설정합니다.

짐을 싣다
페이지의 모든 버튼과 통합 버튼은 페이지가로드 된 후 자동으로 렌더링됩니다. 지연된 실행 onLoad 예제를 참조하십시오 .
명백한
Google 버튼과의 통합은 gapi.additnow.go 또는에 대한 명시 적 호출만으로 렌더링됩니다 gapi.additnow.render.당신이 사용하는 경우 explicit와 함께 부하 go와 render페이지의 특정 컨테이너를 가리키는 호출하면 버튼 렌더링 시간을 향상시킬 수 있습니다 전체 DOM을 통과에서 스크립트를 방지 할 수 있습니다. gapi.additnow.go 및 gapi.additnow.render 예제를 참조하십시오 .

Google 버튼 태그 속성과 통합

다음 태그 속성은 Google과 통합 버튼 을 초기화하는 데 사용됩니다 . 관리자가 버튼을 클릭 할 때 설치 될 앱을 지정합니다.

매개 변수 유형 기술
applicationid 번호 버튼이 통합 할 응용 프로그램을 지정합니다. 이 번호는 프로젝트 번호이며 G Suite Marketplace API 구성의 응용 프로그램 ID 필드에 있습니다.

JavaScript API 메소드

Google과 통합 버튼 JavaScript는 gapi.additnow네임 스페이스 아래에 두 개의 버튼 렌더링 함수를 정의 합니다. parsetags” explicit” 로 설정 하여 자동 렌더링을 사용하지 않으면 이러한 기능 중 하나를 호출해야합니다 .

방법 기술
gapi.additnow.render(
 container,
 parameters
)		 지정된 컨테이너를 Google과 통합 버튼으로 렌더링합니다.

컨테이너
컨테이너는 Google과 통합 버튼으로 렌더링합니다. 컨테이너의 ID (문자열) 또는 DOM 요소 자체를 지정하십시오.
매개 변수들
key = value 쌍으로 태그 속성 을 포함하는 객체 입니다 (예 : {"width": "300", "theme": "light"}.
gapi.additnow.go(
 opt_container
)		 모두 렌더링 지정된 컨테이너의 Google 버튼 태그 및 클래스와 통합합니다. 이 기능은 (으)로 parsetags 설정된 경우에만 사용해야하며 explicit이는 성능상의 이유로 할 수 있습니다.

opt_container
렌더링 할 Google과 통합 버튼 태그가 포함 된 컨테이너입니다. 컨테이너의 ID (문자열) 또는 DOM 요소 자체를 지정하십시오. 이 opt_container매개 변수를 생략하면 페이지의 모든 Google 통합 단추 태그가 렌더링됩니다.

예제들

다음 섹션에서는 Google과 통합 버튼을 사용하는 방법의 간단한 예를 보여줍니다 .

HTML5 마크 업을 사용하는 기본 페이지

<html>
  <head>
    <title>Integrate with Google button demo</title>
    <script type="text/javascript" src="https://apis.google.com/js/platform.js">
    </script>
  </head>
  <body>
    <g:additnow applicationid="YOUR-APP-ID"></g:additnow>
  </body>
</html>

사용자 정의 태그 마크 업이있는 기본 페이지

<html>
  <head>
    <title>Integrate with Google button demo: custom tag</title>
    <script type="text/javascript" src="https://apis.google.com/js/platform.js">
    </script>
  </head>
  <body>
    <g:additnow applicationid="your-app-id"”></g:additnow>
  </body>
</html>