HTML 준비

haml

%section
  .container
    .container-nest
      %p.google-log Log in With Google
      %button.btn.red#authorize-button
        Log in
      %button.btn.red#signout-button
        Log Out
　　　 %br/
      #content
        .row
          .col.s6
            %form#channel-form
              .input-field.col.s6
                %input#channel-input{:placeholder => "Enter Channel Name", :type => "text"}
                %input.btn.grey.lighten-2#submits__btn{:type => "submit", :value => "Get Channel Data"}
          .col.s6#channel-data
        .row#video-container

%script{:src => "/assets/youtube.js", :type => "text/javascript"}

%script{:onload => "this.onload=function(){};handleClientLoad()", :onreadystatechange => "if (this.readyState === 'complete') this.onload()", :src => "https://apis.google.com/js/api.js"}

id#content 이하 script까지는 이번 필요하지 않은 html입니다만 최종장에서 사용하므로 기술해 두어 주세요.

자바스크립트 설명

자바 스크립트를 작성합니다.
참고 : htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / 요츠 베 / v3 / 쿠이 cks rt / js

main.js

//登録したOAuth 2.0クライアントIDをCLIENT_IDに入力
var CLIENT_ID = 'YOUR_CLIENT_ID';
var DISCOVERY_DOCS = ["https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest"];
var SCOPES = "https://www.googleapis.com/auth/youtube.readonly";

haml에 기술한 DOM의 취득을 변수에 정의해 갑니다.
로그인 버튼과 로그아웃 버튼의 DOM도 취득하고 있습니다만, 최종장에서 사용하므로, 단번에 기술하고 있습니다.

main.js

//ログインボタン要素取得
var authorizeButton = document.getElementById('authorize-button');
//ログアウトボタン要素取得
var signoutButton = document.getElementById('signout-button');
var content = document.getElementById('content');
var channelForm = document.getElementById('channel-form');
var channelInput = document.getElementById('channel-input');
var videoContainer = document.getElementById('video-container');
//デフォルトで表示するチャンネルが代入された変数
var defaultChannel = 'techguyweb';

Google 로그인 인증

main.js

//auth2ライブラリの読み込み
  function handleClientLoad(){
    gapi.load('client:auth2' , initClient);
  }


  function initClient(){
    gapi.client.init({
      discoveryDocs: DISCOVERY_DOCS,
      clientId: CLIENT_ID,
      scope: SCOPES
    }).then(() => {

      gapi.auth2.getAuthInstance().isSignedIn.listen(updateSigninStatus);

      updateSigninStatus(gapi.auth2.getAuthInstance().isSignedIn.get());
      authorizeButton.onclick = handleAuthClick;
      signoutButton.onclick = handleSignoutClick;
    });
  }

handleAuthClick 및 handleSignoutClick 함수는 나중에 추가합니다.
이제 다음에 로그인한 상태와 로그아웃한 상태에서 요소의 표시를 변경합니다.

main.js

function updateSigninStatus(isSignedIn) {
    if(isSignedIn){
      authorizeButton.style.display = 'none';
      signoutButton.style.display = 'block';
      content.style.display = 'block';
      videoContainer.style.display = 'inline-block';

    } else {
      authorizeButton.style.display = 'block';
      signoutButton.style.display = 'none';
      content.style.display = 'none';
      videoContainer.style.display = 'none';

    }
  }

로그인한 상태에서는 로그인 버튼이 display:none;로 로그아웃 버튼과 크리에이터 정보나 동영상을 표시하는 콘텐츠 상자는 display:block;로 둡니다.
로그아웃한 상태에서는 그 반대입니다.

main.js

//サインイン
function handleAuthClick(){
  gapi.auth2.getAuthInstance().signIn();
}

//サインアウト
function handleSignoutClick(){
  gapi.auth2.getAuthInstance().signOut();
}

handleAuthClick은 authorizeButton을 클릭했을 때 움직이는 함수입니다.
handleSignoutClick은 signoutButton을 클릭했을 때 움직이는 함수입니다.
이것으로 일련의 흐름이 생겼으므로 완성품을 봐 주세요.

완제품

이것으로 Google 인증이 완료되었습니다.
이제 여기에서 YouTubeAPI를 사용하여 채널 정보 검색 기능을 구현할 것입니다.
마지막 장 : YouTubeAPI를 사용한 채널 정보 검색 기능