다음을 통해 공유

Xamarin Forms 앱에 인증 추가

개요

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

필수 조건

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

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

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

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

  1. 공급자별 지침에 따라 기본 ID 공급자를 구성합니다.

  2. 앱에서 지원하려는 각 공급자에 대해 이전 단계를 반복합니다.

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

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

  1. Azure Portal에서 App Service를 선택합니다.

  2. 인증/권한 부여 메뉴 옵션을 클릭합니다.

  3. 허용되는 외부 리디렉션 URL에 url_scheme_of_your_app://easyauth.callback를 입력합니다. 이 문자열의 url_scheme_of_your_app 모바일 애플리케이션의 URL 체계입니다. 프로토콜에 대한 일반 URL 사양을 따라야 합니다(문자와 숫자만 사용하고 문자로 시작). 여러 위치에서 URL 체계를 사용하여 모바일 애플리케이션 코드를 조정해야 하므로 선택한 문자열을 기록해 두어야 합니다.

  4. 확인을 클릭합니다.

  5. 저장을 클릭합니다.

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

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

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

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

Xamarin Forms 프로젝트를 사용하여 인증하려면 앱에 대한 이식 가능한 클래스 라이브러리에서 IAuthenticate 인터페이스를 정의합니다. 그런 다음 이식 가능한 클래스 라이브러리에 정의된 사용자 인터페이스에 로그인 단추를 추가하여 인증을 시작합니다. 인증에 성공하면 모바일 앱 백 엔드에서 데이터가 로드됩니다.

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

  1. Visual Studio 또는 Xamarin Studio에서 이식 가능한 클래스 라이브러리 프로젝트인 이름으로 이식 가능한 프로젝트에서 App.cs 연 다음 다음 using 문을 추가합니다.

     ```csharp
 using System.Threading.Tasks;
 ```

  2. App.cs에서 IAuthenticate 인터페이스 정의를 App 클래스 정의 바로 앞에 추가합니다.

     ```csharp
 public interface IAuthenticate
 {
     Task<bool> Authenticate();
 }
 ```

  3. 플랫폼별 구현을 사용하여 인터페이스를 초기화하려면 App 클래스에 다음 정적 멤버를 추가합니다.

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

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

  4. 이식 가능한 클래스 라이브러리 프로젝트에서 TodoList.xaml을 열고 buttonsPanel 레이아웃 요소에 다음 Button 요소를 기존 단추 다음에 추가합니다.

     ```xml
   <Button x:Name="loginButton" Text="Sign-in" MinimumHeightRequest="30"
     Clicked="loginButton_Clicked"/>
 ```

    이 단추는 모바일 앱 백 엔드를 사용하여 서버 관리 인증을 트리거합니다.

  5. 이식 가능한 클래스 라이브러리 프로젝트에서 TodoList.xaml.cs 연 다음 클래스에 TodoList 다음 필드를 추가합니다.

     ```csharp
 // Track whether the user has authenticated.
 bool authenticated = false;
 ```

  6. 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;
     }
 }
 ```

    이 코드는 인증된 후에만 서비스에서 데이터가 새로 고쳐지도록 합니다.

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

     ```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);
 }
 ```

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

Android 앱에 인증 추가

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

  1. Visual Studio 또는 Xamarin Studio에서 드로이드 프로젝트를 마우스 오른쪽 단추로 클릭한 다음 시작 프로젝트로 설정합니다.

  2. F5 키를 눌러 디버거에서 프로젝트를 시작한 다음, 앱이 시작된 후 상태 코드가 401(권한 없음)인 처리되지 않은 예외가 발생하는지 확인합니다. 백 엔드에 대한 액세스가 권한 있는 사용자로만 제한되므로 401 코드가 생성됩니다.

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

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

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

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

  5. 다음과 같이 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에 대해 다른 값을 선택합니다.

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

    <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 구성표로 대체하십시오.

  7. 호출하기 전에 MainActivity 클래스의 OnCreate 메서드에 다음 코드를 추가합니다LoadApplication().

     ```csharp
 // Initialize the authenticator before loading the app.
 App.Init((IAuthenticate)this);
 ```

    이 코드는 앱이 로드되기 전에 인증자가 초기화되도록 합니다.

  8. 앱을 다시 빌드하고 실행한 다음 선택한 인증 공급자로 로그인하고 인증된 사용자로 데이터에 액세스할 수 있는지 확인합니다.

문제 해결

애플리케이션이 과 충돌했습니다. Java.Lang.NoSuchMethodError: No static method startActivity

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

iOS 앱에 인증 추가

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

  1. Visual Studio 또는 Xamarin Studio에서 iOS 프로젝트를 마우스 오른쪽 단추로 클릭한 다음 시작 프로젝트로 설정합니다.

  2. F5 키를 눌러 디버거에서 프로젝트를 시작한 다음, 앱이 시작된 후 상태 코드가 401(권한 없음)인 처리되지 않은 예외가 발생하는지 확인합니다. 백 엔드에 대한 액세스가 권한 있는 사용자로만 제한되므로 401 응답이 생성됩니다.

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

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

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

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

  5. 다음과 같이 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]에 대해 다른 값을 선택합니다.

  6. 다음과 같이 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);
 }
 ```

  7. 호출하기 전에 FinishedLaunching 메서드에 다음 코드 줄을 추가합니다 LoadApplication().

     ```csharp
 App.Init(this);
 ```

    이 코드는 앱이 로드되기 전에 인증자가 초기화되도록 합니다.

  8. Info.plist를 열고 URL 형식을 추가합니다. 식별자를 선택한 이름으로 설정하고, URL 체계를 앱의 URL 체계로 설정하고, Role to None으로 설정합니다.

  9. 앱을 다시 빌드하고 실행한 다음 선택한 인증 공급자로 로그인하고 인증된 사용자로 데이터에 액세스할 수 있는지 확인합니다.

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

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

  1. Visual Studio에서 UWP 프로젝트를 마우스 오른쪽 단추로 클릭한 다음 시작 프로젝트로 설정합니다.

  2. F5 키를 눌러 디버거에서 프로젝트를 시작한 다음, 앱이 시작된 후 상태 코드가 401(권한 없음)인 처리되지 않은 예외가 발생하는지 확인합니다. 401 응답은 백 엔드에 대한 액세스가 권한 있는 사용자로만 제한되기 때문에 발생합니다.

  3. 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>을(를) 바꾸십시오.

  4. 다음과 같이 MainPage 클래스를 업데이트하여 IAuthenticate 인터페이스를 구현합니다.

     public sealed partial class MainPage : IAuthenticate

  5. 다음과 같이 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;
 }
 ```

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

  6. 호출하기 전에 MainPage 클래스에 대한 생성자에 다음 코드 줄을 추가합니다 LoadApplication().

     ```csharp
 // Initialize the authenticator before loading the app.
 <your_Portable_Class_Library_namespace>.App.Init(this);
 ```

    이식 가능한 클래스 라이브러리의 네임스페이스로 <your_Portable_Class_Library_namespace>을(를) 바꾸십시오.

  7. UWP를 사용하는 경우 앱 클래스에 다음 OnActivated 메서드 재정의를 추가합니다.

     ```csharp
 protected override void OnActivated(IActivatedEventArgs args)
 {
    base.OnActivated(args);

     if (args.Kind == ActivationKind.Protocol)
     {
         ProtocolActivatedEventArgs protocolArgs = args as ProtocolActivatedEventArgs;
         MobileServiceClientExtensions.ResumeWithURL(TodoItemManager.DefaultManager.CurrentClient,protocolArgs.Uri);
     }
 }
 ```

  8. Package.appxmanifest를 열고 프로토콜 선언을 추가합니다. 표시 이름을 선택한 이름으로 설정하고 이름을 앱의 URL 구성표로 설정합니다.

  9. 앱을 다시 빌드하고 실행한 다음 선택한 인증 공급자로 로그인하고 인증된 사용자로 데이터에 액세스할 수 있는지 확인합니다.

다음 단계

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

  • 앱에 푸시 알림 추가

    앱에 푸시 알림 지원을 추가하고 Azure Notification Hubs를 사용하여 푸시 알림을 보내도록 모바일 앱 백 엔드를 구성하는 방법을 알아봅니다.

  • 앱의 오프라인 동기화를 활성화합니다

    모바일 앱 백 엔드를 사용하여 오프라인 지원을 추가하는 방법을 알아봅니다. 오프라인 동기화를 사용하면 최종 사용자가 네트워크 연결이 없는 경우에도 데이터를 보거나 추가하거나 수정하는 모바일 앱과 상호 작용할 수 있습니다.

  • Last updated on