API 中加入身分驗證

外掛欄位 API 驗證流程¶

外掛欄位 API 驗證流程先透過自訂的 httpHandler 處理加上和 API 溝通的 signature，送給 API 處理比對通過後再回傳 API 的 response 給前端。

外掛欄位自訂的 HttpHandler 處理¶

外掛欄位前端可在 NgModule 中加入自訂的 http 控制呼叫 API 時處理 Request header 資訊在送給 API 後端驗證。

advanced-field.module.ts

@NgModule({
  imports :[
    CommonModule,
    FormsModule,
    ReactiveFormsModule
  ],
  providers: [
    UofxPluginApiService,
    { provide: BASIC_HTTP_HANDLER, useClass: EmployeeHttpHandler },
    BasicHttpClient,
    EmployeeService
  ]
})

EmployeeHttpHandler處理呼叫後端 API 時在 Request header 一律加上和 API 驗證使用的簽章內容，透過前後端溝通好的 key 對時間用「HMACSHA256」產出簽證(signature)後再將資訊放到 header 上傳到 API 進行比對。

employee.handler.ts

/** 設定 Http Request Header  */
private setSignatureHeader(): HttpHeaders {
  const message = new Date().toISOString();
  const apiKey = 'SampleAdvanced';
  const signature = CryptoJS.HmacSHA256(message, apiKey).toString();

  return new HttpHeaders({
    'X-Timestamp': message,
    'X-Signature': signature,
  });
}

外掛欄位 API Middleware 驗證¶

Http request 傳送過來 API 後端時，外掛欄位加上檢查 Http header 的「Middleware」，驗證外掛欄位傳送的簽章資訊是否合法。

Program.cs

app.UseRouting();

app.UseCors(MyAllowSpecificOrigins);
app.UseMiddleware<ApiSignatureMiddleware>();

ApiSignatureMiddleware.cs

public async Task Invoke(HttpContext context)
{
  if( !context.Request.Headers.TryGetValue("X-Signature", out var signature))
  {
    context.Response.StatusCode = 401;
    await context.Response.WriteAsync("signature was not provided");
    return;
  }
  // 首先將它們依照指定格式組成字串後，
  // 接下來拿 API Key 作為 Key 使用 HMAC - SHA256 計算出 Signature
  var compareSignature = times.ToString().HMACSHA256(apikey);
  var requestsignature = signature;
  if (requestsignature != compareSignature)
  {
    context.Response.StatusCode = 401;
    await context.Response.WriteAsync("Signature verify fail.");
    return;
  }
}