如何使用 OAuth2 客戶端憑據流在 Angular 中獲取訪問令牌

Question

如何使用我的 angular 項目的 oauth2 客戶端憑據在代碼中獲取令牌？ 我在網上找不到任何示例，所以我只是從 postman 獲取令牌並將其粘貼到如下代碼中：

const header = new HttpHeaders({
  'Authorization': 'Bearer bb4229ba-8ece-4cd4-a1cf-720b55d5fc27',
  'Content-Type' : 'application/json'
});

Answer 1

查看 Auth0 的本教程（免責聲明：我不在 Auth0 工作）。 它展示了如何在包括 JS 在內的不同語言中使用客戶端憑據 OAuth 流。

這是您在 Node.js 中的操作方法

var axios = require("axios").default;

var options = {
  method: 'POST',
  url: 'https://YOUR_DOMAIN/oauth/token',
  headers: {'content-type': 'application/x-www-form-urlencoded'},
  data: new URLSearchParams({
    grant_type: 'client_credentials',
    client_id: 'YOUR_CLIENT_ID',
    client_secret: 'YOUR_CLIENT_SECRET',
    audience: 'YOUR_API_IDENTIFIER'
  })
};

axios.request(options).then(function (response) {
  console.log(response.data);
}).catch(function (error) {
  console.error(error);
});

警告

請注意您的問題留下的評論：避免使用客戶端憑據。 這是因為對於公共客戶端（例如移動應用程序或 SPA）使用它是不安全的流程。 CC 應該只用於機器對機器的調用。

另請注意，您應避免自行實現 OAuth 客戶端功能。 有很多圖書館可以為您完成繁重的工作。