Keycloak Express Openid-클라이언트

Keycloak은 deprecating Node용 클라이언트 어댑터(keycloak-connect)이며 대체품으로 openid-client를 권장합니다.

키클로크 설정

먼저 Idownload keycloak 압축을 풀고 다음 명령으로 실행할 수 있습니다.

bin/kc.sh start-dev

그런 다음 로그인할 수 있습니다http://localhost:8080, 처음 keycloak을 수행하면 관리자 사용자와 암호를 설정하라는 메시지가 표시됩니다.

Realm을 만들고 이름을 지정하고 만듭니다. 내 영역 이름에 keycloak-express를 사용하고 있습니다.


Realm에서 openid-connect를 사용하여 클라이언트 생성


유효한 리디렉션 URI를 설정하고 저장을 선택합니다.

NOTE:you can specify specific routes here but I am using a wild card(not recommend best practice)

문서화here한 사용자를 생성하므로 다루지 않겠습니다.

그게 Keycloak 설정을위한 것입니다.

Express에서 Passport로 Openid-client 설정

우리는 이것을 openid-client과 passport을 사용하여 keycloak에 연결할 것입니다. 나는 다음을 설치한다

npm install passport
npm install openid-client
npm install express-session
npm install express

Realm에서 openid가 필요합니다. 구성은 끝점에서 가져올 수 있습니다.

/realms/{realm-name}/.well-known/openid-configuration

따라서 제 경우에는 영역 이름이 keycloak-express이므로 URL은 http://localhost:8080/realms/keycloak-express/.well-known/openid-configuration이 됩니다. 출력은 다음과 같습니다.

다음과 같이 openid-client를 keycloak에 연결하기 위해 필요한 것은 이 issuer:"http://localhost:8080/realms/keycloak-express" url입니다.

'use strict';

import express from 'express';
import { Issuer, Strategy } from 'openid-client';
import passport from 'passport';
import expressSession from 'express-session';

const app = express();

// use the issuer url here
const keycloakIssuer = await Issuer.discover('http://localhost:8080/realms/keycloak-express')
// don't think I should be console.logging this but its only a demo app
// nothing bad ever happens from following the docs :)
console.log('Discovered issuer %s %O', keycloakIssuer.issuer, keycloakIssuer.metadata);

// client_id and client_secret can be what ever you want
// may be worth setting them up as env vars 
const client = new keycloakIssuer.Client({
    client_id: 'keycloak-express',
    client_secret: 'long_secret-here',
    redirect_uris: ['http://localhost:3000/auth/callback'],
    post_logout_redirect_uris: ['http://localhost:3000/logout/callback'],
    response_types: ['code'],
  });

그런 다음 익스프레스 세션을 설정합니다.

var memoryStore = new expressSession.MemoryStore();
app.use(
    expressSession({
    secret: 'another_long_secret',
    resave: false,
    saveUninitialized: true,
    store: memoryStore
    })
);

그런 다음 개방형 연결 ID 전략을 사용하도록 여권을 설정합니다.

app.use(passport.initialize());
app.use(passport.authenticate('session'));

// this creates the strategy
passport.use('oidc', new Strategy({client}, (tokenSet, userinfo, done)=>{
        return done(null, tokenSet.claims());
    })
)

passport.serializeUser(function(user, done) {
    done(null, user);
  });
passport.deserializeUser(function(user, done) {
    done(null, user);
});

위의 대부분은 여권 문서에서 복사되었으며 this blog 직렬화/역직렬화를 설명하는 데 도움이 됩니다.

다음으로 redirect_uris:에서 콜백keycloakIssuer.Client을 사용하는 인증 경로를 설정합니다.

// default protected route /test
app.get('/test', (req, res, next) => {
    passport.authenticate('oidc')(req, res, next);
});

// callback always routes to test 
app.get('/auth/callback', (req, res, next) => {
    passport.authenticate('oidc', {
      successRedirect: '/testauth',
      failureRedirect: '/'
    })(req, res, next);
});

그런 다음 경로가 인증되었는지 확인하는 기능을 설정합니다.

// function to check weather user is authenticated, req.isAuthenticated is populated by password.js
// use this function to protect all routes
var checkAuthenticated = (req, res, next) => {
    if (req.isAuthenticated()) { 
        return next() 
    }
    res.redirect("/test")
}

그런 다음 보호 경로에서 사용할 수 있습니다.

app.get('/testauth', checkAuthenticated, (req, res) => {
    res.render('test');
});

app.get('/other', checkAuthenticated, (req, res) => {
    res.render('other');
});

//unprotected route
app.get('/',function(req,res){
    res.render('index');
});

마지막으로 post_logout_redirect_uris에서 콜백keycloakIssuer.Client을 사용하는 로그아웃 경로를 설정했습니다.

// start logout request
app.get('/logout', (req, res) => {
    res.redirect(client.endSessionUrl());
});

// logout callback
app.get('/logout/callback', (req, res) => {
    // clears the persisted user from the local storage
    req.logout();
    // redirects the user to a public route
    res.redirect('/');
});

그리고 앱을 청취하도록 설정하십시오.

app.listen(3000, function () {
  console.log('Listening at http://localhost:3000');
});

보기 주변에 몇 가지 추가 코드가 있는 Repohere. 이렇게 생겼어