iOS アプリに認証を追加するAdd authentication to your iOS app

注意

Visual Studio App Center では、モバイル アプリ開発の中心となる新しい統合サービスに投資しています。Visual Studio App Center is investing in new and integrated services central to mobile app development. 開発者は、ビルドテスト配布のサービスを使用して、継続的インテグレーションおよびデリバリー パイプラインを設定できます。Developers can use Build, Test and Distribute services to set up Continuous Integration and Delivery pipeline. アプリがデプロイされたら、開発者は分析および診断のサービスを利用してアプリの状態と使用状況を監視し、プッシュ サービスを利用してユーザーと関わることができます。Once the app is deployed, developers can monitor the status and usage of their app using the Analytics and Diagnostics services, and engage with users using the Push service. また、開発者は Auth を利用してユーザーを認証し、データ サービスを利用してクラウド内のアプリ データを保持および同期することもできます。Developers can also leverage Auth to authenticate their users and Data service to persist and sync app data in the cloud. App Center を今すぐチェックしてください。Check out App Center today.

このチュートリアルでは、サポートされている ID プロバイダーを使用して、 iOS クイック スタート プロジェクトに認証を追加します。In this tutorial, you add authentication to the iOS quick start project using a supported identity provider. 最初に、このチュートリアルの基になっている iOS クイック スタート チュートリアルを完了しておく必要があります。This tutorial is based on the iOS quick start tutorial, which you must complete first.

アプリケーションを認証に登録し、App Service を構成するRegister your app for authentication and configure the App Service

最初に、ID プロバイダーのサイトでアプリを登録する必要があります。その後、プロバイダーによって生成された資格情報を Mobile Apps バックエンドに設定します。First, you need to register your app at an identity provider's site, and then you will set the provider-generated credentials in the Mobile Apps back end.

  1. 次のプロバイダー固有の指示に従い、任意の ID プロバイダーを構成します。Configure your preferred identity provider by following the provider-specific instructions:

  2. アプリ内でサポートするプロバイダーごとに、前の手順を繰り返します。Repeat the previous steps for each provider you want to support in your app.

許可されている外部リダイレクト URL にアプリを追加するAdd your app to the Allowed External Redirect URLs

認証をセキュリティで保護するには、アプリ用の新しい URL スキームの定義が必要になります。Secure authentication requires that you define a new URL scheme for your app. これによって、認証プロセスが完了すると認証システムからアプリにリダイレクトできます。This allows the authentication system to redirect back to your app once the authentication process is complete. このチュートリアル全体を通して、URL スキーム appname を使用します。In this tutorial, we use the URL scheme appname throughout. ただし、選択したあらゆる URL スキームを使用できます。However, you can use any URL scheme you choose. URL スキームは、モバイル アプリに対して一意である必要があります。It should be unique to your mobile application. サーバー側でリダイレクトを有効にするには、以下の手順に従います。To enable the redirection on th server side:

  1. Azure Portal で、App Service を選択します。In the Azure portal, select your App Service.

  2. [認証/承認] メニュー オプションをクリックします。Click the Authentication / Authorization menu option.

  3. [認証プロバイダー] セクションの下の [Azure Active Directory] をクリックします。Click Azure Active Directory under the Authentication Providers section.

  4. [Management mode (管理モード)][Advanced (詳細)] に設定します。Set the Management mode to Advanced.

  5. [Allowed External Redirect URLs (許可されている外部リダイレクト URL)]appname://easyauth.callback を入力します。In the Allowed External Redirect URLs, enter appname://easyauth.callback. この文字列の appname は、モバイル アプリケーションの URL スキームです。The appname in this string is the URL Scheme for your mobile application. プロトコルの通常の URL 仕様 (文字と数字のみを使用し、文字で始まる) に従う必要があります。It should follow normal URL specification for a protocol (use letters and numbers only, and start with a letter). 数か所で URL スキームに合わせてモバイル アプリケーション コードを調整する必要があるため、選択した文字列をメモしておく必要があります。You should make a note of the string that you choose as you will need to adjust your mobile application code with the URL Scheme in several places.

  6. Click OK.Click OK.

  7. [Save] をクリックします。Click Save.

アクセス許可を、認証されたユーザーだけに制限するRestrict permissions to authenticated users

既定では、Mobile Apps バックエンドの API は匿名で呼び出すことができます。By default, APIs in a Mobile Apps back end can be invoked anonymously. 次に、認証されたクライアントのみにアクセスを制限する必要があります。Next, you need to restrict access to only authenticated clients.

  • Node.js バックエンド (Azure Portal 経由) :Node.js back end (via the Azure portal) :

    Mobile Apps の設定で [Easy Tables] をクリックし、目的のテーブルを選択します。In your Mobile Apps settings, click Easy Tables and select your table. [アクセス許可の変更] をクリックし、すべてのアクセス許可に対して [Authenticated access only (認証済みアクセスのみ)] を選択し、 [保存] をクリックします。Click Change permissions, select Authenticated access only for all permissions, and then click Save.

  • .NET バックエンド (C#) :.NET back end (C#):

    サーバー プロジェクトで、 [コントローラー] > [TodoItemController.cs] の順に移動します。In the server project, navigate to Controllers > TodoItemController.cs. 次のように、 [Authorize] 属性を TodoItemController クラスに追加します。Add the [Authorize] attribute to the TodoItemController class, as follows. アクセスを特定のメソッドのみに制限するには、この属性を、クラスではなく、そのメソッドのみに適用するだけです。To restrict access only to specific methods, you can also apply this attribute just to those methods instead of the class. サーバー プロジェクトを発行します。Republish the server project.

      [Authorize]
      public class TodoItemController : TableController<TodoItem>
    
  • Node.js バックエンド (Node.js コード経由) :Node.js backend (via Node.js code) :

    テーブルへのアクセスに対して認証を要求するには、Node.js サーバー スクリプトに次の行を追加します。To require authentication for table access, add the following line to the Node.js server script:

      table.access = 'authenticated';
    

    詳細については、「方法:テーブルへのアクセスに認証を要求する」を参照してください。For more details, see How to: Require authentication for access to tables. サイトからクイック スタート コード プロジェクトをダウンロードするには、「方法:Git を使用して Node.js バックエンド クイック スタート コード プロジェクトをダウンロードする」を参照してください。To learn how to download the quickstart code project from your site, see How to: Download the Node.js backend quickstart code project using Git.

Xcode で、 [Run] をクリックしてアプリケーションを開始します。In Xcode, press Run to start the app. 認証されないユーザーとしてアプリがバックエンドにアクセスしようとしても、TodoItem テーブルで認証が要求されるために例外が発生します。An exception is raised because the app attempts to access the backend as an unauthenticated user, but the TodoItem table now requires authentication.

アプリケーションに認証を追加するAdd authentication to app

Objective-C:Objective-C:

  1. Mac の Xcode で QSTodoListViewController.m を開き、次のメソッドを追加します。On your Mac, open QSTodoListViewController.m in Xcode and add the following method:

    - (void)loginAndGetData
    {
        QSAppDelegate *appDelegate = (QSAppDelegate *)[UIApplication sharedApplication].delegate;
        appDelegate.qsTodoService = self.todoService;
    
        [self.todoService.client loginWithProvider:@"google" urlScheme:@"appname" controller:self animated:YES completion:^(MSUser * _Nullable user, NSError * _Nullable error) {
            if (error) {
                NSLog(@"Login failed with error: %@, %@", error, [error userInfo]);
            }
            else {
                self.todoService.client.currentUser = user;
                NSLog(@"User logged in: %@", user.userId);
    
                [self refresh];
            }
        }];
    }
    

    Google を ID プロバイダーとして使用しない場合は、googlemicrosoftaccounttwitterfacebookwindowsazureactivedirectory のいずれかに変更します。Change google to microsoftaccount, twitter, facebook, or windowsazureactivedirectory if you are not using Google as your identity provider. Facebook を使用する場合、アプリで Facebook ドメインをホワイトリストに追加する必要があります。If you use Facebook, you must whitelist Facebook domains in your app.

    urlScheme をアプリケーションの一意の名前に置き換えます。Replace the urlScheme with a unique name for your application. urlScheme は、Azure Portal [Allowed External Redirect URLs (許可されている外部リダイレクト URL)] フィールドに指定した URL スキーム プロトコルと同じにする必要があります。The urlScheme should be the same as the URL Scheme protocol that you specified in the Allowed External Redirect URLs field in the Azure portal. urlScheme は、認証要求が完了した後にアプリケーションに戻るために、認証コールバックで使用されます。The urlScheme is used by the authentication callback to switch back to your application after the authentication request is complete.

  2. QSTodoListViewController.m 内の viewDidLoad[self refresh] を次のコードに置き換えます。Replace [self refresh] in viewDidLoad in QSTodoListViewController.m with the following code:

    [self loginAndGetData];
    
  3. QSAppDelegate.h ファイルを開き、次のコードを追加します。Open the QSAppDelegate.h file and add the following code:

    #import "QSTodoService.h"
    
    @property (strong, nonatomic) QSTodoService *qsTodoService;
    
  4. QSAppDelegate.m ファイルを開き、次のコードを追加します。Open the QSAppDelegate.m file and add the following code:

    - (BOOL)application:(UIApplication *)application openURL:(NSURL *)url options:(NSDictionary<UIApplicationOpenURLOptionsKey,id> *)options
    {
        if ([[url.scheme lowercaseString] isEqualToString:@"appname"]) {
            // Resume login flow
            return [self.qsTodoService.client resumeWithURL:url];
        }
        else {
            return NO;
        }
    }
    

    #pragma mark - Core Data stack という行の前にこのコードを直接追加します。Add this code directly before the line reading #pragma mark - Core Data stack. appname を、手順 1. で使用した urlScheme 値で置き換えます。Replace the appname with the urlScheme value that you used in step 1.

  5. AppName-Info.plist ファイル (AppName はアプリの名前で置き換える) を開き、次のコードを追加します。Open the AppName-Info.plist file (replacing AppName with the name of your app), and add the following code:

    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLName</key>
            <string>com.microsoft.azure.zumo</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>appname</string>
            </array>
        </dict>
    </array>
    

    このコードは、<dict> 要素内に配置する必要があります。This code should be placed inside the <dict> element. appname 文字列 (CFBundleURLSchemes の配列内) を、手順 1 で選択したアプリ名で置き換えます。Replace the appname string (within the array for CFBundleURLSchemes) with the app name you chose in step 1. plist エディターでこれらに変更を加えることもできます。XCode で AppName-Info.plist ファイルをクリックして plist エディターを開きます。You can also make these changes in the plist editor - click on the AppName-Info.plist file in XCode to open the plist editor.

    CFBundleURLNamecom.microsoft.azure.zumo 文字列を Apple のバンドル識別子で置き換えます。Replace the com.microsoft.azure.zumo string for CFBundleURLName with your Apple bundle identifier.

  6. [実行] をクリックしてアプリを起動したら、ログインします。Press Run to start the app, and then log in. ログインが成功すると、Todo リストを表示して更新できます。When you are logged in, you should be able to view the Todo list and make updates.

Swift:Swift:

  1. Mac の Xcode で ToDoTableViewController.swift を開き、次のメソッドを追加します。On your Mac, open ToDoTableViewController.swift in Xcode and add the following method:

    func loginAndGetData() {
    
        guard let client = self.table?.client, client.currentUser == nil else {
            return
        }
    
        let appDelegate = UIApplication.shared.delegate as! AppDelegate
        appDelegate.todoTableViewController = self
    
        let loginBlock: MSClientLoginBlock = {(user, error) -> Void in
            if (error != nil) {
                print("Error: \(error?.localizedDescription)")
            }
            else {
                client.currentUser = user
                print("User logged in: \(user?.userId)")
            }
        }
    
        client.login(withProvider:"google", urlScheme: "appname", controller: self, animated: true, completion: loginBlock)
    
    }
    

    Google を ID プロバイダーとして使用しない場合は、googlemicrosoftaccounttwitterfacebookwindowsazureactivedirectory のいずれかに変更します。Change google to microsoftaccount, twitter, facebook, or windowsazureactivedirectory if you are not using Google as your identity provider. Facebook を使用する場合、アプリで Facebook ドメインをホワイトリストに追加する必要があります。If you use Facebook, you must whitelist Facebook domains in your app.

    urlScheme をアプリケーションの一意の名前に置き換えます。Replace the urlScheme with a unique name for your application. urlScheme は、Azure Portal [Allowed External Redirect URLs (許可されている外部リダイレクト URL)] フィールドに指定した URL スキーム プロトコルと同じにする必要があります。The urlScheme should be the same as the URL Scheme protocol that you specified in the Allowed External Redirect URLs field in the Azure portal. urlScheme は、認証要求が完了した後にアプリケーションに戻るために、認証コールバックで使用されます。The urlScheme is used by the authentication callback to switch back to your application after the authentication request is complete.

  2. ToDoTableViewController.swiftviewDidLoad() の最後にある self.refreshControl?.beginRefreshing()self.onRefresh(self.refreshControl) の行を削除します。Remove the lines self.refreshControl?.beginRefreshing() and self.onRefresh(self.refreshControl) at the end of viewDidLoad() in ToDoTableViewController.swift. その場所に loginAndGetData() の呼び出しを追加します。Add a call to loginAndGetData() in their place:

    loginAndGetData()
    
  3. AppDelegate.swift ファイルを開き、次のコード行を AppDelegate クラスに追加します。Open the AppDelegate.swift file and add the following line to the AppDelegate class:

    var todoTableViewController: ToDoTableViewController?
    
    func application(_ application: UIApplication, openURL url: NSURL, options: [UIApplicationOpenURLOptionsKey : Any] = [:]) -> Bool {
        if url.scheme?.lowercased() == "appname" {
            return (todoTableViewController!.table?.client.resume(with: url as URL))!
        }
        else {
            return false
        }
    }
    

    appname を、手順 1. で使用した urlScheme 値で置き換えます。Replace the appname with the urlScheme value that you used in step 1.

  4. AppName-Info.plist ファイル (AppName はアプリの名前で置き換える) を開き、次のコードを追加します。Open the AppName-Info.plist file (replacing AppName with the name of your app), and add the following code:

    <key>CFBundleURLTypes</key>
    <array>
        <dict>
            <key>CFBundleURLName</key>
            <string>com.microsoft.azure.zumo</string>
            <key>CFBundleURLSchemes</key>
            <array>
                <string>appname</string>
            </array>
        </dict>
    </array>
    

    このコードは、<dict> 要素内に配置する必要があります。This code should be placed inside the <dict> element. appname 文字列 (CFBundleURLSchemes の配列内) を、手順 1 で選択したアプリ名で置き換えます。Replace the appname string (within the array for CFBundleURLSchemes) with the app name you chose in step 1. plist エディターでこれらに変更を加えることもできます。XCode で AppName-Info.plist ファイルをクリックして plist エディターを開きます。You can also make these changes in the plist editor - click on the AppName-Info.plist file in XCode to open the plist editor.

    CFBundleURLNamecom.microsoft.azure.zumo 文字列を Apple のバンドル識別子で置き換えます。Replace the com.microsoft.azure.zumo string for CFBundleURLName with your Apple bundle identifier.

  5. [実行] をクリックしてアプリを起動したら、ログインします。Press Run to start the app, and then log in. ログインが成功すると、Todo リストを表示して更新できます。When you are logged in, you should be able to view the Todo list and make updates.

App Service の認証では、Apple の Inter-App Communication が使用されます。App Service Authentication uses Apples Inter-App Communication. このトピックの詳細については、Apple のドキュメントを参照してください。For more details on this subject, refer to the Apple Documentation