본문으로 이동

Capacitor 앱에 OAuth2를 구현하는 5 가지 단계

Capacitor 앱에 안전한 OAuth2 인증을 통합하는 이 짧은 안내서에는 필수 단계와 최적화된 방법이 포함되어 있습니다.

마틴 도나디우

마틴 도나디우

Content Marketer

Capacitor 앱에 OAuth2를 구현하는 5 단계

__CAPGO_KEEP_0__ 앱에 안전한 OAuth2 인증을 추가하고 싶으신가요? 여기서 빠르게 시작하세요. OAuth2는 사용자가 데이터에 접근할 수 있도록 비밀번호를 공유하지 않고 공유할 수 있도록 하는 프로토콜입니다. 플랫폼에 상관없이 iOS, Android, 웹과 같은 Capacitor 앱에 적합합니다. 소셜 제공자에 대해, @Capacitor/__CAPGO_KEEP_1__-social-login은 네이티브 흐름으로 구글, 애플, 페이스북 로그인 처리를 지원합니다. 비밀번호 없는 인증에 대해, __CAPGO_KEEP_0__

__CAPGO_KEEP_1__ Capacitor __CAPGO_KEEP_1__ @capgo/capacitor-social-login __CAPGO_KEEP_1__ @capgo/capacitor-passkey 브라우저 스타일의 WebAuthn code를 유지하면서 네이티브 패스 키 호출을 자동으로 처리합니다. 또한敏감한 자격 증명을 저장하는 대신 토큰을 사용하여 앱을 보안합니다.

OAuth2를 사용하여 __CAPGO_KEEP_0__ 앱을 통합하는 방법 OAuth2를 사용하여 Capacitor 앱을 통합하는 방법 OAuth2를 사용하여 __CAPGO_KEEP_0__ 앱을 통합하는 방법

  1. OAuth2를 사용하여 __CAPGO_KEEP_0__ 앱을 통합하는 방법OAuth2를 사용하여 __CAPGO_KEEP_0__ 앱을 통합하는 방법 OAuth2를 사용하여 __CAPGO_KEEP_0__ 앱을 통합하는 방법OAuth2를 사용하여 __CAPGO_KEEP_0__ 앱을 통합하는 방법
  2. OAuth2를 사용하여 __CAPGO_KEEP_0__ 앱을 통합하는 방법OAuth2를 사용하여 __CAPGO_KEEP_0__ 앱을 통합하는 방법 @byteowls/capacitor-oauth2 OAuth2를 사용하여 __CAPGO_KEEP_0__ 앱을 통합하는 방법 @capgo/capacitor-social-login 구글, 애플, 페이스북과 같은 플랫폼을 지원하고, 플랫폼별 설정을 구성하세요 (예를 들어, Info.plist iOS AndroidManifest.xml Android
  3. 인증 흐름을 구축하세요: 사용자 로그인, 토큰 저장, 로그아웃을 안전하게 처리하는 플러그인을 사용하세요. 추가 보호를 위해 PKCE 을 활성화하세요.
  4. : iOS, Android, 웹 브라우저에서 흐름을 검증하세요. 리다이렉트 URI 일치 오류나 PKCE 오류와 같은 일반적인 문제를 해결하세요.: 토큰을 안전한 저장소에 저장하세요
  5. __CAPGO_KEEP_0____CAPGO_KEEP_1____CAPGO_KEEP_0____CAPGO_KEEP_1__ __CAPGO_KEEP_2__.

__CAPGO_KEEP_3__

__CAPGO_KEEP_4__ __CAPGO_KEEP_5__ __CAPGO_KEEP_6__ __CAPGO_KEEP_7__ __CAPGO_KEEP_8__
__CAPGO_KEEP_9__ __CAPGO_KEEP_10__ __CAPGO_KEEP_11__ Yes Refresh 토큰
메모리 저장 임시 접근 중간 No 활성 접근 토큰
HttpOnly 쿠키 웹 애플리케이션 Yes 브라우저 기반 세션

Google Sign In을 사용하는 방법 Capacitor Ionic 앱에 __CAPGO_KEEP_0__ 프레임워크 문서 사이트

Capacitor Framework Documentation Website

OAuth2 제공자 OAuth2 제공자가 올바르게 설정된 경우 모든 것이 순조롭게 작동하는 첫 번째이자 가장 중요한 단계입니다. 이 단계는 앱의 요구 사항에 맞는 제공자를 선택하고, 리다이렉트 URI와 같은 기술적 세부 사항을 구성하고, 자격 증명을 안전하게 관리하는 것을 포함합니다. 이 단계는 OAuth2 플러그인을 다음 단계에서 설치하는 데 필요한 것입니다. OAuth2 제공자를 선택하세요

__CAPGO_KEEP_0__ Framework Documentation Website

__CAPGO_KEEP_0__

앱의 기능성, 보안 요구 사항 및 호환성을 고려하여 OAuth2 제공자를 선택하세요. 개발 중인 앱의 유형은 OAuth 2.0 흐름을 결정하고, 그 흐름은 제공자 선택에 직접 영향을 줍니다. [2]Capacitor-기반 앱의 경우 권한 Code 흐름을 사용하는 것이 권장되며, 이 흐름은 PKCE를 사용하는 것이 모바일 앱의 경우 권장되는 방법입니다.

제공자 비교 시 보안 기능에 중점을 두세요. signed 쿠키, CSRF 토큰 검증, 암호화된 JWT와 같은 옵션을 찾으세요. sensitive 데이터를 다루는 앱의 경우 multi-factor 인증을 지원하는 것이 필수입니다. 평가 중에, 비용과 기능을 고려하여 필요에 따라 조정하세요. Redirect URI 구성 Redirect URI는 매우 중요합니다. OAuth2 제공자가 인증을 완료한 사용자를 어디로 보낼지 알려줍니다. Redirect URI를 올바르게 구성하면 모바일 및 웹 플랫폼 모두에서MOOTH한 경험을 제공할 수 있습니다.

모바일 앱의 경우, 사용자 지정 URL 스키마를 사용하세요. 일반적으로 다음과 같은 형식으로 구성됩니다.:

where

앱의 패키지 ID와 일치하는 패키지 ID를 사용하세요. 웹 앱의 경우 com.example.app://callbackRedirect URI로 사용하세요. 로컬 테스트 시에는 다음과 같은 URL이 잘 작동합니다. com.example.app __CAPGO_KEEP_0__-기반 앱의 경우 권한 __CAPGO_KEEP_1__ 흐름을 사용하는 것이 권장되며, 이 흐름은 PKCE를 사용하는 것이 모바일 앱의 경우 권장되는 방법입니다. window.location.origin Redirect URI는 매우 중요합니다. OAuth2 제공자가 인증을 완료한 사용자를 어디로 보낼지 알려줍니다. Redirect URI를 올바르게 구성하면 모바일 및 웹 플랫폼 모두에서MOOTH한 경험을 제공할 수 있습니다. http://localhost:8100/callback Redirect URI는 매우 중요합니다. OAuth2 제공자가 인증을 완료한 사용자를 어디로 보낼지 알려줍니다. Redirect URI를 올바르게 구성하면 모바일 및 웹 플랫폼 모두에서MOOTH한 경험을 제공할 수 있습니다.

iOS 사용자라면 Capacitor의 브라우저 플러그인 사용 시 SFSafariViewController를 기억해 두세요. iOS 11 이상 버전에서는 Safari와 쿠키를 공유하지 않으며, 이는 단일 로그인 기능에 영향을 줄 수 있습니다. SSO가 필수적이라면 ASWebAuthenticationSession [3].

를 지원하는 플러그인을 고려해 보세요.

클라이언트 자격 증명 관리

클라이언트 자격 증명은 OAuth2 제공자에게 앱을 식별하는 데 사용되는 클라이언트 ID와 클라이언트 비밀번호로 구성됩니다. 클라이언트 ID는 공개 식별자로 생각하시고, 클라이언트 비밀번호는 개인 키처럼 취급해 주세요.

클라이언트 비밀번호를 앱에 직접 하드 코딩하거나 버전 관리에 포함시키지 마세요. 대신 환경 변수나 안전한 비밀 관리 시스템을 사용하여 저장하세요. 또한, 노출을 최소화하고 보안을 강화하기 위해 단기 토큰과 최소한의 범위로 선택하세요.

Now that your OAuth2 provider is ready, the next step is to add the plugin to your Capacitor app and set it up for iOS, Android, and web platforms.

OAuth2 제공자가 준비되면, 다음 단계는 iOS, Android, 웹 플랫폼을 위한 __CAPGO_KEEP_0__ 앱에 플러그인을 추가하고 설정하는 것입니다.

플러그인 설치 @byteowls/capacitor-oauth2 플러그인은 대부분의 OAuth2 제공자와 호환됩니다. 호환성 문제를 피하기 위해, Capacitor 설정과 일치하는 버전을 설치하세요.

Capacitor 버전에 따라 설치 명령어를 다음과 같이 사용하세요:

  • Capacitor v5: npm i @byteowls/capacitor-oauth2
  • Capacitor v4: npm i @byteowls/capacitor-oauth2@4
  • Capacitor v3: npm i @byteowls/capacitor-oauth2@3

설치 후에 다음 명령어를 실행하여 네이티브 의존성을 업데이트하세요. 이 단계는 iOS 및 Android 프로젝트와 플러그인을 올바르게 통합하기 위해 필수적입니다. 이 단계를 생략하면 모바일 플랫폼을 컴파일할 때 빌드 오류가 발생할 수 있습니다.npx cap sync플러그인 설정

설치 후에 OAuth2 제공자의 설정과 일치하는 플러그인을 구성해야 합니다. 이 작업은

메소드를 호출할 때 oauth2Options 객체를 통해 수행됩니다. 다음 키를 정의해야 하는 주요 매개 변수가 있습니다: authenticate() appId

  • : OAuth2 제공자에서 제공하는 클라이언트 ID입니다.__CAPGO_KEEP_0__
  • 인증BaseUrl: 제공자의 인증 엔드포인트입니다.
  • 응답타입: 일반적으로 "code" 모바일 앱을위한
  • 리다이렉트 URL: 이 값은 Step 1에서 구성된 리다이렉트 URL과 일치해야합니다.

추가 매개 변수를 설정할 수도 있습니다. 예를 들어, accessTokenEndpoint, scope및 플랫폼에 따라서 인증 프로세스를 최적화할 수 있습니다.

Android의 경우, AndroidManifest.xml 파일을 올바른 스킴과 호스트 정보로 업데이트하세요. iOS의 경우, strings.xml 파일을 수정하세요. Info.plist __CAPGO_KEEP_0__ URL Scheme 등록을 위한 파일입니다. 플랫폼에 따라 특정한 변경을 통해 사용자는 인증 후 앱으로 돌아갑니다.

Capacitor 버전 호환성을 확인하세요.

플러그인은 Capacitor 버전과 일치하는지 확인해야 합니다. 버전이 일치하지 않으면 빌드 오류 또는 런타임 오류가 발생할 수 있습니다. 플러그인은 Capacitor 릴리스와 일치하므로 호환성을 확인하기 전에 다시 한번 확인하세요. @byteowls/capacitor-oauth2 plugin strictly aligns with Capacitor releases, so double-check compatibility before proceeding.

호환되는 __CAPGO_KEEP_0__ 버전 Compatible Capacitor Version 5.x
5.x.x 필요한 항목 Xcode 14.1. 변경 로그에 기재된 변경 사항이 있습니다. __CAPGO_KEEP_0__
4.x 4.x.x Xcode 12.0이 필요합니다. 변경 사항은 changelog에서 확인할 수 있습니다.
3.x 3.x.x Xcode 12.0이 필요합니다. 변경 사항은 changelog에서 확인할 수 있습니다.
2.x 2.x.x Xcode 11.4가 필요합니다. 변경 사항은 changelog에서 확인할 수 있습니다.
1.x 1.x.x

iOS 개발을 하신다면 Xcode 버전 요구 사항에 주의해 주세요. 호환되지 않는 버전을 사용하면 앱이 성공적으로 빌드되지 않을 수 있습니다. 플러그인 문서에는 세부적인 호환성 표가 포함되어 있습니다. 이 표는 버전 관련 문제를 해결하는 데 도움이 될 것입니다.

If you run into problems after installation, uninstall the current plugin version, install the correct one for your Capacitor version, and run the sync command again. 이 방법은 불일치하는 버전을 강제로 사용하려고 시도하는 것보다 훨씬 더 효과적입니다.

Step 3: OAuth2 인증 흐름 빌드

설치가 완료된 플러그인을 사용하여, 이제 완전히 기능하는 인증 흐름을 만들 수 있습니다. 이 단계는 보안된 사용자 로그인, 토큰 관리 및 로그아웃을 보장하여, 앱이 플랫폼 간 사용자 세션 관리를 가능하게합니다.

로그인 흐름 만들기

로그인 프로세스는 옵션 객체를 호출하여 시작됩니다. 이 객체에는 authenticate()authorizationBaseUrl, redirectUrl을 포함해야하며 responseType'code' 으로 설정하여 PKCE 요구 사항을 충족해야합니다. 플러그인은 사용자 인증 정보를 안전하게 제공하는 OAuth2 제공자의 로그인 페이지를 열어주며, 사용자는 이 페이지에서 자신의 인증 정보를 입력합니다. 성공적인 로그인 후, 제공자는 사용자에게 토큰 및 사용자 정보를 리다이렉트합니다.

이것이 가장 좋은 부분입니다: 사용자는 OAuth2 제공자와 직접 인증 정보를 입력하기 때문에, 앱은敏감한 정보에 접근할 수 없습니다. 이 메소드는 액세스 토큰, 리프레시 토큰 및 이메일 또는 프로필 정보와 같은 사용자 데이터가 포함된 응답 객체를 반환합니다.

iOS 및 Android에서 이 프로세스는 안전한 웹 뷰를 사용하여 시스템 브라우저와 쿠키를 공유합니다. 웹 플랫폼에서 이 프로세스는 표준 브라우저 리다이렉트를 사용합니다. 리다이렉트 URL을 올바르게 구성하면 플랫폼에 관계없이 smooth한 사용자 경험을 보장할 수 있습니다.

토큰 저장 및 리프레시 처리

로그인한 사용자의 다음 우선순위는 안전하게 토큰을 관리하는 것입니다. 이에는 토큰을 안전하게 저장하고 자동으로 갱신하여 세션 중단을 피하는 것입니다. 방법은 다음과 같습니다.

저장 방법

보안 수준 성능 Performance 오프라인 접근 최적 사용 사례
안전한 저장 AES-256 하드웨어 Refresh 토큰, 장기 데이터
메모리 저장 높음 (임시) 높음 없음 활성 접근 토큰
정규 저장소 비밀이 아닌 선호도

세션을 유지하기 위해, 만료되기 전에 리프레시 토큰을 갱신하십시오. API 호출을 하기 전에, 액세스 토큰이 만료되기 직전에 있는지 확인하십시오. 만료되기 직전에 있는 경우, OAuth2 제공자에서 새로운 액세스 토큰을 가져오기 위해 리프레시 토큰을 사용하십시오. 네트워크가 다시 연결되면 토큰 리프레시를 다시 시도하는 로직을 포함하는 것이 더 신뢰할 수 있습니다. 리프레시 토큰이 만료되거나 취소되었다면, 사용자들을 다시 로그인하는 흐름으로 리다이렉트하십시오.

로그아웃 기능 추가

안전하고 효과적인 로그아웃 프로세스는 중요합니다. 리프레시 토큰을 제공자의 엔드포인트를 통해 취소하십시오. 그런 다음, 안전한 저장소에서 토큰을 삭제하고 사용자 데이터를 초기화하여 모든 세션을 종료하십시오.

지역 토큰만 삭제하는 것은 충분하지 않습니다. OAuth2 제공자는 자동으로 사용자를 재인증시키기 위해 서버 측 세션을 유지할 수 있습니다. 리프레시 토큰을 취소하면 인증 허가에 연결된 토큰 chain을 끊어, 저장된 자격 증명을 재사용할 수 없도록 합니다.

“JWT Access 토큰은 취소할 수 없습니다. 만료될 때까지 유효합니다. 보유자 토큰이므로 취소할 수 없습니다.” – lihua.zhang, Auth0 직원 [5]

토큰을 취소하려면, 리프레시 토큰을 사용하여 제공자의 토큰 취소 엔드포인트를 호출하고, 지역 저장소에서 토큰을 삭제하십시오. 이 서버 측 액션은 자격 증명이 노출된 경우에도 토큰을 남용하는 것을 방지합니다. 취소 후, 안전한 저장소에서 토큰을 삭제하고 캐시된 사용자 데이터를 초기화하고 사용자들을 로그인 화면으로 안내하십시오.

싱글 시그온(Single Sign-On, SSO) 설정에서 로그아웃 시 다른 앱이 동일한 제공자(provider)를 사용하는 경우 로그아웃이 해당 앱의 세션도 종료할지 결정해야 합니다. 또한 네트워크 중단 시 로그아웃 프로세스가 원활하게 작동하도록 로그아웃 요청을 지역 저장소에 저장하고 네트워크 연결이 복원될 때 다시 시도하는 등 네트워크 중단 시에도 로그아웃이 정상적으로 작동하도록 해야 합니다. 이로써 제공자의 종료 처리가 올바르게 수행됩니다.

4단계: OAuth2 통합 테스트

__CAPGO_KEEP_0__ 설정 후 OAuth2 구성과 인증 흐름 개발을 완료한 후, 다음 단계는 이를 철저히 테스트하는 것입니다. 이는 장치 및 플랫폼을 통해 통합이 무난하게 작동하는지 확인하고 사용자에게 신뢰할 수 있는 경험을 제공하기 위해 중요합니다. 테스트는 모바일 장치와 웹 브라우저에서 기능을 검증하는 것을 포함하며, 앱 출시 전에 잠재적인 문제를 식별하고 해결하는 데에도 중요한 역할을 합니다.

iOS와 안드로이드에서 테스트합니다.

__CAPGO_KEEP_0__에 의해 시작되는 인증 프로세스를 처음부터 끝까지 물리적인 iOS 및 Android 기기에서 테스트하세요.

  • iOS용URL 스킴이 올바르게 설정되어 있는지 확인하세요. Info.plist 파일을 선택하고 OAuth2 제공자의 리다이렉트를 처리하는 방법을 확인하세요. 앱이 리다이렉트를 올바르게 처리하는지 확인하려면 리다이렉트를 사용하지 마세요. WKWebView 인증 요청 시 발생할 수 있는 문제로, 권한 부여에 실패할 수 있습니다. disallowed_useragent 에러가 발생했습니다. 대신 iOS에서 인증 흐름을 효과적으로 처리하기 위해 Google Sign-In for iOS 또는 OpenID Foundation의 AppAuth for iOS와 같은 라이브러리를 사용하세요. [6].

  • 안드로이드용: 네트워크 연결이 잘 되는지 확인하세요 AndroidManifest.xml 권한 부여 URI를 처리하는 올바른 의도 필터를 포함합니다. iOS와 마찬가지로, 권한 부여 요청에 사용하지 않아야 합니다. 이는 오류를 일으킬 수 있습니다. 대신 Android용 Google Sign-In 또는 OpenID AppAuth와 같은 라이브러리를 사용하는 것이 좋습니다. android.webkit.WebView 권한 부여 서버가 사용할 수 없는 경우 오류 시나리오를 테스트하는 것도 중요합니다. 앱이 여러 권한(스코프)을 요청하는 경우, 승인된 권한을 확인하고 일부 권한이 거부된 경우 처리하는 방법을 확인해야 합니다. disallowed_useragent 웹 플랫폼에서 테스트하는 경우 [6].

개발자 도구를 사용하여 네트워크 요청을 모니터링하고 토큰 보안을 확인해야 합니다. OAuth 2.0 플레이그라운드와 같은 도구를 사용하여 흐름을 테스트할 수 있습니다. [7]HTTP 추적 프록시인 ZAP 또는 BurpSuite와 같은 도구를 사용하여 더 깊은 통찰력을 얻을 수 있습니다. [6].

권한 부여 URI를 처리하는 올바른 의도 필터를 포함합니다. iOS와 마찬가지로, 권한 부여 요청에 사용하지 않아야 합니다. 이는 오류를 일으킬 수 있습니다. 대신 Android용 Google Sign-In 또는 OpenID AppAuth와 같은 라이브러리를 사용하는 것이 좋습니다.

권한 부여 서버가 사용할 수 없는 경우 오류 시나리오를 테스트하는 것도 중요합니다. 앱이 여러 권한(스코프)을 요청하는 경우, 승인된 권한을 확인하고 일부 권한이 거부된 경우 처리하는 방법을 확인해야 합니다. [10]웹 플랫폼에서 테스트하는 경우 개발자 도구를 사용하여 네트워크 요청을 모니터링하고 토큰 보안을 확인해야 합니다. OAuth 2.0 플레이그라운드와 같은 도구를 사용하여 흐름을 테스트할 수 있습니다. HTTP 추적 프록시인 ZAP 또는 BurpSuite와 같은 도구를 사용하여 더 깊은 통찰력을 얻을 수 있습니다. 권한 부여 URI를 처리하는 올바른 의도 필터를 포함합니다. iOS와 마찬가지로, 권한 부여 요청에 사용하지 않아야 합니다. 이는 오류를 일으킬 수 있습니다. 대신 Android용 Google Sign-In 또는 OpenID AppAuth와 같은 라이브러리를 사용하는 것이 좋습니다. 권한 부여 서버가 사용할 수 없는 경우 오류 시나리오를 테스트하는 것도 중요합니다. 앱이 여러 권한(스코프)을 요청하는 경우, 승인된 권한을 확인하고 일부 권한이 거부된 경우 처리하는 방법을 확인해야 합니다. [11].

When testing, use the Authorization Code grant with PKCE, as it’s the recommended approach for public clients. Ensure secrets are transmitted securely via POST parameters or header values instead of URL parameters. Additionally, implement security headers like __CAPGO_KEEP_1__ to enhance protection. Referrer-Policy to enhance protection [11].

Fix Common Issues

During testing, you may encounter common issues that need to be addressed:

  • Incorrect Redirect URIs: Mismatched redirect URIs often cause “unauthorized client” errors. Ensure the redirect URI matches exactly across your OAuth2 provider’s settings, the __CAPGO_KEEP_0__ file in your Capgo app, and the native platform manifests. capacitor.config.json file in your Capacitor app, and the native platform manifests.

    PKCE Verification Errors [8]

  • : Confirm that PKCE is supported and configured correctly, as it’s essential for securing your app __CAPGO_KEEP_0__.Plugin Implementation Errors [9].

  • : Errors like “Plugin is not implemented on iOS” typically indicate missing configurations or issues within the Capgo environment. Enable logging in your OAuth2 plugin to help identify and resolve these problemsCapacitor [4].

  • State Mismatch Errors: 인증 요청의 state 매개 변수가 리다이렉트 응답의 state 매개 변수와 일치하지 않으면 보안 위험이 발생할 수 있습니다. 특히 Facebook과 같은 제공자에 대한 사용자 정의 OAuth 핸들러를 사용할 때尤其 중요합니다. 사용자 정의 핸들러 code를 신중하게 검토하여 오류 또는 미설정 상태가 없는지 확인하십시오. [4].

Step 5: OAuth2 구현을 보안하십시오.

OAuth2 통합을 보호하는 것은敏감한 데이터를 보호하고 취약점을 최소화하는 데 중요합니다. 아래는 구현이 안전하게 유지되도록 보장하는 데 필요한 주요 실천 방법입니다.

Enable PKCE 보안을 위해 더 나은 방법

PKCE

인증 흐름을 보안하기 위해 가장 효과적인 방법 중 하나는 PKCE (Proof Key for Code Exchange)를 활성화하는 것입니다. PKCE는 인증 코드의 비인가된 중간 수신을 방지하는 데 도움이 됩니다. 어떻게 작동하는지 알아보겠습니다:

  • 인증 흐름을 보안하기 위해 가장 효과적인 방법 중 하나는 PKCE (Proof Key for __CAPGO_KEEP_0__ Exchange)를 활성화하는 것입니다. PKCE는 인증 코드의 비인가된 중간 수신을 방지하는 데 도움이 됩니다. 어떻게 작동하는지 알아보겠습니다: code_verifier 인증 흐름을 보안하기 위해 가장 효과적인 방법 중 하나는 PKCE (Proof Key for __CAPGO_KEEP_0__ Exchange)를 활성화하는 것입니다. PKCE는 인증 코드의 비인가된 중간 수신을 방지하는 데 도움이 됩니다. 어떻게 작동하는지 알아보겠습니다:
  • 인증 흐름을 보안하기 위해 가장 효과적인 방법 중 하나는 PKCE (Proof Key for __CAPGO_KEEP_0__ Exchange)를 활성화하는 것입니다. PKCE는 인증 코드의 비인가된 중간 수신을 방지하는 데 도움이 됩니다. 어떻게 작동하는지 알아보겠습니다: code_challenge by hashing the __CAPGO_KEEP_0__ code_verifier __CAPGO_KEEP_0__ SHA-256 해시를 base64 URL 형식으로 인코딩합니다.

Capacitor with Cloudflare, you can use the Capgo to manage your project. capacitor-community/generic-oauth2 플러그인에서 PKCE를 활성화하는 것은 간단합니다. 예를 들어 다음과 같은 설정을 사용할 수 있습니다.

{
  responseType: "code",
  pkceEnable: true,
  redirectUrl: "com.companyname.appname:/"
}

이 플러그인은 PKCE를 자동으로 처리하고 Code Flow를 지원하지 않습니다. code_challenge_method 기본적으로 올바른 검증을 위해 "S256"으로 설정됩니다. [12].

토큰을 안전하게 저장하세요

OAuth2 토큰을 안전하게 저장하는 것은 비인가 접근을 막기 위해 필수적입니다. 네이티브 모바일 앱의 경우 운영 체제가 제공하는 안전한 저장소를 활용하세요.

  • iOS에서 사용하려면 Capgo를 사용하세요. 키 체인 하드웨어 기반 암호화 및 운영 체제 수준 보호를 위해.
  • 안드로이드에서 사용하세요 __CAPGO_KEEP_0____CAPGO_KEEP_1__ 생체 인증 추가 보안을 위해

웹 애플리케이션의 경우, HttpOnly 보안 쿠키 attribute를 사용하여 XSS 위협을 완화합니다. SameSite 보안 저장소 옵션의 빠른 비교:

저장소 옵션

추천 사용 보안 이점 추가 보안 Considerations
iOS Keychain 네이티브 iOS 앱 하드웨어 백업 암호화 및 OS 수준 보호 플랫폼별 구현이 필요합니다.
Android Keystore 네이티브 Android 앱 장치 보안 기능에 따라 잠재적인 생체 인증 보호를 갖춘 안전한 저장 장치 보안 기능에 따라 다릅니다.
HttpOnly 쿠키 웹 브라우저 XSS에 저항하고 자동 전송이 안전합니다. 동일 도메인 API 접근을 위해 구성되어야 함
프론트엔드 백엔드 모든 플랫폼 클라이언트에 노출되는 토큰이 없습니다 추가 서버 인프라가 필요합니다

보안을 강화하기 위해, 짧은 유효 기간의 접근 토큰 및 암호화된 저장소를 사용하는 것을 고려하세요. 예를 들어, Auth0는 사용자당 애플리케이션당 200개의 활성 리프레시 토큰을 제한하여 위험을 줄입니다 [13]백엔드 프론트엔드(BFF) 프록시를 사용하여 HttpOnly 쿠키를 사용하여 보안을 강화할 수 있습니다 [14].

설정

보안 저장소 외에도 Content Security Policies(CSP)를 구현하여 XSS 및 code 삽입 공격으로부터 앱을 보호할 수 있습니다. 서버 수준에서 CSP를 구성하려면 HTTP 헤더를 사용하거나 HTML에 태그를 추가하세요. Content-Security-Policy HTTP 헤더 또는 HTML 태그 <meta> 주요 지시문을 중점적으로 고려해야 하는 항목이 있습니다

설정

  • default-src__CAPGO_KEEP_0__
  • script-src__CAPGO_KEEP_0__
  • connect-srcAPI
  • frame-ancestors__CAPGO_KEEP_0__

For maximum protection, use strict nonces or hashes instead of broad allowlists, and avoid directives like __CAPGO_KEEP_0__ or __CAPGO_KEEP_0__. unsafe-inline or unsafe-evalIf your app is transitioning from HTTP to HTTPS, consider adding the __CAPGO_KEEP_0__ directive. upgrade-insecure-requests To ensure your OAuth2 content cannot be embedded elsewhere, set __CAPGO_KEEP_0__ frame-ancestors 'none'.

결론 및 다음 단계

중요한 점

Capacitor 앱에서 OAuth2 인증을 성공적으로 구현했습니다. 5 가지 핵심 단계를 따랐습니다. 이들은 OAuth2 제공자를 설정하는 것, 필요한 플러그인을 설치하는 것, 인증 흐름을 만드는 것, 플랫폼을 통해 테스트하는 것, PKCE 및 토큰 저장을 올바르게 사용하여 통합을 보안하는 것입니다. OAuth 2.0은 인증 프로토콜이 아닌 권한 부여 프로토콜입니다. 권한 부여의 초점은 사용자 식별을 확인하는 것보다 접근 권한을 부여하는 것입니다. 보안은 특히 모바일 앱에서 중요합니다. OAuth 2.0을 사용하는 조직은 기본 인증 방법에 의존하는 조직보다 34% 더 적은 __CAPGO_KEEP_0__ 접근 보안 사고를 보고했습니다.OAuth2를 사용하면 보안 프레임워크를 유지하면서 앱의 기능성을 확장하는 방법을 탐색할 수 있습니다. [1]더 많은 기능 추가

Security is crucial, especially for mobile apps. Organizations using OAuth 2.0 report a 34% drop in API access security incidents compared to those relying on basic authentication methods [19]OpenID Connect

OpenID Connect

OpenID Connect

OpenID Connect

  • OpenID Connect (OIDC): OAuth 2.0을 사용자 인증 및 Single Sign-On (SSO) 기능으로 확장합니다. [16].
  • Multi-Factor Authentication (MFA): 보안을 강화하기 위해 추가 보호层을 추가하세요. [17].
  • Progressive Profiling: 사용자 데이터를 점진적으로 수집하여 온보딩 및 사용자 경험을 향상하세요. [15].

For ongoing maintenance and updates, consider tools like Capgo, 이 도구는 앱 스토어 승인 대기 없이 즉시 라이브 업데이트, 수정 및 새로운 기능을 푸시할 수 있게 해줍니다. 보안 패치 또는 새로운 인증 기능을 빠르게 출시할 때 especialmente 유용합니다.

More Resources

OAuth2 구현을 더욱 강화하기 위해 이러한 리소스 및 전략을 활용하세요:

  • API Gateway Security: __CAPGO_KEEP_0__을 구현하고 인증 및 권한 부여, 캐싱 및 강력한 로깅 및 분석을 통해 배포를 강화하세요. [20].

  • 아론 파레키의 조언: 아론 파레키의 저서인 OAuth 2.0 Simplified:

    “서버 측 애플리케이션에서 가능한 경우 Authorization Code Flow를 사용하는 것이 가장 안전한 OAuth 2.0 흐름입니다.” [18].

다음 단계를 안내하는 빠른 참조 표입니다.

Phase 중요한 주목점
시스템 구성 토큰 생명주기 관리, HTTPS 강제,敏感 정보 안전 저장
토큰 관리 단기 액세스 토큰 사용 및 리프레시 토큰 회전
Validation Process 인증서와 토큰 만료를 확인하세요.

최신 버전의 구현을 유지하고 정기적인 보안 감사를 수행하여 앞서 나아가세요. 예를 들어 OAuth 2.1은 모든 인증 code 요청에 대해 PKCE를 요구하고 더 안전하지 않은 흐름을 폐지합니다. [19]또한 Capacitor 문서와 OAuth2 플러그인 저장소는 앱의 인증 시스템 유지 및 개선에 도움이 되는 지속적인 기술 지원을 제공합니다.

FAQs

::: faq

OAuth2 인증 Code Flow를 사용하여 PKCE를 사용하는 모바일 앱의 이유는 무엇인가요?

OAuth2 인증 Code Flow를 사용하여 PKCE를 사용하는 모바일 앱의 이유는 무엇인가요?

The 인증 Code Flow with PKCE 인증 code Flow with PKCE는 모바일 앱의 보안을 강화하는 데 사용되는 보안 강화 기술입니다. PKCE (Proof Key for Code Exchange)는 인증 서버가 인증 code challenge를 검증하는 추가 보호 계층을 제공합니다. 이로 인해 인증 프로세스를 완료하는 데 사용되는 앱만 인증이 가능합니다.

모바일 앱은 공개 클라이언트로 분류되며, 클라이언트 시크릿을 안전하게 저장할 수 없습니다. PKCE는 이러한 문제를 해결하여 사용자 인증을 안전하게 수행할 수 있도록 합니다. 결과적으로 사용자 경험을 향상시키는 더 안전하고 신뢰할 수 있는 로그인 프로세스가 가능합니다. :::

::: faq

iOS, 안드로이드, 웹 앱에서 OAuth2 토큰을 안전하게 저장하는 가장 좋은 방법은 무엇인가?

OAuth2 토큰을 다양한 플랫폼에서 안전하게 보호하려면 각 플랫폼에 맞는 보안 저장 솔루션을 사용하는 것이 중요합니다.iOS에서는 Keychain Services를, 안드로이드에서는 Android Keystore 시스템을 사용하는 것이 좋습니다. 이 두 가지 도구는敏감한 데이터를 보호하기 위해 특별히 설계되었습니다.

웹에서는 보안 쿠키 또는 암호화된 브라우저 저장소를 사용할 수 있습니다. 토큰을 추가로 보호하기 위해 AES-256 암호화를 사용하는 것이 좋습니다. 토큰의 유효 기간을 짧게 유지하고 필요할 때만 갱신하는 것이 위험을 줄이는 또 다른 방법입니다. PKCE (Proof Key for Code Exchange)를 OAuth2 프로세스에 구현하는 것은 불법적인 접근을 차단하는 또 다른 좋은 방법입니다. 더욱 강력한 보호를 위해, 사용자만이 저장된 토큰에 접근할 수 있도록 생체 인증을 통합하는 것이 좋습니다. :::

::: faq

Capacitor 앱에서 OAuth2 통합 테스트 시 가장 일반적인 문제점은 무엇이며, 이를 해결하는 방법은?

When testing OAuth2 integration in Capacitor apps, developers might run into a few common roadblocks. Here’s a quick rundown of what to watch out for:

  • Invalid Client Credentials: 클라이언트 ID 및 비밀번호가 올바르게 설정되어 있으며 OAuth 제공자의 구성에서 일치하는지 확인하세요. 작은 타이포도 문제를 일으킬 수 있습니다.
  • Redirect URI Mismatch: 앱의 리다이렉션 URI는 OAuth 제공자에 등록된 URI와 정확히 일치해야 합니다. 이 문제를 피하기 위해 이 항목을 다시 확인하세요.
  • Token Expiration: 토큰은 영원히 존재하지 않습니다. 만료된 토큰을 처리하는 신뢰할 수 있는 토큰 리프레시 시스템을 설정하여 사용자 경험을 중단하지 않고 토큰을 갱신하세요.
  • Scope Misconfiguration: 앱에서 요청하는 범위가 OAuth 제공자에서 구성된 범위와 일치해야 합니다. 일치하지 않는 범위는 예상치 못한 오류로 이어질 수 있습니다.

To tackle these issues, take the time to review your app’s OAuth setup thoroughly. Implement strong error handling to catch and address problems early, and test your authentication flow under different scenarios. Tools like Capgo can make life easier by allowing you to push updates and fixes directly to your app without waiting for app store approvals, keeping development efficient and users happy. :::

Keep going from 5 Steps to Implement OAuth2 in Capacitor Apps

If you are using Capacitor 앱에 OAuth2를 Implement하는 5 단계 __CAPGO_KEEP_0__ 앱의 보안과 규정 준수를 계획하기 위해 연결하세요. 암호화 __CAPGO_KEEP_0__ 앱의 암호화 구현 세부 사항에 대해 규정 준수 __CAPGO_KEEP_0__ 앱의 규정 준수 구현 세부 사항에 대해 Capgo 보안 스캐너 Capgo 보안 스캐너의 제품 워크플로에 대해 Capgo 보안 Capgo 보안의 제품 워크플로에 대해 Capgo 신뢰 센터 Capgo 신뢰 센터의 제품 워크플로에 대해

Capacitor 앱의 실시간 업데이트

웹-layer 버그가 생겼을 때, 앱 스토어 승인까지 며칠 기다리지 않고 Capgo를 통해 패치를 배포하세요. 사용자는 배경에서 업데이트를 받으며, 네이티브 변경 사항은 일반적인 리뷰 경로를 따릅니다.

시작하기

블로그에서 최신 뉴스

Capgo는 전문적인 모바일 앱을 만들기 위해 필요한 최고의洞察력을 제공합니다.