Apache Cordova 앱에 인증 추가

요약

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

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

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

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

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

인증된 사용자에 대한 권한 제한

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

Node.js 백 엔드(Azure 포털을 통해).

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

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

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

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

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

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

앱에 인증 추가

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

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

공급자	SDK 공급자 이름	OAuth 호스트
애저 액티브 디렉터리	에이에이디 (AAD)	`https://login.microsoftonline.com`
Facebook	facebook	https://www.facebook.com
Google	Google	https://accounts.google.com
Microsoft	마이크로소프트 계정	https://login.live.com
트위터	트위터	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'">

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

일부 인증 공급자는 적절한 모바일 디바이스에서 사용되는 경우 콘텐츠Security-Policy 변경이 필요하지 않습니다. 예를 들어 Android 디바이스에서 Google 인증을 사용하는 경우 콘텐츠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 Promise를 반환하는 비동기 함수입니다. 나머지 초기화는 promise 응답 내에 배치되므로 login() 메서드가 완료될 때까지 실행되지 않습니다.
방금 추가한 코드에서 SDK_Provider_Name을(를) 로그인 공급자의 이름으로 바꾸십시오. 예를 들어 Azure Active Directory를 사용할 때 client.login('aad')을(를) 사용하십시오.
프로젝트를 실행합니다. 프로젝트 초기화가 완료되면 애플리케이션에 선택한 인증 공급자에 대한 OAuth 로그인 페이지가 표시됩니다.

다음 단계

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

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

Last updated on 2019-06-25