Xamarin Forms 앱에 인증 추가

아티클
06/25/2019

개요

이 항목에서는 클라이언트 애플리케이션에서 App Service 모바일 앱의 사용자를 인증하는 방법을 보여 줍니다. 이 자습서에서는 App Service가 지원하는 ID 공급자를 사용하여 Xamarin.Forms 빠른 시작 프로젝트에 인증을 추가합니다. 모바일 앱에서 인증이 완료되고 권한이 부여되고 나면 사용자 ID 값이 표시되고 제한된 테이블 데이터에 액세스할 수 있게 됩니다.

필수 선행 작업

이 자습서를 통한 최상의 결과를 얻기 위해 먼저 Xamarin.Forms 앱 만들기 자습서를 완료하는 것이 좋습니다. 이 자습서를 완료하면 다중 플랫폼 TodoList 앱인 Xamarin.Forms 프로젝트가 생깁니다.

다운로드한 빠른 시작 서버 프로젝트를 사용하지 않는 경우 프로젝트에 인증 확장 패키지를 추가해야 합니다. 서버 확장 패키지에 대한 자세한 내용은 Azure Mobile Apps용 .NET 백 엔드 서버 SDK 사용을 참조하세요.

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

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

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

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

보안 인증을 위해서는 앱에 대한 새로운 URL 체계를 정의해야 합니다. 이를 통해 인증 시스템은 인증 프로세스가 완료되면 앱으로 다시 리디렉션될 수 있습니다. 이 자습서에서는 전체적으로 URL 체계 appname을 사용합니다. 그러나 선택한 어떤 URL 체계도 사용 가능합니다. 이 체계는 모바일 애플리케이션에 고유해야 합니다. 서버 쪽에서 리디렉션을 사용하도록 설정하려면:

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

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

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

이식 가능한 클래스 라이브러리에 인증 추가

Mobile Apps는 MobileServiceClient에서 LoginAsync 확장 메서드를 사용하여 App Service 인증으로 사용자를 로그인합니다. 이 샘플에서는 서버 관리 인증 흐름을 사용하여 앱에서 공급자의 로그인 인터페이스를 표시합니다. 자세한 내용은 서버 관리 인증을 참조하세요. 프로덕션 앱에서 향상된 사용자 환경을 제공하기 위해 대신 클라이언트 관리 인증을 사용하는 것을 고려할 수 있습니다.

Xamarin Forms 프로젝트를 사용하여 인증하기 위해서 앱에 대한 이식 가능한 클래스 라이브러리에 IAuthenticate 인터페이스를 정의합니다. 또한 이식 가능한 클래스 라이브러리에 정의된 사용자 인터페이스를 업데이트하여 로그인 단추를 추가합니다. 사용자는 이 단추를 클릭하여 인증을 시작합니다. 인증에 성공하면 Mobile App 백 엔드에서 데이터가 로드됩니다.

앱에서 지원되는 각 플랫폼에 대해 IAuthenticate 인터페이스를 구현합니다.

Visual Studio 또는 Xamarin Studio에서 이식 가능한 클래스 라이브러리 프로젝트인 이식 가능한 이름으로 프로젝트에서 App.cs를 연 다음 다음 using 문을 추가합니다.
```
 ```csharp
 using System.Threading.Tasks;
 ```
```
App.cs에 App 클래스 정의 직전에 다음과 같은 IAuthenticate 인터페이스 정의를 추가합니다.
```
 ```csharp
 public interface IAuthenticate
 {
     Task<bool> Authenticate();
 }
 ```
```

플랫폼 전용 구현으로 인터페이스를 초기화하도록 App 클래스에 다음 정적 멤버를 추가합니다.

 ```csharp
 public static IAuthenticate Authenticator { get; private set; }

 public static void Init(IAuthenticate authenticator)
 {
     Authenticator = authenticator;
 }
 ```

이식 가능한 클래스 라이브러리 프로젝트에서 TodoList.xaml을 열고 buttonsPanel 레이아웃 요소의 다음 Button 요소를 기존 단추 뒤에 추가합니다.
```
 ```xml
   <Button x:Name="loginButton" Text="Sign-in" MinimumHeightRequest="30"
     Clicked="loginButton_Clicked"/>
 ```
```
이 단추는 모바일 앱 백 엔드로 서버 관리 인증을 트리거합니다.
이식 가능한 클래스 라이브러리 프로젝트에서 TodoList.xaml.cs를 연 후 다음 필드를 TodoList 클래스에 추가합니다.
```
 ```csharp
 // Track whether the user has authenticated.
 bool authenticated = false;
 ```
```

OnAppearing 메서드를 다음 코드로 바꿉니다.

 ```csharp
 protected override async void OnAppearing()
 {
     base.OnAppearing();

     // Refresh items only when authenticated.
     if (authenticated == true)
     {
         // Set syncItems to true in order to synchronize the data
         // on startup when running in offline mode.
         await RefreshItems(true, syncItems: false);

         // Hide the Sign-in button.
         this.loginButton.IsVisible = false;
     }
 }
 ```

이렇게 코드를 변경하면 사용자가 인증된 후에만 데이터가 새로 고침됩니다.

TodoList 클래스에 Clicked 이벤트에 대한 다음 처리기를 추가합니다.

 ```csharp
 async void loginButton_Clicked(object sender, EventArgs e)
 {
     if (App.Authenticator != null)
         authenticated = await App.Authenticator.Authenticate();

     // Set syncItems to true to synchronize the data on startup when offline is enabled.
     if (authenticated == true)
         await RefreshItems(true, syncItems: false);
 }
 ```

변경 내용을 저장하고 이식 가능한 클래스 라이브러리 프로젝트를 다시 빌드하여 오류가 없는지 확인합니다.

Android 앱에 인증 추가

이 섹션에는 Android 앱 프로젝트에서 IAuthenticate 인터페이스를 구현하는 방법을 보여 줍니다. Android 디바이스를 지원하지 않는 경우 이 섹션을 건너뜁니다.

Visual Studio 또는 Xamarin Studio에서 droid 프로젝트를 마우스 오른쪽 단추로 클릭하고 시작 프로젝트로 설정을 클릭합니다.
F5 키를 눌러 디버거에서 프로젝트를 실행하고 앱이 시작된 후 상태 코드 401(인증되지 않음)의 처리되지 않은 예외가 발생하는지 확인합니다. 백 엔드에서 액세스를 인증된 사용자만으로 제한했기 때문에 401 코드가 생성됩니다.

Android 프로젝트에서 MainActivity.cs를 열고 다음 using 문을 추가합니다.

 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 ```

다음과 같이 IAuthenticate 인터페이스를 구현하도록 MainActivity 클래스를 업데이트합니다.

 ```csharp
 public class MainActivity : global::Xamarin.Forms.Platform.Android.FormsApplicationActivity, IAuthenticate
 ```

다음과 같이 IAuthenticate 인터페이스에 필요한 MobileServiceUser 필드 및 Authenticate 메서드를 추가하여 MainActivity 클래스를 업데이트합니다.

 ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     var success = false;
     var message = string.Empty;
     try
     {
         // Sign in with Facebook login using a server-managed flow.
         user = await TodoItemManager.DefaultManager.CurrentClient.LoginAsync(this, 
             MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
         if (user != null)
         {
             message = string.Format("you are now signed-in as {0}.",
                 user.UserId);
             success = true;
         }
     }
     catch (Exception ex)
     {
         message = ex.Message;
     }

     // Display the success or failure message.
     AlertDialog.Builder builder = new AlertDialog.Builder(this);
     builder.SetMessage(message);
     builder.SetTitle("Sign-in result");
     builder.Create().Show();

     return success;
 }

 public override void OnResume()
 {
     base.OnResume();
     Xamarin.Essentials.Platform.OnResume();
 }
 ```

Facebook 이외의 ID 공급자를 사용하는 경우 MobileServiceAuthenticationProvider에 대해 다른 값을 선택합니다.

<application> 요소 내에 다음 XML을 추가하여AndroidManifest.xml 파일을 업데이트합니다.

<activity android:name="com.microsoft.windowsazure.mobileservices.authentication.RedirectUrlActivity" android:launchMode="singleTop" android:noHistory="true">
  <intent-filter>
    <action android:name="android.intent.action.VIEW" />
    <category android:name="android.intent.category.DEFAULT" />
    <category android:name="android.intent.category.BROWSABLE" />
    <data android:scheme="{url_scheme_of_your_app}" android:host="easyauth.callback" />
  </intent-filter>
</activity>

{url_scheme_of_your_app}을 URL 스키마로 바꿉니다.

LoadApplication()에 대한 호출 이전에 MainActivity 클래스의 OnCreate 메서드에 다음 코드를 추가합니다.
```
 ```csharp
 // Initialize the authenticator before loading the app.
 App.Init((IAuthenticate)this);
 ```
```
이 코드를 사용하면 앱이 로드되기 전에 인증자가 초기화됩니다.
앱을 다시 빌드하고 실행한 후 선택한 인증 공급자를 사용하여 로그인하고 인증된 사용자로 데이터에 액세스할 수 있는지 확인합니다.

문제 해결

애플리케이션 작동이 중단되고 Java.Lang.NoSuchMethodError: No static method startActivity 메시지가 표시됨

지원 패키지의 충돌 현상이 Visual Studio에서는 경고로만 표시되는데 런타임에 애플리케이션 작동이 중단되고 이 예외가 표시되는 경우가 있습니다. 이 경우에는 프로젝트에서 참조하는 모든 지원 패키지의 버전이 동일한지 확인해야 합니다. Azure Mobile Apps NuGet 패키지에는 Android 플랫폼에 대한 Xamarin.Android.Support.CustomTabs 종속성이 있으므로 프로젝트에서 최신 지원 패키지를 사용하는 경우 충돌 방지를 위해 필수 버전이 포함된 이 패키지를 직접 설치해야 합니다.

iOS 앱에 인증 추가

이 섹션에는 iOS 앱 프로젝트에서 IAuthenticate 인터페이스를 구현하는 방법을 보여 줍니다. iOS 디바이스를 지원하지 않는 경우 이 섹션을 건너뜁니다.

Visual Studio 또는 Xamarin Studio에서 iOS 프로젝트를 마우스 오른쪽 단추로 클릭하고 시작 프로젝트로 설정을 클릭합니다.
F5 키를 눌러 디버거에서 프로젝트를 실행하고 앱이 시작된 후 상태 코드 401(인증되지 않음)의 처리되지 않은 예외가 발생하는지 확인합니다. 백 엔드에서 액세스를 인증된 사용자만으로 제한했기 때문에 401 응답이 생성됩니다.

iOS 프로젝트에서 AppDelegate.cs를 열고 다음 using 문을 추가합니다.

 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 ```

다음과 같이 IAuthenticate 인터페이스를 구현하도록 AppDelegate 클래스를 업데이트합니다.

 ```csharp
 public partial class AppDelegate : global::Xamarin.Forms.Platform.iOS.FormsApplicationDelegate, IAuthenticate
 ```

다음과 같이 IAuthenticate 인터페이스에 필요한 MobileServiceUser 필드 및 Authenticate 메서드를 추가하여 AppDelegate 클래스를 업데이트합니다.

 ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     var success = false;
     var message = string.Empty;
     try
     {
         // Sign in with Facebook login using a server-managed flow.
         if (user == null)
         {
             user = await TodoItemManager.DefaultManager.CurrentClient
                 .LoginAsync(UIApplication.SharedApplication.KeyWindow.RootViewController,
                 MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
             if (user != null)
             {
                 message = string.Format("You are now signed-in as {0}.", user.UserId);
                 success = true;
             }
         }
     }
     catch (Exception ex)
     {
        message = ex.Message;
     }

     // Display the success or failure message.
     UIAlertController avAlert = UIAlertController.Create("Sign-in result", message, UIAlertControllerStyle.Alert);
     avAlert.AddAction(UIAlertAction.Create("OK", UIAlertActionStyle.Default, null));
     UIApplication.SharedApplication.KeyWindow.RootViewController.PresentViewController(avAlert, true, null);

     return success;
 }
 ```

Facebook 이외의 ID 공급자를 사용하는 경우 [MobileServiceAuthenticationProvider]에 대해 다른 값을 선택합니다.

다음과 같이 OpenUrl 메서드 오버로드를 추가하여 AppDelegate 클래스를 업데이트합니다.

 ```csharp
 public override bool OpenUrl(UIApplication app, NSUrl url, NSDictionary options)
 {
     if (TodoItemManager.DefaultManager.CurrentClient.ResumeWithURL(app, url, options))
         return true;
     return base.OpenUrl(app, url, options);
 }
 ```

LoadApplication()에 대한 호출 이전에 FinishedLaunching 메서드에 다음 코드 줄을 추가합니다.
```
 ```csharp
 App.Init(this);
 ```
```
이 코드를 사용하면 앱이 로드되기 전에 인증자가 초기화됩니다.
Info.plist를 열고 URL 형식을 추가합니다. 식별자를 선택한 이름으로 설정하고, URL 스키마를 앱의 URL 스키마로 설정하고, 역할을 없음으로 설정합니다.
앱을 다시 빌드하고 실행한 후 선택한 인증 공급자를 사용하여 로그인하고 인증된 사용자로 데이터에 액세스할 수 있는지 확인합니다.

Windows 10(Phone 포함) 앱 프로젝트에 인증 추가

이 섹션에는 Windows 10 앱 프로젝트에서 IAuthenticate 인터페이스를 구현하는 방법을 보여 줍니다. 동일한 단계가 UWP(유니버설 Windows 플랫폼) 프로젝트에도 적용되지만 UWP 프로젝트(명시된 변경 내용 포함)를 사용합니다. Windows 디바이스를 지원하지 않는 경우 이 섹션을 건너뜁니다.

Visual Studio에서 UWP 프로젝트를 마우스 오른쪽 단추로 클릭한 다음 시작 프로젝트로 설정을 클릭합니다.
F5 키를 눌러 디버거에서 프로젝트를 실행하고 앱이 시작된 후 상태 코드 401(인증되지 않음)의 처리되지 않은 예외가 발생하는지 확인합니다. 백 엔드에서 액세스를 인증된 사용자만으로 제한했기 때문에 401 응답이 발생합니다.
Windows 앱 프로젝트에 대한 MainPage.xaml.cs를 열고 다음 using 문을 추가합니다.
```
 ```csharp
 using Microsoft.WindowsAzure.MobileServices;
 using System.Threading.Tasks;
 using Windows.UI.Popups;
 using <your_Portable_Class_Library_namespace>;
 ```
```
<your_Portable_Class_Library_namespace> 를 이식 가능한 클래스 라이브러리의 네임스페이스로 바꿉니다.
다음과 같이 IAuthenticate 인터페이스를 구현하도록 MainPage 클래스를 업데이트합니다.
```
 public sealed partial class MainPage : IAuthenticate
```

다음과 같이 IAuthenticate 인터페이스에 필요한 MobileServiceUser 필드 및 Authenticate 메서드를 추가하여 MainPage 클래스를 업데이트합니다.

 ```csharp
 // Define an authenticated user.
 private MobileServiceUser user;

 public async Task<bool> Authenticate()
 {
     string message = string.Empty;
     var success = false;

     try
     {
         // Sign in with Facebook login using a server-managed flow.
         if (user == null)
         {
             user = await TodoItemManager.DefaultManager.CurrentClient
                 .LoginAsync(MobileServiceAuthenticationProvider.Facebook, "{url_scheme_of_your_app}");
             if (user != null)
             {
                 success = true;
                 message = string.Format("You are now signed-in as {0}.", user.UserId);
             }
         }

     }
     catch (Exception ex)
     {
         message = string.Format("Authentication Failed: {0}", ex.Message);
     }

     // Display the success or failure message.
     await new MessageDialog(message, "Sign-in result").ShowAsync();

     return success;
 }
 ```