Day02 - 【入門篇】Quick Start(2)

13th鐵人賽 keycloak open-id oauth sso

lagagain

團隊Outcome First 2.0

2021-09-18 00:17:19

3649 瀏覽

分享至

本系列文之後也會置於個人網站

昨天，已經完成了一部分配置，且也已經可以建立帳號並登入了。
不過，這只能算是半套，而今天要在來完成另外半套。

你可以按照昨天的做法，重新建立一個新的Client。
只是注意在建立的時候，「Root URL」改爲： http://localhost:4200 。
今天，我們要自己實現一個前端網頁去的Web App，然後綁定Keycloak去做登入。

前置要求：

用Keycloak建立一個Client
網頁開發基礎知識(HTML/CSS/JavaScript)
TypeScript的部分知識
Angular知識(非必要)

調整Keycloak的Client配置

前面說過，Keycloak的Client實際上並不是真正的Client Application，只是做了一些關聯。
今天就要來 快速開始 個自己的Web App。而首先，需要先調整Client的關聯：

選擇「Clients」
找到昨天建立的「my-quick-start-app」，然後點選「Edit」

這此調整主要做兩個修改：

首先要啓用 **Implicit Flow Enabled **
(雖然不啓用也可以，但我們做的會是純前端的Client，勾選起來會比較好)。
將https://www.keycloak.org/或https://www.keycloak.org/app/都改爲http://localhost:4200/。
留意 ** Valid Redirect URIs** 的值最後保留星號「*」。

最終設定的結果如下：

Implicit Flow Enabled: on
Root URL: http://localhost:4200/
Valid Redirect URIs: http://localhost:4200/*
Admin URL: (可留空或 http://localhost:4200/)
Web Origins: http://localhost:4200/

用Angular建立Web App

其實我一度在思考要不要使用Parcel去建立，這樣連Angular的入門門檻都沒有了。
不過爲了方便撰寫，最後還是決定先使用Angular來介紹。

建立一個Angular的新專案

ng new my-quick-start-app

下面是我在建立新應用時的選項。今天的例子中，不會使用到 Android routing。
同樣使用什麼 Stylesheet 也不會影響到今天的 快速開始 。
如果你打算透過本範例繼續開始其他應用，可以自行選擇自己熟悉的。

安裝相依套件

 cd my-quick-start-app
 npm i oidc-client

快速開始 也就只有-oidc-client-這麼一個相依套件而已。夠簡單吧?！

編寫連線設定

現在，就來做一些設定，使我們的網頁前端(Web App)綁定Keycloak，去做身份驗證與授權吧。

開啓my-quick-start-app/src/environments/environment.ts，改爲以下設定內容：

import { UserManagerSettings, WebStorageStateStore } from 'oidc-client'


const userManagerSettings: UserManagerSettings = {
  authority: 'http://localhost:8080/auth/realms/quick-start',
  client_id: 'my-quick-start-app',
  redirect_uri: 'http://localhost:4200/',
  response_type: 'id_token',
  userStore: new WebStorageStateStore({ store: window.localStorage }),
  loadUserInfo: true,
  post_logout_redirect_uri: 'http://localhost:4200/',
}


export const environment = {
  production: false,
  userManagerSettings,
};

編輯前端畫面

然後開啓my-quick-start-app/src/app/app.component.html，將內容全部移除後，改爲以下內容：


<h1>用Keycloak學習身份驗證與授權</h1>

<pre>
  {{ user | json }}
</pre>

<button (click)="onClickLoginBtn($event)">login</button>
<br/>
<button (click)="onClickLogoutBtn($event)">logout</button>

是的，作爲本系列第一個簡單的範例，「快速開始」只需要登入、登出的按鈕即可。
此外，也就只有一個顯式登入狀態的使用者訊息而已(user)。

設定相關變數、事件處理

最後，開啓my-quick-start-app/src/app/app.component.ts，同樣直接改成以下內容：

import { Component } from '@angular/core';
import { environment } from 'src/environments/environment';
import { UserManager, User } from 'oidc-client';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  title = 'my-quick-start-app';
  userManager: UserManager = new UserManager(environment.userManagerSettings);
  user: User|null = null;

  constructor() {
    this.userManager.signinRedirectCallback().then(user =>{
      this.userManager.storeUser(user);
      this.user = user;
    }, error => {
      console.error(error);
    });

    this.userManager.getUser().then(user => {
      this.user = user;
    }, error => {
      console.error(error)
    })
  }

  onClickLoginBtn(event: MouseEvent) {
    this.userManager.signinRedirect();
  }

  onClickLogoutBtn(event: MouseEvent) {
    this.userManager.signoutRedirect();
  }
}

最爲 快速開始 ，也就先不解釋所設定的事件與邏輯吧！

運行 Web App

現在，回到專案目錄下執行：

npm start

在經過一小段時間的處理後，應該會看到以下內容

✔ Browser application bundle generation complete.

Initial Chunk Files | Names         |      Size
vendor.js           | vendor        |   2.66 MB
polyfills.js        | polyfills     | 128.52 kB
main.js             | main          |  12.42 kB
runtime.js          | runtime       |   6.64 kB
styles.css          | styles        |   1.18 kB

                    | Initial Total |   2.81 MB

Build at: 2021-09-01T11:59:53.481Z - Hash: ab7e8c94ca54734b4e11 - Time: 10423ms

** Angular Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200/ **


✔ Compiled successfully.