準備工作
本節(jié)介紹如何將OneAuth 與您的SPA應用集成，使用OneAuth作為SPA應用的用戶存儲庫并實現(xiàn)用戶登錄。
如果您正在構建一個由服務器端渲染的Web應用，參考Web應用集成用戶登錄
前提條件：
已經(jīng)具備了OneAuth的組織賬戶。如果沒有？免費創(chuàng)建
具備基礎的JavaScript開發(fā)經(jīng)驗
有SPA應用或正在構建的工程需要接入認證流程
如果你沒有相關的應用，只是期望學習如何使用，建議參考如下的資料 ：
Vue.js quickstart
教您構建Vue.js應用程序的基礎知識，Vue Quickstart
或者，如果您想快速開始，只需下載一個應用示例，請下載我們的Vue示例。
在OneAuth控制臺創(chuàng)建SPA應用
在您使用OneAuth可以登錄用戶之前，您需要在管理后臺創(chuàng)建一個單頁應用用于的OneAuth的 應用集成。
使用您的管理員帳戶登錄您的OneAuth組織。
在管理后臺，選擇 應用 > 應用
點擊 創(chuàng)建應用
選擇OIDC-Openid Connect認證方式
選擇SPA 單頁面應用 應用類型，點擊下一步
填寫應用名稱，應用描述（可選）
用戶授權方式選擇Authorization Code，這將為您的SPA啟用帶有 PKCE 的授權碼流，并能夠在訪問令牌過期時刷新訪問令牌，而不會提示用戶重新進行身份驗證。
輸入登錄重定向的地址 ，例如，添加本地開發(fā)環(huán)境的地址：
http://localhost:3000/callback,或者生產(chǎn)環(huán)境的地址：https://app.example.com/callback。點擊保存
添加CORS安全域名，選擇API>安全域，點擊添加域，填寫名稱和安全域的URI,例如本地調試環(huán)境
http://localhost:8080, 或者生產(chǎn)環(huán)境的URIhttps://app.example.com在新建的SPA應用的授權用戶 Tab頁面，選擇授權給Everyone或需要限制在某個Group進行訪問。
安裝SDK
npm i --save @oneauth/sdk-core @oneauth/sdk-vue
@oneauth/sdk-core 會提供登錄登出和鑒權所需的方法，@oneauth/sdk-vue 中會提供對路由的鑒權功能和準備好的登錄重定向頁面
@oneauth/sdk-core 可單獨使用。也可搭配@oneauth/sdk-vue 使用。本文使用@oneauth/sdk-core 和 @oneauth/sdk-vue 共同來完成vue2.0的集成。
配置 sdk
初始化時需要傳入 issuer， clientId， redirectUri， scopes， 這些值可以從 oneauth 控制臺得到，
實例化@oneauth/sdk-core 和@oneauth/sdk-vue
import App from "./App.vue";
import router from "./router";
import OneAuth from "@oneauth/sdk-core";
import OneAuthVue from "@oneauth/sdk-vue";
const oneAuth = new OneAuth({
issuer: `kang.oneauth.cn/oauth/v1`,
clientId: `2YXXZ78611K0c8906MX6RJ8c0s84VcQB`,
redirectUri: `http://localhost:8080/callback`,
scopes: ["openid", "profile", "email"],
});
初始化@oneauth/sdk-core
- 登錄
調用oneauth.login，傳入originalUri參數(shù)，則會在登錄完成之后跳轉回這個網(wǎng)址
oneauth.login({
originalUri: 'http://localhost:3000/originalUri',
});
- 登出
調用oneauth.logout
oneauth.logout();
- 獲取 accessToken
const accessToken = oneauth.accessToken;
- 獲取 idToken
const idToken = oneauth.idToken;
- 獲取用戶信息
可傳入泛型，以獲得類型約束
type User = unknown;
const userInfo = await oneauth.getUserInfo<User>();
- 獲取當前用戶的登錄狀態(tài)
/**
* 是否登錄了
**/
const isAuthed = await oneauth.isAuthenticated();
- 校驗從登錄重定向頁面獲取的 code 和 state
登錄之后，oneauth 會重定向到實例化時傳入的redirectUri對應的頁面。
并在 query 中帶上參數(shù)code和state。
將參數(shù)傳入本方法，返回布爾值，標識 code 是否有效
const isValid = await oneauth.verify(code, state);
注入$oneauth
把 @oneauth/sdk-core 實例注入到 Vue 的原型上
Vue.use(OneAuthVue, {
oneAuth,
});
添加登錄按鈕
在頁面中添加一個按鈕，并對其調用
this.$oneauth.login();
<template>
<button @click="login">login</button>
</template>
<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
@Component({
components: {},
})
export default class App extends Vue {
private login() {
this.$oneAuth.login();
}
}
</script>
添加回調路由
從@oneauth/sdk-vue 得到登錄重定向頁面，并配置到路由中。 路由的路徑需要與@oneauth/sdk-core 的實例化參數(shù)redirectUri一致。
import { LoginCallback } from "@oneauth/sdk-vue";
const routes: Array<RouteConfig> = [
{
path: "/callback",
component: LoginCallback,
},
];
對特定路由進行認證鑒權
從@oneauth/sdk-vue 中獲取導航守衛(wèi)navigationGuard，并配置到路由中。
在需要鑒權的路由的 meta 中配置 auth 屬性這樣，在打開該路由時都會檢查是否登錄了。
如果沒有登錄則會跳轉到登錄頁,登錄完成后會跳轉回來。
import { LoginCallback, navigationGuard } from "@oneauth/sdk-vue";
const routes: Array<RouteConfig> = [
{
path: "/callback",
component: LoginCallback,
},
{
path: "/about",
name: "About",
meta: {
auth: true,
},
component: () => import("../views/About.vue"),
},
];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
routes,
});
router.beforeEach(navigationGuard);
export default router;
SPA與刷新令牌（Refresh token）
作為公共客戶端實現(xiàn)的單頁應用（SPA）程序，無法安全地在瀏覽器中存儲和處理刷新令牌，因此必須使用不依賴刷新令牌的方法，除非其授權服務器對刷新令牌的泄漏風險采取了安全措施（如使用刷新令牌輪換或具有使用約束條件的刷新令牌）。在許多情況下，尤其是對于公共客戶機的SPA應用，發(fā)行到期時間較短的訪問令牌并在需要時更新令牌被認為是一種最佳做法，因此在用戶會話存在的整個過程中都可能需要更新新令牌。
但是，將用戶重定向到OpenID提供方并返回會帶來用戶體驗的挑戰(zhàn)，有可能會中斷用戶的體驗，因此通常不希望在正常導航期間將用戶重定向到登錄頁面。為了避免這種破壞性重定向，一個改進的措施是在應用程序中使用隱藏的iframe進行重定向，/authorize 端點允許使用名為 prompt 的請求參數(shù)，并將prompt參數(shù)設置為none，以避免中斷用戶體驗。如果 prompt 參數(shù)的值為 none，這將保證不會提示用戶登錄，無論他們是否有活動會話。
如果用戶具有有效會話，則應用程序將接收新令牌。如果沒有，應用程序將收到錯誤響應，并且可以再次重定向用戶，而無需使用prompt=none選項觸發(fā)身份驗證。OneAuth在提供SDK中包含相關的設計，使應用程序更容易執(zhí)行此操作。到目前為止，prompt參數(shù)是 SPA 維持用戶會話而不提示用戶多次登錄的唯一最佳實踐。
智能跟蹤防護 (ITP) 和增強型跟蹤防護 (ETP) 等瀏覽器隱私控制的引入會影響瀏覽器處理第三方 cookie 的方式。這些瀏覽器隱私控制防止使用 OneAuth 會話 cookie 以靜默方式更新用戶會話，這會迫使用戶重新進行身份驗證，對無縫的用戶體驗產(chǎn)生影響。
刷新令牌輪換為 SPA 提供了一種在 ITP 瀏覽器中維護用戶會話的解決方案。由于刷新令牌獨立于任何 cookie，因此您不必依賴 OneAuth會話 cookie 來更新訪問和 ID 令牌。
如果應用程序和 OneAuth 在同一個域中，并不會受到影響，您仍然可以使用 OneAuth 會話 cookie 并靜默更新令牌。
支持服務
如果您需要幫助或有問題，請在 OneAuth開發(fā)者論壇上發(fā)布問題 OneAuth 開發(fā)者論壇。
