Angular 6 - всплывающее окно Google Picker API

Возможность доступа к Google Picker только время от времени. Всплывающее окно Google Picker открывается не каждый раз, когда я открываю приложение.

Я реализую Google Picker API в Angular 6. Я сохранил отдельный файл для логики подключения Google API в папке ресурсов angular и с помощью document.createElement ("script") добавил файл javascript. И у меня есть тег Anchor для getElementById в app.component.html.

app.component.html

<a routerLink="/" id="AllFilePick" #AllFilePick> Button </a>

app.component.ts

    import { Component, ViewChild, ElementRef, OnInit } from '@angular/core';


    @Component({
      selector: 'app-root',
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.scss']
    })


    export class AppComponent implements OnInit {

      @ViewChild('AllFilePick') AllFilePick: ElementRef;

      constructor(private elementRef: ElementRef) { }


      ngOnInit() { 

        var s1 = document.createElement("script");
        s1.type = "text/javascript";
        s1.src = "../assets/api-script.js";
        this.elementRef.nativeElement.appendChild(s1);

        var s2 = document.createElement("script");
        s2.src = "https://www.google.com/jsapi?key=<API_KEY>";
        this.elementRef.nativeElement.appendChild(s2);

        var s3 = document.createElement("script");
        s3.src = "https://apis.google.com/js/client.js?onload=SetPicker";
        this.elementRef.nativeElement.appendChild(s3);

        // console.log(this.AllFilePick.nativeElement);
        console.log(s1);
        console.log(s2);
        console.log(s3);

      }
    }

Я даже пробовал использовать ngAfterViewInit, конструктор для добавления тега скрипта.

assets / api-script.js

    function SetPicker() {
        var picker = new FilePicker(
            {
                apiKey: ‘<API_KEY>’, 
                clientId: ‘<CLIENT_ID>’,
                buttonEl: document.getElementById("AllFilePick"),
                onClick: function (file) {             
                    PopupCenter('https://drive.google.com/file/d/' + file.id + '/view', "", 1026, 500);
                }
            }
        );
    }

    function PopupCenter(url, title, w, h)
    {
       //.....
    }

    function FilePicker(User)
    {
        //Configuration 
        //....
    }

Приведенный выше код полной версии работает правильно, но всплывающее окно открывается редко, время от времени. Всплывающее окно срабатывает только после обновления приложения несколько раз или открытия приложения на следующий день. Picker не работает регулярно в Angular.


typescript javascript angular google-api google-picker
person Arun Sathish    schedule 25.07.2018    source источник

Ответы (3)


arrow_upward
5
arrow_downward

В index.html

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

В файле шаблона компонента (.html).

<button (click)="loadGoogleDrive()"><G-Drive</button>
In Component (.ts file).

import { Component } from '@angular/core';
declare var gapi: any;
declare var google: any;

@Component({
  selector: 'app-selector',
  templateUrl: './app-selector.component.html',
  styleUrls: ['./app-selector.component.css']
})
export class GoogleDriveSelectorComponent {

  developerKey = 'developer/API key here';
  clientId = "client_id"
  scope = [
    'profile',
    'email',
    'https://www.googleapis.com/auth/drive'//insert scope here
  ].join(' ');
  pickerApiLoaded = false;
  oauthToken?: any;

  loadGoogleDrive() {
    gapi.load('auth', { 'callback': this.onAuthApiLoad.bind(this) });
    gapi.load('picker', { 'callback': this.onPickerApiLoad.bind(this) });
  }

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

  onPickerApiLoad() {
    this.pickerApiLoaded = true;
  }

  handleAuthResult(authResult) {
    let src;
    if (authResult && !authResult.error) {
      if (authResult.access_token) {
        let view = new google.picker.View(google.picker.ViewId.DOCS);
        view.setMimeTypes("image/png,image/jpeg,image/jpg,video/mp4");
        let pickerBuilder = new google.picker.PickerBuilder();
        let picker = pickerBuilder.
          enableFeature(google.picker.Feature.NAV_HIDDEN).
          setOAuthToken(authResult.access_token).
          addView(view).
          addView(new google.picker.DocsUploadView()).
          setCallback(function (e) {
            if (e[google.picker.Response.ACTION] == google.picker.Action.PICKED) {
              let doc = e[google.picker.Response.DOCUMENTS][0];
              src = doc[google.picker.Document.URL];
              console.log("Document selected is", doc,"and URL is ",src)
            }
          }).
          build();
        picker.setVisible(true);
      }
    }
  }

}

person Atif Zia    schedule 12.10.2018

arrow_upward
0
arrow_downward

нажмите здесь Как реализовать вход с помощью Google в Angular 2 с помощью Typescript и просто создайте index.html в папке вашего приложения, и вы на 100% решите эту проблему, потому что такая же проблема была у меня.

person Sid    schedule 09.08.2018
comment
Если вы считаете, что это дублированный вопрос из вопроса, на который вы указали ссылку, используйте кнопку «ФЛАГ», чтобы пометить его как дубликат. - person sertsedat; 09.08.2018

arrow_upward
0
arrow_downward

В Index.html

<script type="text/javascript" src="https://apis.google.com/js/api.js?onload=loadPicker"></script>

Создайте такую ​​службу, как googleDrivePickerService (.service.ts)

import {Injectable} from '@angular/core';

declare const gapi: any;
declare const google: any;

@Injectable({
  providedIn: 'root'
})
export class GoogleDrivePickerService {

  private clientId = 'YOUR_CLIEND_ID';
  private apiKey = 'YOUR_API_KEY';
  private appId = 'YOUR_APP_ID';
  private scope = 'https://www.googleapis.com/auth/drive.file',

  private oauthAccessToken = null;
  private pickerApiLoaded = false;
  private pickerCallback = null;

  public open(callback): void {
    this.pickerCallback = callback;
    gapi.load('auth', {'callback': this.onAuthApiLoad.bind(this)});
    gapi.load('picker', {'callback': this.onPickerApiLoad.bind(this)});
  }

  private onAuthApiLoad(): void {
    gapi.auth.authorize({
      'client_id': this.clientId,
      'scope': this.scope,
      'immediate': false,
    }, this.handleAuthResult.bind(this));
  }

  private onPickerApiLoad(): void {
    this.pickerApiLoaded = true;
    this.createPicker();
  }

  private handleAuthResult(authResult): void {
    if (authResult && !authResult.error) {
      this.oauthAccessToken = authResult.access_token;
      this.createPicker();
    }
  }

  private createPicker(): void {
    if (this.pickerApiLoaded && this.oauthAccessToken) {
      let view = new google.picker.View(google.picker.ViewId.DOCS);
      let picker = new google.picker.PickerBuilder()
        .enableFeature(google.picker.Feature.NAV_HIDDEN)
        .enableFeature(google.picker.Feature.MULTISELECT_ENABLED)
        .setAppId(this.appId)
        .setOAuthToken(this.oauthAccessToken)
        .addView(view)
        .addView(new google.picker.DocsUploadView())
        .setDeveloperKey(this.apiKey)
        .setCallback(this.pickerCallback)
        .build();
      picker.setVisible(true);
    }
  }
}

В своем компоненте (.ts) импортируйте службу и добавьте конструктор, а затем, наконец, вызовите функцию open с обратным вызовом.

import {GoogleDrivePickerService} from '../services/googledrivepicker.service';

constructor(
  private googleDrivePickerService: GoogleDrivePickerService
){}

openGoogleDrivePicker(): void {
  this.googleDrivePickerService.open((data) => {
    if (data.action === 'picked') {
      console.log('Picked', data.docs);
    }
  });
}
person b1617    schedule 28.08.2020
comment
Лучший способ авторизоваться во время входа в Google, а затем после того, как нам понадобится файл, просто выбирающий из диалогового окна выбора. - person Alam; 21.06.2021