本系列文之後也会置於个人网站

昨天，已经完成了一部分配置，且也已经可以建立帐号并登入了。
不过，这只能算是半套，而今天要在来完成另外半套。

你可以按照昨天的做法，重新建立一个新的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的关联：

1. 选择「Clients」
2. 找到昨天建立的「my-quick-start-app」，然後点选「Edit」

这此调整主要做两个修改：

1. 首先要啓用 **Implicit Flow Enabled **
   (虽然不啓用也可以，但我们做的会是纯前端的Client，勾选起来会比较好)。
2. 将https://www.keycloak.org/或https://www.keycloak.org/app/都改爲http://localhost:4200/。
3. 留意 ** 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.

现在用浏览器开啓 http://localhost:4200/

你会看到我们所建立的非常简单地画面：

点选登入後，会跳到keycloak登入。你同样可以使用bob这个之前建立的帐号登入：

登入过後就可以看到帐号的相关讯息。而登出後，则会回到一开始的结果。

接下来应该做什麽？

现在，你已经知道keycloak最基础的用法，你可以开始依照自己的需求开发应用。或是继续阅读本系列文章，学习相关规范和更多关於keycloak的使用。

实际上你不一定要使用 oidc-client 。实际上keycloak也有提供相关的套件，更甚者，在更了解OAuth之後，也不一定非要使用 oidc-client ，你可以自己选择实现方式，了解後也比较容易除错。

参考资料

• 从零开始迟来的Web开发笔记
• 7天搞懂JS进阶议题