Как получить доступ к клиенту DialogFlow Node Js в приложении Angular?

Question

Я новичок в Angular.Я пытаюсь реализовать DialogFlow в приложении Angular, которое имеет только окно чата.Я звоню Dialogflow Detect Intent Api in dialogflow.service.ts, который работает нормально.Моя проблема в том, что я не могу программно реализовать токен.Теперь я меняю токен вручную, когда он истекает.

Я только что видел это , которое показывает реализацию без генерации токена.Но это в узле JS.Я не знаю, как код узла js будет взаимодействовать с моим угловым приложением.Есть ли какой-нибудь другой метод, который я могу реализовать в своем угловом приложении, который генерирует токены или не требует генерации токенов.

Я просто хочу, чтобы мое угловое приложение связывалось с DialogFlow V2 api с помощью автоматической генерации токенов из облака Google.console.

dialogflow.service.ts

import { Http, Headers } from '@angular/http';
import { map } from 'rxjs/operators';
import { environment } from './../../environments/environment';
import { Injectable } from '@angular/core';


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

  private userSession = new Date();
  private userSessiontoken = this.userSession.getTime();

  private baseURL: string = `https://dialogflow.googleapis.com/v2beta1/projects/projectID/agent/sessions/${this.userSessiontoken}:detectIntent`;
  private token: string = environment.token;

  constructor(private http: Http){}

  public getResponse(query: string){

    let data = {
      "queryInput": {
        "text": {
          "text": query,
          "languageCode": "en"
        }
      }
    }
    return this.http
      .post(`${this.baseURL}`, data, {headers: this.getHeaders()})
      .pipe(map(res => {
        console.log(res);
        return res.json()
      }))
  }

  public getHeaders(){
    let headers = new Headers();
    headers.append('Authorization', `Bearer ${this.token}`);
    headers.append('Content-Type', `application/json`);
    return headers;
  }
}

message.service.ts

import { Message } from '../models/message';
import { Subject } from 'rxjs';
import { Injectable, Input } from '@angular/core';
import { DialogflowService } from './dialogflow.service';

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

    private messages: Message[] = [];
    private messagesUpdated = new Subject<Message[]>();

    loader: boolean = false;
    loaderChange: Subject<boolean> = new Subject<boolean>();

    constructor(private service: DialogflowService) { }

    addMessage(message: string) {

        const fullmessage: Message = {textContent:message,content: [],avatar: 'assets/images/user.png',self:true,action: 'nochip',timestamp: new Date()};
        this.messages.push(fullmessage)
        this.messagesUpdated.next([...this.messages]);

        var outputResult: string[] = [];
        var outputText: string;
        var action: string;
        var webhookStatus: any;
        var webhookStatusCode: string;

        this.service.getResponse(message).subscribe(res => {
            action = res.queryResult.action;

            if (res.queryResult['webhookStatus']) {
                webhookStatus = res.queryResult.webhookStatus
                if (webhookStatus['code']) {
                    webhookStatusCode = webhookStatus.code
                    console.log('status' + webhookStatusCode);
                }
            }

            outputText = res.queryResult.fulfillmentText;
            res.queryResult.fulfillmentMessages.forEach(element => {
              element.text.text.forEach(subelement => {
                outputResult.push(subelement)
              });
          });
        const serverMessage: Message = {textContent:outputText,content: [],avatar: 'assets/images/logo.png',self:false,action:'',timestamp: new Date()};
        this.messages.push(serverMessage)
        this.messagesUpdated.next([...this.messages]);

        if (webhookStatusCode) {
            return;
        }

        if (action == 'input.welcome') {
            return;
        }

        const userMessage: Message = {textContent:'',content: [],avatar: 'assets/images/user.png',self:true,action:'chip',timestamp: new Date()};
        this.messages.push(userMessage)
        this.messagesUpdated.next([...this.messages]);

        this.getLoader();

        });

    }


}

Answer 1

У меня такая же проблема, как и у вас.Я хочу создать простое приложение с угловым и диалоговым потоком, но это сложно с диалоговым потоком V2, потому что документация не очень полезна.

Мне удается создать приложение диалогового потока с этим учебным пособием , если оно можетпомочь тебе.Но у меня есть проблема с загрузкой его в мой хостинг, и он слишком сложен для целей моего приложения.