Перенесите средство выбора файлов из старой библиотеки платформы Google Sign-In в новую библиотеку Google Identity Services для проверки подлинности

У меня есть код, в котором я читаю данные файла как blob. Я реализовал с использованием старого gapi, как мне перейти со старой библиотеки платформы Google Sign-In на новую библиотеку Google Identity Services для аутентификации.

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
  <head>
    <meta charset = "utf-8" />
    <title>Google Picker Example</title>
    
  </head>
  <body>
    <button id = "authorize_button" style = "display: none;">Authorize</button>
    <button id = "signout_button" style = "display: none;">Sign Out</button>
    <div id = "result"></div>

    <script type = "text/javascript" src = "script.js"></script>
    <script async defer src = "https://apis.google.com/js/api.js"
    onload = "this.onload=function(){};handleClientLoad()"
    onreadystatechange = "if (this.readyState === 'complete') this.onload()">
  </script>
  
  <script>
const API_KEY = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
const CLIENT_ID = '995979103146-6qdmadbu7ha5ptrthsg8uqonkpplvc8e.apps.googleusercontent.com';
const appId = "995979103146";

const SCOPES = ["https://www.googleapis.com/auth/drive"];

const DISCOVERY_DOCS = [
  "https://www.googleapis.com/discovery/v1/apis/drive/v3/rest",
];

const authorizeButton = document.getElementById("authorize_button");
const signoutButton = document.getElementById("signout_button");

// Use the Google API Loader script to load the google.picker script.
function handleClientLoad() {
  gapi.load("client:auth2:picker", initClient);
}

function initClient() {
  gapi.client.init({
      apiKey: API_KEY,
      clientId: CLIENT_ID,
      discoveryDocs: DISCOVERY_DOCS,
      scope: SCOPES[0]
    })
    .then(
      function () {
        // Listen for sign-in state changes.
        gapi.auth2.getAuthInstance().isSignedIn.listen(handleSignIn);

        // Handle the initial sign-in state.
        handleSignIn(gapi.auth2.getAuthInstance().isSignedIn.get());
        authorizeButton.onclick = handleAuthClick;
        signoutButton.onclick = handleSignoutClick;
      },
      function (error) {
        appendPre(JSON.stringify(error, null, 2));
      }
    );
}

function handleSignIn(isSignedIn) {
  if (isSignedIn) {
    authorizeButton.style.display = "none";
    signoutButton.style.display = "block";
    createPicker();
  } else {
    authorizeButton.style.display = "block";
    signoutButton.style.display = "none";
  }
}

function handleAuthClick(event) {
  gapi.auth2.getAuthInstance().signIn();
}

function handleSignoutClick(event) {
  gapi.auth2.getAuthInstance().signOut();
}

function createPicker() {
  const token = gapi.client.getToken().access_token
  if (token) {
    
    let view = new google.picker.View(google.picker.ViewId.DOCS);
    view.setMimeTypes("image/png,image/jpeg,image/jpg");
    let picker = new google.picker.PickerBuilder()
      .enableFeature(google.picker.Feature.NAV_HIDDEN)
      .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
      .setAppId(appId)
      .setOAuthToken(token)
      .addView(view)
      .addView(new google.picker.DocsUploadView())
      .setDeveloperKey(API_KEY)
      .setCallback(getFile)
      .build();
    picker.setVisible(true);
  }
}

function getFile(pickerResp) {
    console.info(JSON.stringify(pickerResp))
    if (pickerResp.action == "picked") {
  gapi.client.drive.files
    .get({
      fileId: pickerResp.docs[0].id,
      alt: 'media'
    })
    .then(resp => {
      console.info("fetch response", resp.status)
      let binary = resp.body
      // EDIT - addition from Gabrielle vvvv
      let l = binary.length
      let array = new Uint8Array(l);
      for (var i = 0; i<l; i++){
        array[i] = binary.charCodeAt(i);
      }
      let blob = new Blob([array], {type: 'application/octet-stream'});
      console.info(blob)
      // EDIT - addition from Gabrielle ^^^^
});
}
}
  </script>
  
  </body>
</html>

google-drive-api google-api-js-client google-identity google-drive-picker

06.05.2022 09:30

Стоит ли изучать PHP в 2026-2027 годах?

Привет всем, сегодня я хочу высказать свои соображения по поводу вопроса, который я уже много раз получал в своем сообществе: "Стоит ли изучать PHP в...

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Приемы CSS-макетирования - floats и Flexbox

Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...

Тестирование функциональных ngrx-эффектов в Angular 16 с помощью Jest

В системе управления состояниями ngrx, совместимой с Angular 16, появились функциональные эффекты. Это здорово и делает код определенно легче для...

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Пользовательский скаляр GraphQL

Листовые узлы системы типов GraphQL называются скалярами. Достигнув скалярного типа, невозможно спуститься дальше по иерархии типов. Скалярный тип...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Гугл выпустил новый Пример кода Я бы начал там смотреть изменения для авторизаотн. Это должно быть просто вопросом замены методов авторизации. Остальной код не меняется.

<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
  <head>
    <meta charset = "utf-8" />
    <title>Google Picker Example</title>

    <script type = "text/javascript">

    // The Browser API key obtained from the Google API Console.
    // Replace with your own Browser API key, or your own key.
    var developerKey = 'xxxxxxxYYYYYYYY-12345678';

    // The Client ID obtained from the Google API Console. Replace with your own Client ID.
    var clientId = "1234567890-abcdefghijklmnopqrstuvwxyz.apps.googleusercontent.com"

    // Replace with your own project number from console.developers.google.com.
    // See "Project number" under "IAM & Admin" > "Settings"
    var appId = "1234567890";

    // Scope to use to access user's Drive items.
    var scope = ['https://www.googleapis.com/auth/drive.file'];

    var pickerApiLoaded = false;
    var oauthToken;

    // Use the Google API Loader script to load the google.picker script.
    function loadPicker() {
      gapi.load('auth', {'callback': onAuthApiLoad});
      gapi.load('picker', {'callback': onPickerApiLoad});
    }

    function onAuthApiLoad() {
      window.gapi.auth.authorize(
          {
            'client_id': clientId,
            'scope': scope,
            'immediate': false
          },
          handleAuthResult);
    }

    function onPickerApiLoad() {
      pickerApiLoaded = true;
      createPicker();
    }

    function handleAuthResult(authResult) {
      if (authResult && !authResult.error) {
        oauthToken = authResult.access_token;
        createPicker();
      }
    }

    // Create and render a Picker object for searching images.
    function createPicker() {
      if (pickerApiLoaded && oauthToken) {
        var view = new google.picker.View(google.picker.ViewId.DOCS);
        view.setMimeTypes("image/png,image/jpeg,image/jpg");
        var picker = new google.picker.PickerBuilder()
            .enableFeature(google.picker.Feature.NAV_HIDDEN)
            .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
            .setAppId(appId)
            .setOAuthToken(oauthToken)
            .addView(view)
            .addView(new google.picker.DocsUploadView())
            .setDeveloperKey(developerKey)
            .setCallback(pickerCallback)
            .build();
         picker.setVisible(true);
      }
    }

    // A simple callback implementation.
    function pickerCallback(data) {
      if (data.action == google.picker.Action.PICKED) {
        var fileId = data.docs[0].id;
        alert('The user selected: ' + fileId);
      }
    }
    </script>
  </head>
  <body>
    <div id = "result"></div>

    <!-- The Google API Loader script. -->
    <script type = "text/javascript" src = "https://apis.google.com/js/api.js?onload=loadPicker"></script>
  </body>
</html>

Не могли бы вы помочь мне с этим, пожалуйста: stackoverflow.com/questions/72150352/…

— 09.05.2022 12:20

06.05.2022 10:47

Ответ принят как подходящий

Реализовать новый Библиотека идентификации Google действительно легко. Поскольку вы можете сравнить здесь, вам нужно изменить только несколько вещей.

Этот пример является самым простым подходом (неявный поток):

Одна кнопка для получения токена
Одна кнопка для загрузки сборщика

<html>
  <body>
    <script
      src = "https://accounts.google.com/gsi/client"
      onload = "initClient()"
      async
      defer
    ></script>

    <script>
      var client;
      var access_token;
      
      function loadPicker() {
      gapi.load('picker', {'callback': ()=>console.info("Picker Loaded")});
    }
      function initClient() {
        client = google.accounts.oauth2.initTokenClient({
          client_id: "<CLIENT_ID>",
          scope:
            "https://www.googleapis.com/auth/drive.file",
          callback: (tokenResponse) => {
            access_token = tokenResponse.access_token;
          },
        });
      }
      function getToken() {
        client.requestAccessToken();
      }
      function revokeToken() {
        google.accounts.oauth2.revoke(access_token, () => {console.info('access token revoked')});
      }
      function onPickerApiLoad() {
        var picker = new google.picker.PickerBuilder()
          .addView(google.picker.ViewId.DOCS)
          .setOAuthToken(access_token)
          .build();
        picker.setVisible(true);
      }
    </script>

    <!-- The Google API Loader script. -->
    <h1>Google Identity Services Authorization Token model</h1>
    <button onclick = "getToken();">Get access token</button><br /><br />
    <button onclick = "onPickerApiLoad()">Load picker</button>
    <script src = "https://apis.google.com/js/api.js?onload=loadPicker"></script>
  </body>
</html>