Spring Boot 2，Angular 8 - 從前端與 /oauth/token 通信的問題

Question

在網上找了一個關於Spring Boot 2和oauth2的教程，一直在學習。 本教程涉及后端，使用數據庫對用戶進行身份驗證。 當我使用 Postman 測試它時，它工作正常。 問題是前端與后端的通信。

以下是我從中學習的教程中的詳細信息：

當我嘗試從 Angular 登錄時：

登錄.component.html

onSubmit() {
if (this.loginForm.invalid) {
  return;
}
const body = new HttpParams()
  .set('username', this.loginForm.controls.username.value)
  .set('password', this.loginForm.controls.password.value)
  .set('grant_type', 'password');

this.info.login(body.toString()).subscribe(data => {

     }
)

服務.ts

login(loginPayload) {

const headers = {

  'grant_type':'password',
  'username':'user',
  'password':'pass'
}

return this.httpClient.post('http://localhost:9191/' + 'oauth/token', loginPayload, {headers});

}

沒有來自后端的通信，什么也沒有發生。 CORS 配置存在較早的問題，但我解決了這個問題。 我現在與后端的唯一通信是來自 Postman 級別的 - 我輸入密碼，接收令牌並獲得訪問權限。

它有什么不對的地方？

教程中的詳細信息。

我將此 CORSFilter 添加到配置包中：

@Component
@Order(Ordered.HIGHEST_PRECEDENCE)
public class CORSFilter implements Filter {

public CORSFilter() {
}

@Override
public void doFilter(ServletRequest req, ServletResponse res, 
    FilterChain chain) throws IOException, ServletException {
    HttpServletResponse response = (HttpServletResponse) res;
    HttpServletRequest request = (HttpServletRequest) req;
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE, PUT");
    response.setHeader("Access-Control-Max-Age", "3600");
  //  response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization, x-auth-token, origin, content-type, accept");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with, authorization, x-auth-token, username, grant_type, password, origin, content-type, accept");


    if ("OPTIONS".equalsIgnoreCase(request.getMethod())) {
        response.setStatus(HttpServletResponse.SC_OK);
    } else {
        chain.doFilter(req, res);
    }
}

@Override
public void init(FilterConfig filterConfig) {
}

@Override
public void destroy() {
}
}

郵差：

http://localhost:9191/oauth/token

grant_type:password,
username:suranga,
password:spass

以上返回生成的令牌

{
    "access_token": "1bd8465d-d1a8-428f-8366-a3d4fd2909d7",
    "token_type": "bearer",
    "refresh_token": "692dfd38-e8dc-4333-8e64-9c0ee78fd5a9",
    "expires_in": 3514,
    "scope": "READ WRITE"
}

並使用上面生成的令牌：

http://localhost:9191/oauth/check_token?token=1bd8465d-d1a8-428f-8366-a3d4fd2909d7

使用基本身份驗證：

username: Mobile
password: pin

我可以訪問這些信息：

{
    "aud": [
        "inventory",
        "payment"
    ],
    "user_name": "suranga",
    "scope": [
        "READ",
        "WRITE"
    ],
    "active": true,
    "exp": 1583590024,
    "authorities": [
        "update_profile",
        "ROLE_operator",
        "read_profile"
    ],
    "client_id": "mobile"
}

Answer 1

我沒有很多關於你的后端服務器實現的細節。

你能檢查一下並在下面試試這個嗎？ 打開 Chrome 開發者工具並檢查網絡選項卡以跟蹤執行的 HTTP POST 請求。

oauth-response.model.ts

export interface OAuthResponse {
  access_token: string,
  refresh_token: string,
  scope: string,
  token_type: string
}

oauth.service.ts

const clientId: 'my-client-id'; // should come from environment.ts file
const secret: 'my-secret';  // should come from environment.ts file 

...

login(username: string, password: string): Observable<OAuthResponse> {
  let params = new HttpParams()
    .set('username', username)
    .set('password', password)
    .set('grant_type', 'password');

  return this.httpClient.post<OAuthResponse>('http://localhost:9191/oauth/token', params.toString(), {
    headers: {
      'Content-type': 'application/x-www-form-urlencoded; charset=utf-8',
      'Authorization': `Basic ${clientId}:${secret}`
    }
  });
}

登錄.component.ts

onSubmit() {
  ...
  const username = this.loginForm.value['username'];
  const password = this.loginForm.value['password'];

  this.oauthService.login(username, password).subscribe(response => {
    const accessToken = response.access_token;
  });
)