공통 CEF4Delphi(크로미움 기반 웹브라우저) 컴포넌트 설치 및 실행하기

2019.01.14 17:08

험프리 조회 수:4417

REST API 관련 컨설팅 중 학습한 내용을 공유합니다.

 

고객사의 요청으로 VendHQ 사의 REST 서비스와 연동을 진행했습니다.

OAuth 2.0 연동 중 웹브라우저 이슈가 있어 해결방안을 공유합니다.

 

OAuth 2.0 인증 시 크게 3가지 단계로 진행합니다.
1) 서비스의 인증페이지에 로그인 해 인증코드를 받는다.
2) 인증코드를 이용해 엑세스 토큰을 취득한다.
3) 엑세스 토큰을 이용해 서비스에 접근한다.
 
이슈는 1)번 과정에서 발생했습니다.
델파이 내장 웹브라우저 컴포넌트(TWebBrowser)가 vend사의 로그인 페이지를 정상 출력하지 않아 다음 단계로 진행되지 않습니다.(vend사에서 표준을 지키지 않고 페이지를 만든것으로 예상됩니다.)
 
다음과 같이 스타일이 적용되지 않고, 허용 버튼(Allow Access) 클릭이 되지 않습니다.

해당 이슈는 VCL과 FMX 두가지 TWebBrowser가 동일합니다.

 

그래서 다른 대안으로 크롬미움 기반 웹브라우저 써드파티 컴포넌트(크로미움)를 테스트 해봤습니다.
해당 컴포넌트로는 인증 페이지가 정상 출력되고, 인증코드를 받아오는 부분까지 정상 진행되었습니다.

 

 

크로미움 기반 웹브라우저 컴포넌트 설치

CEF4Delphi는 크로미움 기반 웹브라우저 써드파티 컴포넌트로 오픈소스로 진행됩니다.

깃허브 저장소를 통해 제공하고 있습니다.

CEF4Delphi를 사용하려면 컴포넌트 설치 후 실행(및 배포) 시 크로미움 관련 라이브러리들을 함께 배포해야 합니다.

 

 

CEF4Delphi 다운로드

 

 

CEF4Delphi 깃허브 페이지에서 컴포넌트를 다운로드 합니다.(Clone or download > Download ZIP)

 

다운로드 받은 파일을 압축 해제 후 적절한 라이브러리 저장 경로에 이동합니다.(해당 경로의 패키지를 설치하고 델파이에 링크하게 됩니다.)

 

 

CEF4Delphi 컴포넌트 설치

델파이를 실행하고 다운로드 받은 파일들에서 .\packages\CEF4Delphi.dpk 패키지 프로젝트 파일을 엽니다.

프로젝트에서 오른쪽 마우스 클릭 후 팝업 메뉴에서 인스톨 메뉴를 선택해 설치합니다.

 

 

 

라이브러리 패스 추가

패키지 설치 후 CEF4Delpih 소스코드를 델파이 라이브러리 패스에 추가합니다.

 

델파이 라이브러리 화면을 표시합니다.

Tools > Options, Language > Delphi Options > Library

 

 

플랫폼을 선택 후 Library path에 CEF4Delphi 소스 디렉토리를 추가합니다.

 

 

 

CEF4Delphi 프로그램 실행

패키지(컴포넌트)를 정상 설치 후 데모를 실행하면 오류가 발생합니다.
 
내장 된 데모 중 SimpleBrowser2(.\CEF4Delphi\demos\SimpleBrowser2)를 열고 실행 시 다음과 같은 오류가 발생합니다.

 

오류 내용을 보면 CEF3 바이너리가 누락되었다는 내용입니다.

일반적으로 위와 같은 오류의 조치방법은 실행파일과 같은 경로 또는 시스템 패스에 해당 라이브러리들을 복사하는 방법이 있습니다.

하지만 CEF4Delphi는 소스코드 내에서 해당 경로를 지정하는 방법을 제공합니다.

 

 

CEF 바이너리 지정

 

SimpleBrowser2의 프로젝트 파일을 열면 다음과 같이 GlobalCEFApp 전역변수와 각종 경로를 지정하는 코드가 주석처리 되어 있습니다.

경로를 지정하는 코드의 주석을 풀고, 해당 경로에 CEF 바이너리를 넣거나 경로를 임의로 지정할 수 있습니다.

 

GlobalCEFApp.FrameworkDirPath := 'cef'; 경로는 실행파일과 같은 경로의 cef 디렉토리를 의미합니다.

 

우리는 위의 코드에서 주석 해제 후 지정한 디렉토리(.\cef)에 CEF 바이너리를 복사하도록 하겠습니다.

 

CEF 바이너리 다운로드

CEF4Delphi 깃허브 페이지에서 CEF 바이너리를 다운로드 제공합니다.

윈도우즈 32비트 플랫폼 애플리케이션에서 CEF 이용 시 32 bits를 다운로드 합니다.
(64비트 프로젝트 개발 시 64 bits를 다운로드 합니다.)

 

CEF4Delphi 컴포넌트의 경로 하위 bin 디렉토리에 다운로드 받은 파일을 압축해제 합니다.

 

 

CEF 바이너리 복사

SimpleBrowser2 데모를 컴파일하면 .\CEF4Delphi\bin 디렉토리에 실행파일이 생성됩니다.
(Project > Options > Delphi Compiler > Output directory가 "..\..\bin"으로 설정)

 

bin 디렉토리 하위에 cef 디렉토리를 생성합니다.

 

CEF 바이너리 파일 중 아래 디렉토리의 모든 파일과 디렉토리를 생성한 cef 디렉토리에 복사합니다.

  • Release\*.*
  • Resources\*.*

 

이후 다시 데모 프로젝트를 실행하면 오류없이 정상 실행을 확인할 수 있습니다.

 

배포 시에도 실행파일 하위 cef 디렉토리를 함께 배포하거나, CEF 바이너리 디렉토리를 지정해야 합니다.

 

관련/참고 링크

 

, 이 게시물을
Profile
목록
목록
번호 제목 글쓴이 날짜 조회 수
공지 [DelphiCon 요약] 코드사이트 로깅 실전 활용 기법 (Real-world CodeSite Logging Techniques) 관리자 2021.01.19 22583
공지 [UX Summit 요약] 오른쪽 클릭은 옳다 (Right Click is Right) 관리자 2020.11.16 21024
공지 [10.4 시드니] What's NEW! 신기능 자세히 보기 관리자 2020.05.27 23071
공지 RAD스튜디오(델파이,C++빌더) - 고객 사례 목록 관리자 2018.10.23 28870
공지 [데브기어 컨설팅] 모바일 앱 & 업그레이드 마이그레이션 [1] 관리자 2017.02.06 30050
공지 [전체 목록] 이 달의 기술자료 & 기술레터 관리자 2017.02.06 25393
공지 RAD스튜디오(델파이, C++빌더) - 시작하기 [1] 관리자 2015.06.30 46347
공지 RAD스튜디오(델파이,C++빌더) - 모바일 앱 개발 사례 (2020년 11월 업데이트 됨) 험프리 2014.01.16 182309
903 n [도서/PDF/소스코드] 시작하는 사람들을 위한 델파이 프로그래밍-모듈 1. 델파이 소개, 단순 컴포넌트들 관리자 2019.02.13 1768
902 안드로이드 9버전 대상으로 10.3 리오 앱 실행 file 험프리 2019.02.12 591
901 이 달의 기술자료 - 2019년 02월 file 험프리 2019.01.25 565
900 [업데이트][핫픽스][10.3] C++툴체인 핫픽스 험프리 2019.01.25 335
899 iOS SDK 추가 화면에서 SDK 목록이 표시되지 않을 경우 해결방안 file 험프리 2019.01.16 1076
» CEF4Delphi(크로미움 기반 웹브라우저) 컴포넌트 설치 및 실행하기 험프리 2019.01.14 4417
897 [REST API] MAC(Message Authentication Code)/HMAC 델파이로 구현하기 험프리 2019.01.14 2777
896 이 달의 기술자료 - 2019년 01월 험프리 2018.12.28 577
895 OAuth 2.0 연동 - 카카오 API(카카오톡 프로필) [9] 험프리 2018.12.26 10290
894 델파이 애플리케이션 현대화 방안 관리자 2018.12.18 1199
893 [업데이트][핫픽스][10.3] 2018년 12월 패치 험프리 2018.12.17 713
892 엠바카데로가 제안하는 가장 효율적인 비용으로 최신식 앱 개발 방법 관리자 2018.12.11 1051
891 웹 영역으로의 확장을 위한 크로스-플랫폼 웹 애플리케이션 개발 방법 - Ext JS 관리자 2018.12.11 860
890 올인원 테스트 자동화 솔루션 - 래노렉스(Ranorex) file 관리자 2018.12.11 674
889 C++빌더/델파이 개발자를 위한 최적의 데이터베이스 관리 도구 - 아쿠아 데이터 스튜디오 file 관리자 2018.12.11 719
888 [10.3 리오] 기타 컴파일러, 데이터, RTL 개선사항 험프리 2018.12.06 632
887 [10.3 리오] RAD 서버 엔드 포인트 연동이 더욱 쉽고 다양해 졌습니다. 험프리 2018.12.06 530
886 [10.3 리오] 안드로이드 권한 요청 매커니즘 변경이 반영되었습니다. file 험프리 2018.12.06 1238
885 [10.3 리오] 윈도우 스토어 연동, 최신 윈도우 API 업데이트 등 윈도우 10 지원이 강화되었습니다. file 험프리 2018.12.05 824
884 [10.3 리오] High DPI가 적용된 이미지 리스트로 다양한 해상도의 이미지를 지원할 수 있습니다. 험프리 2018.12.05 877
쓰기
태그