Question

我是Angular的新手。我正在尝试在只有聊天窗口的Angular应用中实现DialogFlow。我正在dialogflow.service.ts中调用 Dialogflow Detect Intent Api ，它工作正常。我的问题是，我无法以编程方式实现令牌。现在，我要在令牌过期时手动对其进行更改。

我刚刚看到this，其中显示了没有令牌生成的实现。但这是在节点js中。我不知道节点js代码将如何与我的angular应用通信。我可以在我的有角度的应用程序中实现实现令牌生成或不需要令牌生成的任何其他方法。

我只想让我的有角度的应用程序与DialogFlow V2 api通信，并通过Google云控制台自动生成令牌。

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

我和你有同样的问题。我想用angular和dialogflow创建一个简单的应用程序，但是用dialogflow V2很难，因为文档不是那么有用。

如果可以帮助您，我就成功地使用this tutorial创建了一个dialogflow应用。但是我在将其上传到托管服务时遇到了问题，对于我的应用而言，它太复杂了。

如何在Angular应用中访问DialogFlow Node Js客户端？

1 个答案: