분류 전체보기 73

Next.js에서 IdentityServer 연결 with oidc-client

Identity서버를 연결하기 위해 가장 기본인 oidc-client를 이용한 접속을 시도해 보겠습니다. (1) 먼저 Next.js 프로젝트를 생성해 주세요. npx create-next-app testapp (2) oidc-client 를 설치해 줍니다. npm install oidc-client (3) root에 위치한 page.tsx 에 내용을 다음과 같이 작성해 줍니다. "use client" import { OidcClient,UserManager } from "oidc-client"; export default function Home() { var config = { authority: "https://localhost:5100", client_id: "RoslynDevJS", redirec..

개발이야기 2024.03.13

Next.js 최초 설치

Next.js 프로젝트를 셋팅하기 위해서는 기본적으로 Node.js, NPM 등이 설치되어 있어야 합니다. (1) create-next-app의 최신 버전을 설치해 줍니다. npm install create-next-app@latest -g (2) npx를 이용해 create-next-app를 실행합니다. (앱폴더가 자동으로 생성됩니다.) npx create-next-app testapp (3) 실행하면 설치에 관련된 요소들에 대해 질문하며, 적절히 답변하면 Next.js가 생성됩니다. (4) 이제 code . 으로 생성된 프로젝트를 vs code에서 확인할 수 있습니다. code .

개발이야기 2024.03.12

IIS Express에 redirection.config 오류 관련

이번에 새롭게 합류하게된 회사에 프로젝트를 받아 실행하는 과정에서 다음과 같은 오류를 마주하게 되었습니다. CloudHospital.IdentityServer.STS.Identity 프로젝트의 IIS Express를 구성하려고 할 때 다음과 같은 오류가 발생했습니다. 파일 이름: redirection.config 오류 : 구성파일을 읽을 수 없습니다. 이와 관련된 문제해결을 위해 IIS Express를 검색하면, 대부분 환경설정 파일을 삭제하라고 나오는데, 프로젝트 실행시 프로필 지정을 잘못해도 위와 같은 오류가 발생할 수 있습니다. 물론 정확히 말해서, 기본값으로 설정된 IIS Express에 commandLineArgs 값 때문에 발생한 오류로 유추되기 때문에, 프로필 지정을 잘못했다고 나온 오류는 ..

개발이야기 2024.03.11

IdentityServer 학습 #10 - BFF without backend

본문 글은 원문(https://docs.duendesoftware.com/identityserver/v7/quickstarts/js_clients/js_without_backend/)을 참고하여 작성되었습니다. (1) 먼저 사용할 프로젝트를 생성해 줍니다. (예시에서는 SPA) dotnet new web -n SPA (2) 해당 프로젝트를 솔루션에 추가해 줍니다. dotnet sln add ./{프로젝트경로} (3) wwwroot 디렉토리를 만들어 주고, package.json 파일을 생성해 줍니다. npm init (4) oidc-client 라이브러리를 설치해 줍니다. (시작파일은 app.js로 지정) npm i oidc-client (5) 설치된 라이브러리에 있는 js 파일을 wwwroot 로 복사..

개발이야기 2024.03.11

IdentityServer 학습 #9 - BFF with backend

본 내용은 원문(https://docs.duendesoftware.com/identityserver/v7/quickstarts/js_clients/js_with_backend/) 내용을 참고하여 작성되었습니다. (1) JavaScript기반 클라이언트로 사용할 프로젝트를 추가해 줍니다. dotnet new web -n JavaScriptClient 이렇게 하면 빈 Asp.net Core 프로젝트가 생성됩니다. (2) 다음으로 솔루션에 해당 프로젝트를 추가해 줍니다. dotnet sln add ./{프로젝트경로} (3) IdentityServer의 BFF관련 라이브러리들을 추가해 줍니다. dotnet add package Microsoft.AspNetCore.Authentication.OpenIdConne..

개발이야기 2024.03.11

IdentityServer 학습 #8 - EntityframeworkCore

그 동안에는 AddInMemoryClients 등을 이용해서 코드에서 직접 정의되었던 것을 DB를 이용한 형태로 변경합니다. 본문의 원문은 다음 링크를 참고합니다. 원문링크 : https://docs.duendesoftware.com/identityserver/v7/quickstarts/4_ef/ Duende Software Documentation The most flexible and standards-compliant OpenID Connect and OAuth 2.0 framework for ASP.NET Core. docs.duendesoftware.com 더불어 원문에서는 Database로 Sqlite를 사용했으나, 본문에서는 Sql Server로 변경하였습니다. (1) 먼저 기존에 설치된 I..

개발이야기 2024.03.07

IdentityServer 학습 #7 - API access

API access 관련 내용을 다음과 같이 정리합니다. 원문링크 : https://docs.duendesoftware.com/identityserver/v7/quickstarts/3_api_access/ (1) 새롭게 추가할 스코프를 정의해 줍니다. (중요! 원문에서 누락된 부분) public static IEnumerable IdentityResources => new IdentityResource[] { new IdentityResources.OpenId(), new IdentityResources.Profile(), new IdentityResource() { Name = "verification", UserClaims = new List { JwtClaimTypes.Email, JwtClaimT..

개발이야기 2024.03.07

IdentityServer 학습 #6 - OpenID Connect

이제부터는 OpenID Connect를 학습해 봅시다. (1) 먼저 OpenID Connect를 위한 UI를 IdentityServer에 추가해 줍니다. dotnet new isui (2) 주석 처리되어 있던 Razor 관련 항목들을 활성화 시켜 줍니다. using Serilog; namespace IdentityServer; internal static class HostingExtensions { public static WebApplication ConfigureServices(this WebApplicationBuilder builder) { // uncomment if you want to add a UI builder.Services.AddRazorPages(); builder.Services..

개발이야기 2024.03.07

IdentityServer 학습 #5 - Scope 개념

기본적으로 인증을 처리하는 것은 oAuth나 OpenID Connect나 동일한 개념으로 정리될 수 있습니다. 하지만, Scope는 두 개념에서 각각 다르게 사용됩니다. Scope라는 동일한 필드(Attribute)를 oAuth와 OpenID Connect가 다르게 사용하는 것인데, 사용자에 대한 사용자 인증만을 처리하는 OpenID Connect는 해당 Scope를 사용자 인증 정보를 담아두는 필드로 활용합니다. 물론 그것은 강제된 사항이 아니지만 보편적으로 그렇습니다. 때문에 Scope에는 사용자의 이메일 등 인증된 정보가 담겨지게 됩니다. 반면 oAuth는 인증 이후에 리소스에 접근 가능한 권한 여부를 체크하기 때문에 Scope를 본래의 용도인 권한 체크 용도로 사용하게 됩니다. 즉 oAuth에서 ..

개발이야기 2024.03.07

IdentityServer 학습 #4 - Scope

이번에는 Scope를 추가해 보도록 합시다. (1) api 프로젝트의 Program.cs 파일을 수정해서 인가정책을 추가해 줍니다. using System.Security.Claims; var builder = WebApplication.CreateBuilder(args); builder.Services.AddAuthentication() .AddJwtBearer(options => { options.Authority = "https://localhost:5001"; options.TokenValidationParameters.ValidateAudience = false; }); builder.Services.AddAuthorization(options => { options.AddPolicy("ApiS..

개발이야기 2024.03.07
반응형