Windows 앱에 인증 추가

개요

이 항목에서는 모바일 앱에 클라우드 기반 인증을 추가하는 방법을 보여 줍니다. 이 자습서에서는 Azure App Service에서 지원하는 ID 공급자를 사용하여 Mobile Apps용 UWP(유니버설 Windows 플랫폼) 빠른 시작 프로젝트에 인증을 추가합니다. 모바일 앱 백 엔드에서 인증 및 권한을 성공적으로 부여하면 사용자 ID 값이 표시됩니다.

이 자습서는 Mobile Apps 빠른 시작을 기반으로 합니다. 먼저 Mobile Apps 시작 자습서를 완료해야 합니다.

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

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

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

허용되는 외부 리디렉션 URL에 앱 추가

보안 인증을 사용하려면 앱에 대한 새 URL 체계를 정의해야 합니다. 이렇게 하면 인증 프로세스가 완료되면 인증 시스템이 앱으로 다시 리디렉션할 수 있습니다. 이 자습서에서는 url 체계 앱 이름 사용합니다. 그러나 선택한 URL 체계를 사용할 수 있습니다. 모바일 애플리케이션에 고유해야 합니다. 서버 쪽에서 리디렉션을 사용하도록 설정하려면 다음을 수행합니다.

Azure 포털에서 App Service를 선택하십시오.
인증/권한 부여 메뉴 옵션을 클릭합니다.
허용된 외부 리디렉션 URL에 url_scheme_of_your_app://easyauth.callback를 입력합니다. 이 문자열에서의 url_scheme_of_your_app은 귀하의 모바일 애플리케이션을 위한 URL 체계입니다. 프로토콜에 대한 일반 URL 사양을 따라야 합니다(문자와 숫자만 사용하고 문자로 시작). 여러 위치에서 URL 체계를 사용하여 모바일 애플리케이션 코드를 조정해야 하므로 선택한 문자열을 기록해 두어야 합니다.
저장을 클릭합니다.

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

기본적으로 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 백 엔드 빠른 시작 코드 프로젝트 다운로드를 참조하세요.

이제 백 엔드에 대한 익명 액세스가 비활성화되었는지 확인할 수 있습니다. UWP 앱 프로젝트를 시작 프로젝트로 설정하면 앱을 배포하고 실행합니다. 앱이 시작된 후 상태 코드가 401(권한 없음)인 처리되지 않은 예외가 발생하는지 확인합니다. 이 문제는 앱이 인증되지 않은 사용자로 모바일 앱 코드에 액세스하려고 하지만 이제 TodoItem 테이블에 인증이 필요하기 때문에 발생합니다.

다음으로 App Service에서 리소스를 요청하기 전에 사용자를 인증하도록 앱을 업데이트합니다.

앱에 인증 추가

UWP 앱 프로젝트 파일에서 MainPage.xaml.cs 다음 코드 조각을 추가합니다.

 // Define a member variable for storing the signed-in user. 
 private MobileServiceUser user;

 // Define a method that performs the authentication process
 // using a Facebook sign-in. 
 private async System.Threading.Tasks.Task<bool> AuthenticateAsync()
 {
     string message;
     bool success = false;
     try
     {
         // Change 'MobileService' to the name of your MobileServiceClient instance.
         // Sign-in using Facebook authentication.
         user = await App.MobileService
             .LoginAsync(MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
         message =
             string.Format("You are now signed in - {0}", user.UserId);

         success = true;
     }
     catch (InvalidOperationException)
     {
         message = "You must log in. Login Required";
     }

     var dialog = new MessageDialog(message);
     dialog.Commands.Add(new UICommand("OK"));
     await dialog.ShowAsync();
     return success;
 }

이 코드는 Facebook 로그인을 사용하여 사용자를 인증합니다. Facebook 이외의 ID 공급자를 사용하는 경우 위의 MobileServiceAuthenticationProvider 값을 공급자의 값으로 변경합니다.

MainPage.xaml.cs OnNavigatedTo() 메서드를 바꿉니다. 다음으로, 인증을 트리거하는 앱에 로그인 단추를 추가합니다.

 protected override async void OnNavigatedTo(NavigationEventArgs e)
 {
     if (e.Parameter is Uri)
     {
         App.MobileService.ResumeWithURL(e.Parameter as Uri);
     }
 }

MainPage.xaml.cs 다음 코드 조각을 추가합니다.

 private async void ButtonLogin_Click(object sender, RoutedEventArgs e)
 {
     // Login the user and then load data from the mobile app.
     if (await AuthenticateAsync())
     {
         // Switch the buttons and load items from the mobile app.
         ButtonLogin.Visibility = Visibility.Collapsed;
         ButtonSave.Visibility = Visibility.Visible;
         //await InitLocalStoreAsync(); //offline sync support.
         await RefreshTodoItems();
     }
 }

MainPage.xaml 프로젝트 파일을 열고 저장 단추를 정의하는 요소를 찾아 다음 코드로 바꿉니다.

 <Button Name="ButtonSave" Visibility="Collapsed" Margin="0,8,8,0" 
         Click="ButtonSave_Click">
     <StackPanel Orientation="Horizontal">
         <SymbolIcon Symbol="Add"/>
         <TextBlock Margin="5">Save</TextBlock>
     </StackPanel>
 </Button>
 <Button Name="ButtonLogin" Visibility="Visible" Margin="0,8,8,0" 
         Click="ButtonLogin_Click" TabIndex="0">
     <StackPanel Orientation="Horizontal">
         <SymbolIcon Symbol="Permissions"/>
         <TextBlock Margin="5">Sign in</TextBlock> 
     </StackPanel>
 </Button>

App.xaml.cs 다음 코드 조각을 추가합니다.

 protected override void OnActivated(IActivatedEventArgs args)
 {
     if (args.Kind == ActivationKind.Protocol)
     {
         ProtocolActivatedEventArgs protocolArgs = args as ProtocolActivatedEventArgs;
         Frame content = Window.Current.Content as Frame;
         if (content.Content.GetType() == typeof(MainPage))
         {
             content.Navigate(typeof(MainPage), protocolArgs.Uri);
         }
     }
     Window.Current.Activate();
     base.OnActivated(args);
 }

Package.appxmanifest 파일을 열고 선언으로 이동하여 사용 가능한 선언 드롭다운 목록에서 프로토콜 을 선택하고 추가 단추를 클릭합니다. 이제 프로토콜 선언의 속성을 구성합니다. 표시 이름에서 표시할 이름을 애플리케이션의 사용자에게 추가합니다. 이름에 {url_scheme_of_your_app}을(를) 추가하세요.
F5 키를 눌러 앱을 실행하고 로그인 단추를 클릭한 다음 선택한 ID 공급자를 사용하여 앱에 로그인합니다. 로그인에 성공하면 앱이 오류 없이 실행되고 백 엔드를 쿼리하고 데이터를 업데이트할 수 있습니다.

클라이언트에 인증 토큰 저장

이전 예제에서는 앱이 시작될 때마다 클라이언트가 ID 공급자와 App Service에 모두 연결해야 하는 표준 로그인을 보여 줍니다. 이 방법은 비효율적일 뿐만 아니라 많은 고객이 동시에 앱을 시작하려고 하면 사용 관련 문제가 발생할 수 있습니다. 더 나은 방법은 App Service에서 반환된 권한 부여 토큰을 캐시하고 공급자 기반 로그인을 사용하기 전에 먼저 이 토큰을 사용하는 것입니다.

비고

클라이언트 관리 인증 또는 서비스 관리 인증을 사용하는지 여부에 관계없이 App Services에서 발급한 토큰을 캐시할 수 있습니다. 이 자습서에서는 서비스 관리 인증을 사용합니다.

MainPage.xaml.cs 프로젝트 파일에서 다음 using 문을 추가합니다.
```
 using System.Linq;        
 using Windows.Security.Credentials;
```

AuthenticateAsync 메서드를 다음 코드로 바꿉다.

 private async System.Threading.Tasks.Task<bool> AuthenticateAsync()
 {
     string message;
     bool success = false;

     // This sample uses the Facebook provider.
     var provider = MobileServiceAuthenticationProvider.Facebook;

     // Use the PasswordVault to securely store and access credentials.
     PasswordVault vault = new PasswordVault();
     PasswordCredential credential = null;

     try
     {
         // Try to get an existing credential from the vault.
         credential = vault.FindAllByResource(provider.ToString()).FirstOrDefault();
     }
     catch (Exception)
     {
         // When there is no matching resource an error occurs, which we ignore.
     }

     if (credential != null)
     {
         // Create a user from the stored credentials.
         user = new MobileServiceUser(credential.UserName);
         credential.RetrievePassword();
         user.MobileServiceAuthenticationToken = credential.Password;

         // Set the user from the stored credentials.
         App.MobileService.CurrentUser = user;

         // Consider adding a check to determine if the token is 
         // expired, as shown in this post: https://aka.ms/jww5vp.

         success = true;
         message = string.Format("Cached credentials for user - {0}", user.UserId);
     }
     else
     {
         try
         {
             // Sign in with the identity provider.
             user = await App.MobileService
                 .LoginAsync(provider, "{url_scheme_of_your_app}");

             // Create and store the user credentials.
             credential = new PasswordCredential(provider.ToString(),
                 user.UserId, user.MobileServiceAuthenticationToken);
             vault.Add(credential);

             success = true;
             message = string.Format("You are now signed in - {0}", user.UserId);
         }
         catch (MobileServiceInvalidOperationException)
         {
             message = "You must sign in. Sign-In Required";
         }
     }

     var dialog = new MessageDialog(message);
     dialog.Commands.Add(new UICommand("OK"));
     await dialog.ShowAsync();

     return success;
 }

이 버전의 AuthenticateAsync에서 앱은 PasswordVault 에 저장된 자격 증명을 사용하여 서비스에 액세스하려고 합니다. 저장된 자격 증명이 없는 경우에도 일반 로그인이 수행됩니다.

비고

캐시된 토큰이 만료될 수 있으며, 앱이 사용 중일 때 인증 후에 토큰 만료가 발생할 수도 있습니다. 토큰이 만료되었는지 확인하는 방법을 알아보려면 만료된 인증 토큰 확인을 참조하세요. 만료 토큰과 관련된 권한 부여 오류를 처리하는 솔루션은 Azure Mobile Services 관리형 SDK에서 캐시 후 만료된 토큰을 처리하는 방법을 참조하세요.

앱을 두 번 다시 시작합니다.

첫 번째 시작 시 공급자와의 로그인이 다시 필요합니다. 그러나 두 번째 다시 시작 시 캐시된 자격 증명이 사용되고 로그인이 무시됩니다.

다음 단계

이 기본 인증 자습서를 완료했으므로 다음 자습서 중 하나를 계속 진행하는 것이 좋습니다.

앱에 푸시 알림 추가
앱에 푸시 알림 지원을 추가하고 Azure Notification Hubs를 사용하여 푸시 알림을 보내도록 모바일 앱 백 엔드를 구성하는 방법을 알아봅니다.
귀하의 앱에 오프라인 동기화를 활성화
모바일 앱 백 엔드를 사용하여 오프라인 지원을 추가하는 방법을 알아봅니다. 오프라인 동기화를 사용하면 네트워크 연결이 없는 경우에도 최종 사용자가 모바일 앱(데이터 보기, 추가 또는 수정)과 상호 작용할 수 있습니다.

Last updated on 2019-06-25