Apache Cordova 앱에 인증 추가

아티클
06/25/2019

요약

이 자습서에서는 지원되는 ID 공급자를 사용하여 Apache Cordova의 할 일 모음 빠른 시작 프로젝트에 인증을 추가합니다. 이 자습서는 Mobile Apps 시작 자습서를 기반으로 하며 이를 먼저 완료해야 합니다.

인증을 위해 앱 등록 및 App Service 구성

우선 ID 공급자 사이트에서 앱을 등록한 다음 Mobile Apps 백 엔드에서 공급자가 생성한 자격 증명을 설정합니다.

공급자 관련 지침에 따라 기본 설정된 ID 공급자를 구성합니다.
앱에서 지원하려는 각 공급자에 대해 이전 단계를 반복합니다.

유사한 단계를 보여 주는 비디오 보기

사용 권한을 인증된 사용자로 제한

기본적으로 Mobile Apps 백 엔드의 API는 익명으로 호출할 수 있습니다. 다음으로, 인증된 클라이언트로만 액세스를 제한해야 합니다.

Node.js 백 엔드(Azure Portal을 통해):

Mobile Apps 설정에서 간편한 테이블을 클릭하고 테이블을 선택합니다. 사용 권한 변경을 클릭하고 모든 사용 권한에 대해 인증된 액세스만을 선택한 다음 저장을 클릭합니다.
.NET 백 엔드(C#):

서버 프로젝트에서 ControllersTodoItemController.cs>로 이동합니다. 다음과 같이 TodoItemController 클래스에 [Authorize] 특성을 추가합니다. 특정 메서드로만 액세스를 제한하기 위해 이 특성을 클래스 대신 해당 메서드에만 적용할 수도 있습니다. 서버 프로젝트를 다시 게시합니다.
```
  [Authorize]
  public class TodoItemController : TableController<TodoItem>
```
(Node.js 코드를 통해) Node.js 백 엔드 :

테이블 액세스에 대한 인증을 요청하려면 Node.js 서버 스크립트에 다음 줄을 추가합니다.
```
  table.access = 'authenticated';
```
자세한 내용은 방법: 테이블에 대한 액세스 인증 요구를 참조하세요. 사이트에서 빠른 시작 코드 프로젝트를 다운로드하는 방법을 알아보려면 방법: Git를 사용하여 Node.js 백 엔드 빠른 시작 코드 프로젝트 다운로드를 참조하세요.

이제 백 엔드에 대한 익명 액세스가 비활성화되었는지 확인할 수 있습니다. Visual Studio에서 다음을 수행합니다.

Mobile Apps 시작자습서를 완료했을 때 생성된 프로젝트를 엽니다.
Google Android 에뮬레이터에서 애플리케이션을 실행합니다.
앱이 시작된 후 예기치 않은 연결 오류가 표시되는지 확인합니다.

다음으로 앱을 업데이트하여 모바일 앱 백 엔드에서 리소스를 요청하기 전에 사용자를 인증하도록 합니다.

앱에 인증 추가

Visual Studio에서 프로젝트를 연 다음 편집을 위해 www/index.html 파일을 엽니다.

헤드 섹션에서 Content-Security-Policy META 태그를 찾습니다. 허용된 원본 목록에 OAuth 호스트를 추가합니다.

공급자	SDK 공급자 이름	OAuth 호스트
Azure Active Directory	aad	https://login.microsoftonline.com
Facebook	facebook	https://www.facebook.com
Google	Google	https://accounts.google.com
Microsoft	microsoftaccount	https://login.live.com
Twitter	Twitter	https://api.twitter.com

다음은 Content-Security-Policy(Azure Active Directory용으로 구현됨) 예제입니다.

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

https://login.microsoftonline.com을 위 표의 OAuth 호스트로 바꿉니다. content-security-policy 메타 태그에 대한 자세한 내용은 Content-Security-Policy 설명서를 참조하세요.

일부 인증 공급자에서는 적절한 모바일 디바이스에서 사용하는 경우 Content-Security-Policy 변경이 필요하지 않습니다. 예를 들어 Android 디바이스에서 Google 인증을 사용하는 경우 Content-Security-Policy를 변경하지 않아도 됩니다.

편집을 www/js/index.js 위해 파일을 열고, 메서드를 onDeviceReady() 찾고, 클라이언트 생성 코드에서 다음 코드를 추가합니다.
```
 // Login to the service
 client.login('SDK_Provider_Name')
     .then(function () {

         // BEGINNING OF ORIGINAL CODE

         // Create a table reference
         todoItemTable = client.getTable('todoitem');

         // Refresh the todoItems
         refreshDisplay();

         // Wire up the UI Event Handler for the Add Item
         $('#add-item').submit(addItemHandler);
         $('#refresh').on('click', refreshDisplay);

         // END OF ORIGINAL CODE

     }, handleError);
```
이 코드는 테이블 참조를 만들고 UI를 새로 고치는 기존 코드를 바꿉니다.

login() 메서드는 공급자를 사용하여 인증을 시작합니다. login() 메서드는 JavaScript 프라미스를 반환하는 비동기 함수입니다. 초기화의 나머지는 login() 메서드가 완료될 때까지 실행되지 않도록 프라미스 응답 안에 배치됩니다.
방금 추가한 코드에서 SDK_Provider_Name 를 로그인 공급자 이름으로 바꿉니다. 예를 들어 Azure Active Directory의 경우 client.login('aad')를 사용합니다.
프로젝트를 실행합니다. 프로젝트 초기화가 완료되면 애플리케이션에서 선택한 인증 공급자에 대한 OAuth 로그인 페이지를 표시합니다.

다음 단계

Azure App Service의 인증 정보 에 대해 자세히 알아봅니다.
푸시 알림 을 Apache Cordova 앱에 추가하여 자습서를 계속합니다.

SDK 사용 방법을 알아봅니다.

다음을 통해 공유

Apache Cordova 앱에 인증 추가

요약

인증을 위해 앱 등록 및 App Service 구성

사용 권한을 인증된 사용자로 제한

앱에 인증 추가

다음 단계

추가 리소스