typescript 使用具有Angular 堆栈的REST风格API

axr492tv  于 2022-12-14  发布在  TypeScript
关注(0)|答案(1)|浏览(117)

我有一个Angular 12 Web应用程序,我需要使用客户端ID和API密钥来显示受OAUTH 2.0保护的RESTful API中的数据。什么是安全和标准的实现方法?任何建议、示例或教程都会很有帮助。

ulmd4ohb

ulmd4ohb1#

在授权标头中指定了一个与OAuth不记名令牌一起使用的不记名类型(意味着客户端应用程序只需提供(“承载”)令牌)。标头的值是客户端从授权服务器接收的访问令牌。
创建一个HTTP帮助器并在其中添加以下代码,

constructor(
    private http: HttpClient
  ) {}

postWithToken(url: string, params: object): Observable<any> {
  let headers = new HttpHeaders({
    "Content-Type": "application/json",
    "Access-Control-Allow-Methods": "*",
    "Access-Control-Allow-Origin": "*",
    Authorization: "Bearer AYjcyMzY3ZDhiNmJkNTY",
  });
  return this.http
    .post<any>("http://localhost/"+ url, params, {
      headers: headers,
    })
    .pipe(
      tap(
        (data) => {
          return data;
        },
        (error) => {
          if (error.status == 500) {
            console.log("No valid Session Exists");
            return;
          } else {
            console.log("Internal server error!", 3000);
            return;
          }
        }
      )
    );}

地点

AYjcyMzY3ZDhiNmJkNTY

是您的OAuth访问令牌。此令牌可以从浏览器cookie或会话读取。
您可以从service.js文件中调用它

httpService
  .postWithToken("YOUR API END-POINT", requestBody)
  .subscribe((data) => {
    if (
      data.httpStatusCode == 200 &&
      data.data != null &&
      data.data != undefined
        ) {
//your code here to display the data from BE server
}

相关问题