IT的隱形人世界

最近開始使用open ID進行驗證認證 , 我在找尋解決方案時發現了identityserver4 得這個集大成的open ID使用 套件 , 切可以很方便擴展公司內部所使用的AD認證 或者是Google認證LINE認證等方式, 那我們就開始簡單的介紹一下identityserver4實作的方式。

時間不足，這邊先放上Client端使用方式，其他部分後面再補上!

 這邊選用oidc-client.js來做界接， 我們增加一個AuthService，準備來放入所需要使用的一些功能， 例如最基本的取得user資訊，登入、登出或者是登入後轉向的一個callback function。

整體流程 : 使用者進入需要驗證頁面→轉跳Idp驗證畫面→Idp轉跳至指定Callback頁面→接收使用者資訊並儲存

1. 先把 oidc-client裝起來

npm install oidc-client --save

2. 增加一個AuthService，並寫入相關程式

這邊我們的設定是用JSON格式放在VITE_IDP_CONFIG，所以我們用parse轉回

import { UserManager, WebStorageStateStore, User } from "oidc-client";

export default class AuthService {
    private userManager: UserManager;

    constructor() {

        const settings : any = JSON.parse(import.meta.env["VITE_IDP_CONFIG"]as any) ;

        settings['userStore'] = new WebStorageStateStore({ store: window.localStorage }),

        this.userManager = new UserManager(settings);


        console.log(this.userManager);
    }


    get getUser(): Promise<User | null> {
        return this.userManager.getUser();
    }

    public login(): Promise<void> {
        return this.userManager.signinRedirect();
    }

    public logout(): Promise<void> {
        return this.userManager.signoutRedirect();
    }

    get signinRedirectCallback():Promise<object | null>{
        return this.userManager.signinRedirectCallback();
    }

}

3.  設定值

{
   "authority":"http://192.168.0.101:9699",
   "client_id":"Test",
   "redirect_uri":"http://192.168.0.101:9600/#/callback?",
   "response_type":"id_token token",
   "scope":"openid profile WebAPI_Test",
   "post_logout_redirect_uri":"http://192.168.0.101:9600/#/home"
}

4. 接下來只要在你要驗證的頁面中增加使用

const auth = new AuthService();
		auth.getUser.then((user) => {
			if (user !== null) {
				onSignInGP(user);
			} else {
				Local.clear(); //全部清出
				login();
			}
});

5. 做出Callback頁面，提供Idp回傳相關資訊

<template>
	<div>Please waitting...</div>
</template>

<script lang="ts">
import Oidc from 'oidc-client';

var mgr = new Oidc.UserManager({ response_mode: 'query', userStore: new Oidc.WebStorageStateStore() });

mgr
	.signinRedirectCallback()
	.then(function (user) {
		window.location.href = '../';
		console.log(user);
	})
	.catch(function (err) {
		console.log(err);
	});


export default {
	name: 'callback',
	setup() {

	},
};
</script>

補充 : 

如想要oidc callback時增加Querystring的話，在設定時增加extraQueryParams參數即可，使用範例如下:

mgr.signinRedirect({
        extraQueryParams: {
            redirect: "home"
        },
    });

可參考原問題 : https://stackoverflow.com/questions/63060295/oidc-extra-parameters-in-sign-in-url-query-string