🔧 Node.js + Express 구현

먼저 필요한 패키지를 설치해야 해:

npm install express passport passport-openidconnect

기본 설정 코드:

const express = require('express');
const passport = require('passport');
const { Strategy } = require('passport-openidconnect');
const session = require('express-session');

const app = express();

// 세션 설정
app.use(session({
  secret: 'your-secret-key',
  resave: false,
  saveUninitialized: true
}));

// Passport 초기화
app.use(passport.initialize());
app.use(passport.session());

// OpenID Connect 전략 설정
passport.use('oidc', new Strategy({
  issuer: 'https://auth.example.com',
  authorizationURL: 'https://auth.example.com/authorize',
  tokenURL: 'https://auth.example.com/token',
  userInfoURL: 'https://auth.example.com/userinfo',
  clientID: 'your-client-id',
  clientSecret: 'your-client-secret',
  callbackURL: 'http://localhost:3000/callback',
  scope: 'openid profile email'
}, (issuer, profile, done) => {
  return done(null, profile);
}));

// 사용자 직렬화/역직렬화
passport.serializeUser((user, done) => {
  done(null, user);
});

passport.deserializeUser((user, done) => {
  done(null, user);
});

// 라우트 설정
app.get('/login', passport.authenticate('oidc'));

app.get('/callback', 
  passport.authenticate('oidc', { failureRedirect: '/login' }),
  (req, res) => {
    res.redirect('/profile');
  }
);

app.get('/profile', (req, res) => {
  if (!req.isAuthenticated()) {
    return res.redirect('/login');
  }
  res.json(req.user);
});

app.listen(3000, () => {
  console.log('Server running on port 3000');
});
        

🔧 Spring Boot 구현

Spring Security와 OAuth2 클라이언트를 사용한 구현:

먼저 의존성을 추가해:

<dependency>
    <groupId>org.springframework.boot</groupId>
    <artifactId>spring-boot-starter-oauth2-client</artifactId>
</dependency>
        

application.yml 설정:

spring:
  security:
    oauth2:
      client:
        registration:
          oidc-provider:
            client-id: your-client-id
            client-secret: your-client-secret
            scope: openid,profile,email
            redirect-uri: "{baseUrl}/login/oauth2/code/{registrationId}"
        provider:
          oidc-provider:
            issuer-uri: https://auth.example.com
        

보안 설정:

@Configuration
@EnableWebSecurity
public class SecurityConfig {

    @Bean
    public SecurityFilterChain filterChain(HttpSecurity http) throws Exception {
        http
            .authorizeHttpRequests(authorize -> authorize
                .requestMatchers("/", "/home").permitAll()
                .anyRequest().authenticated()
            )
            .oauth2Login(oauth2 -> oauth2
                .loginPage("/login")
            )
            .logout(logout -> logout
                .logoutSuccessUrl("/")
            );
        return http.build();
    }
}
        

컨트롤러:

@Controller
public class UserController {

    @GetMapping("/user")
    public String user(Model model, 
                      @AuthenticationPrincipal OidcUser oidcUser) {
        model.addAttribute("userName", oidcUser.getFullName());
        model.addAttribute("userEmail", oidcUser.getEmail());
        return "user";
    }
}
        

🔧 React + Auth0 구현

프론트엔드에서 Auth0를 사용한 OIDC 구현:

먼저 필요한 패키지를 설치해:

npm install @auth0/auth0-react

Auth0 프로바이더 설정:

import React from 'react';
import ReactDOM from 'react-dom';
import { Auth0Provider } from '@auth0/auth0-react';
import App from './App';

ReactDOM.render(
  <Auth0Provider
    domain="your-auth0-domain.auth0.com"
    clientId="your-client-id"
    redirectUri={window.location.origin}
    audience="https://api.example.com"
    scope="openid profile email"
  >
    <App />
  </Auth0Provider>,
  document.getElementById('root')
);
        

로그인/로그아웃 컴포넌트:

import React from 'react';
import { useAuth0 } from '@auth0/auth0-react';

const LoginButton = () => {
  const { loginWithRedirect } = useAuth0();
  return <button onClick={() => loginWithRedirect()}>로그인</button>;
};

const LogoutButton = () => {
  const { logout } = useAuth0();
  return (
    <button onClick={() => logout({ returnTo: window.location.origin })}>
      로그아웃
    </button>
  );
};

const Profile = () => {
  const { user, isAuthenticated, isLoading } = useAuth0();

  if (isLoading) {
    return <div>로딩 중...</div>;
  }

  return (
    isAuthenticated && (
      <div>
        <img src={user.picture} alt={user.name} />
        <h2>{user.name}</h2>
        <p>{user.email}</p>
      </div>
    )
  );
};