Apache Cordova 앱에 인증 추가

아티클
05/05/2021

메모

이 제품은 사용 중지되었습니다. .NET 8 이상을 사용하는 프로젝트를 대체하려면 Community Toolkit Datasync 라이브러리참조하세요.

이 자습서에서는 Microsoft Entra ID를 사용하여 빠른 시작 프로젝트에 Microsoft 인증을 추가합니다. 이 자습서를 완료하기 전에 프로젝트 만들고 오프라인 동기화사용하도록 설정했는지 확인합니다.

인증을 위해 백 엔드 구성

인증을 위해 백 엔드를 구성하려면 다음을 수행해야 합니다.

앱 등록을 만듭니다.
Azure App Service 인증 및 권한 부여를 구성합니다.
허용되는 외부 리디렉션 URL에 앱을 추가합니다.

이 자습서에서는 Microsoft 인증을 사용하도록 앱을 구성합니다. Microsoft Entra 테넌트가 Azure 구독에서 자동으로 구성되었습니다. Microsoft Entra ID를 사용하여 Microsoft 인증을 구성할 수 있습니다.

서비스를 프로비전할 때 제공된 Azure Mobile Apps 서비스의 백 엔드 URL이 필요합니다.

앱 등록 만들기

Azure Portal로그인합니다.
새 등록Microsoft Entra ID앱 등록을 선택합니다.
애플리케이션 등록 페이지의 이름 필드에 zumoquickstart 입력합니다.
지원되는 계정 유형따라 모든 조직 디렉터리(모든 Microsoft Entra 디렉터리 - 다중 테넌트) 및 개인 Microsoft 계정(예: Skype, Xbox)계정을 선택합니다.
리디렉션 URI웹 선택하고 입력합니다. 예를 들어 백 엔드 URL이 https://zumo-abcd1234.azurewebsites.net경우 https://zumo-abcd1234.azurewebsites.net/.auth/login/aad/callback입력합니다.
양식 아래쪽의 등록 단추를 누릅니다.
애플리케이션(클라이언트) ID복사합니다.
왼쪽 창에서 새 클라이언트 암호인증서 & 비밀을 선택합니다.
적절한 설명을 입력하고 유효 기간을 선택한 다음 추가를 선택합니다.
인증서 & 비밀 페이지에서 비밀을 복사합니다. 값이 다시 표시되지 않습니다.
인증선택합니다.
암시적 허용 및 하이브리드 흐름ID 토큰사용하도록 설정합니다.
페이지 맨 위에서 저장 누릅니다.

중요하다

클라이언트 비밀 값(암호)은 중요한 보안 자격 증명입니다. 암호를 누구와도 공유하거나 클라이언트 애플리케이션 내에 배포하지 마세요.

Azure App Service 인증 및 권한 부여 구성

Azure Portal모든 리소스App Service를 선택합니다.
설정>인증선택합니다.
ID 공급자추가를 누릅니다.
MICROSOFT ID 공급자로 선택합니다.
- 앱 등록 유형기존 앱 등록세부 정보 제공을 선택합니다.
- 이전에 복사한 값을 애플리케이션(클라이언트) ID 붙여넣고 클라이언트 비밀 상자에 .
- 발급자 URL입력합니다. 이 URL은 Microsoft 로그인에 대한 "매직 테넌트 URL"입니다.
- 액세스제한하려면 인증선택합니다.
- 인증되지 않은 요청HTTP 401 권한 없음선택합니다.
추가누릅니다.
인증 화면이 반환되면 인증 설정 옆의 편집 누릅니다.
허용된 외부 리디렉션 URL 상자에 zumoquickstart://easyauth.callback입력합니다.
저장을 누릅니다.

10단계에서는 백 엔드에 액세스하기 전에 모든 사용자를 인증해야 합니다. 백 엔드에 코드를 추가하여 세분화된 컨트롤을 제공할 수 있습니다.

알고 계셨나요? Microsoft Entra ID, Facebook, Google, Twitter 또는 OpenID Connect 호환 공급자에서 조직 계정을 가진 사용자를 허용할 수도 있습니다. Azure App Service 설명서지침을 따릅니다.

인증이 요청되고 있는지 테스트

cordova run android 사용하여 앱 실행
앱이 시작된 후 상태 코드가 401(권한 없음)인 처리되지 않은 예외가 발생하는지 확인합니다.

앱에 인증 추가

기본 제공 공급자를 통해 인증을 추가하려면 다음을 수행해야 합니다.

인증 공급자를 알려진 좋은 원본 목록에 추가합니다.
데이터에 액세스하기 전에 인증 공급자를 호출합니다.

콘텐츠 보안 정책 업데이트

각 Apache Cordova 앱은 Content-Security-Policy 헤더를 통해 알려진 좋은 소스를 선언합니다. 지원되는 각 공급자에는 추가해야 하는 OAuth 호스트가 있습니다.

공급자	SDK 공급자 이름	OAuth 호스트
Microsoft Entra ID	Microsoft Entra ID	`https://login.microsoftonline.com`
Facebook	facebook	`https://www.facebook.com`
Google	Google	`https://accounts.google.com`
지저귀다	지저귀다	`https://api.twitter.com`

편집 www/index.html; 다음과 같이 Microsoft Entra ID에 대한 OAuth 호스트를 추가합니다.

<meta http-equiv="Content-Security-Policy" content="
    default-src 'self' 
    data: gap: https://login.microsoftonline.com https://ZUMOAPPNAME.azurewebsites.net; 
    style-src 'self'; media-src *;">

콘텐츠는 가독성을 위해 여러 줄입니다. 모든 코드를 동일한 줄에 배치합니다.

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://login.microsoftonline.com https://ZUMOAPPNAME.azurewebsites.net; style-src 'self'; media-src *;">

이미 ZUMOAPPNAME 앱 이름으로 바꿔 했습니다.

인증 공급자 호출

www/js/index.js편집합니다. setup() 메서드를 다음 코드로 바꿉다.

function setup() {
    client.login('aad').then(function () {
        // ORIGINAL CONTENTS OF FUNCTION
        todoTable = client.getSyncTable('todoitem');
        refreshDisplay();
        addItemEl.addEventListener('submit', addItemHandler);
        refreshButtonEl.addEventListener('click', refreshDisplay);
        // END OF ORIGINAL CONTENTS OF FUNCTION
    });
}

앱 테스트

다음 명령을 실행합니다.

cordova run android

초기 시작이 완료되면 Microsoft 자격 증명으로 로그인하라는 메시지가 표시됩니다. 완료되면 목록에서 항목을 추가하고 삭제할 수 있습니다.

팁

에뮬레이터가 자동으로 시작되지 않으면 Android Studio를 열고 >AVD Manager구성을 선택합니다. 이렇게 하면 디바이스를 수동으로 시작할 수 있습니다. adb devices -l실행하면 선택한 에뮬레이트된 디바이스가 표시됩니다.

리소스 삭제

이제 빠른 시작 자습서를 완료했으므로 az group delete -n zumo-quickstart사용하여 리소스를 삭제할 수 있습니다. 포털을 통해 인증에 사용되는 전역 앱 등록을 삭제할 수도 있습니다.

다음 단계

HOW TO 섹션을 살펴보세요.

Server(Node.js)
Server(ASP.NET Framework)
apache Cordova 클라이언트

동일한 서비스를 사용하여 다른 플랫폼에 대해 빠른 시작을 수행할 수도 있습니다.

UWP(Windows)
WPF(Windows)
Xamarin.Android
Xamarin.Forms
Xamarin.iOS

다음을 통해 공유